API tools faq
paste
Advertisement
hsianghui

Lab 5 (customer_form.ejs)

hsianghui
Jan 1st, 2025 (edited)
93
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.31 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <!-- prettier-ignore -->
  4.   <%
  5.    let formAction = '/customers/add';
  6.    let formLabel = 'Create A New Customer';
  7.    if (typeof _id !='undefined' ){
  8.      formAction = `/customers/${_id}/edit`;
  9.      formLabel = 'Edit Customer';
  10.    }
  11.  %>
  12.   <!-- pass the title to the template -->
  13.   <%- include("head", {title: formLabel}) %>
  14.  
  15.   <body class="hold-transition sidebar-mini layout-fixed">
  16.     <div class="wrapper">
  17.       <!-- prettier-ignore -->
  18.       <%- include("navbar") %>
  19.       <%- include("sidebar") %>
  20.  
  21.       <div class="content-wrapper">
  22.         <!-- Content Header (Page header) -->
  23.         <div class="content-header">
  24.           <div class="container-fluid">
  25.             <div class="row mb-2">
  26.               <div class="col-sm-6">
  27.                 <h1 class="m-0 text-dark"><%= formLabel %></h1>
  28.               </div>
  29.               <!-- /.col -->
  30.               <div class="col-sm-6">
  31.                 <ol class="breadcrumb float-sm-right">
  32.                   <li class="breadcrumb-item">
  33.                     <a href="/">Home</a>
  34.                   </li>
  35.                   <li class="breadcrumb-item active"><%= formLabel %></li>
  36.                 </ol>
  37.               </div>
  38.               <!-- /.col -->
  39.             </div>
  40.             <!-- /.row -->
  41.           </div>
  42.           <!-- /.container-fluid -->
  43.         </div>
  44.         <!-- /.content-header -->
  45.  
  46.         <!-- Main content -->
  47.         <section class="content">
  48.           <!-- general form elements -->
  49.           <div class="card card-primary">
  50.             <div class="card-header">
  51.               <h3 class="card-title"><%= formLabel %></h3>
  52.             </div>
  53.             <!-- /.card-header -->
  54.             <!-- form start -->
  55.             <form
  56.              action="<%= typeof _id != 'undefined' ? `/customers/${_id}/edit` : '/customers/add' %>"
  57.               method="post"
  58.             >
  59.               <div class="card-body">
  60.                 <!-- name -->
  61.                 <div class="form-group">
  62.                   <label for="name">Name:</label>
  63.                   <input
  64.                    type="text"
  65.                    class="form-control"
  66.                    id="name"
  67.                    name="name"
  68.                    value="<%= typeof name != 'undefined' ? name : '' %>"
  69.                     required
  70.                   />
  71.                 </div>
  72.  
  73.                 <!-- gender -->
  74.                 <!-- prettier-ignore -->
  75.                 <%
  76.                let femaleChecked = true, maleChecked = false;
  77.                if (typeof gender != 'undefined' ) {
  78.                  if (gender === 2){
  79.                    maleChecked = true;
  80.                    femaleChecked = false;
  81.                  }
  82.                } %>
  83.                 <div class="form-group">
  84.                   <div class="icheck-primary">
  85.                     <input type="radio" class="form-check-input" name="gender"
  86.                    value="1" id="female" <%=femaleChecked ? "checked" : "" %>
  87.                     />
  88.                     <label for="female" class="form-check-label">Female</label>
  89.                   </div>
  90.                   <div class="icheck-primary">
  91.                     <input type="radio" class="form-check-input" name="gender"
  92.                    value="2" id="male" <%=maleChecked ? "checked" : "" %>/>
  93.                     <label for="male" class="form-check-label">Male</label>
  94.                   </div>
  95.                 </div>
  96.  
  97.                 <!-- DOB -->
  98.                 <div class="form-group">
  99.                   <label for="dob">Date of Birth (yyyy-mm-dd)</label>
  100.                   <div
  101.                    class="input-group date"
  102.                    id="dobpicker"
  103.                    data-target-input="nearest"
  104.                  >
  105.                     <div
  106.                      class="input-group-prepend"
  107.                      data-target="#dobpicker"
  108.                      data-toggle="datetimepicker"
  109.                    >
  110.                       <div class="input-group-text">
  111.                         <i class="fa fa-calendar"></i>
  112.                       </div>
  113.                     </div>
  114.                     <input
  115.                      type="text"
  116.                      class="form-control datetimepicker-input"
  117.                      id="dob"
  118.                      name="dob"
  119.                      value="<%= typeof dob != 'undefined' ? dob.toISOString().split('T')[0] : '' %>"
  120.                       required
  121.                       data-target="#dobpicker"
  122.                       data-toggle="datetimepicker"
  123.                     />
  124.                   </div>
  125.                 </div>
  126.               </div>
  127.               <!-- /.card-body -->
  128.  
  129.               <div class="card-footer">
  130.                 <a href="/customers/list" class="btn btn-default">Cancel</a>
  131.                 <input
  132.                  class="btn btn-primary float-right"
  133.                  type="submit"
  134.                  value="Submit"
  135.                />
  136.               </div>
  137.             </form>
  138.           </div>
  139.           <!-- /.card -->
  140.         </section>
  141.         <!-- /.content -->
  142.       </div>
  143.       <%- include("footer") %>
  144.     </div>
  145.  
  146.     <%- include("script") %>
  147.     <script>
  148.       //Date picker
  149.       $("#dobpicker").datetimepicker({
  150.         format: "YYYY-MM-DD",
  151.       });
  152.     </script>
  153.   </body>
  154. </html>
  155.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!