관리-도구

편집 파일: reservation-form.html

<div class="modal-header bg-theme-colored">
  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <h4 class="modal-title text-white" id="myModalLabel">Reservation Form</h4>
</div>
<div class="p-40">
  
    <form id="reservation_form_popup" name="reservation_form" class="reservation-form" method="post" action="https://html.kodesolution.com/2017/learnpress-html/demo/ajax-load/includes/reservation.php"><h3 class="mt-0 line-bottom text-theme-colored mb-40">Get A Free Service<span class="text-theme-colored font-weight-600"> Now!</span></h3>
      <div class="row">
        <div class="col-sm-12">
          <div class="form-group mb-30">
            <input placeholder="Enter Name" type="text" id="reservation_name" name="reservation_name" required="" class="form-control">
          </div>
        </div>
        <div class="col-sm-6">
          <div class="form-group mb-30">
            <input placeholder="Email" type="text" id="reservation_email" name="reservation_email" class="form-control" required="">
          </div>
        </div>
        <div class="col-sm-6">
          <div class="form-group mb-30">
            <input placeholder="Phone" type="text" id="reservation_phone" name="reservation_phone" class="form-control" required="">
          </div>
        </div>
        <div class="col-sm-6">
          <div class="form-group mb-30">
            <div class="styled-select">
              <select id="car_select" name="car_select" class="form-control" required="">
                <option value="">- Select Your Course Type -</option>
                <option value="Toyota">Children Lesson</option>
                <option value="Jeep">Adult Lesson</option>
                <option value="Audi">Vaulting Lesson</option>
                <option value="Truck">Group Lesson</option>
                <option value="Land Rover">Female Lasson</option>
                <option value="Lexus">Family Lesson</option>
              </select>
            </div>
          </div>
        </div>
        <div class="col-sm-6">
          <div class="form-group mb-30">
            <input name="reservation_date" class="form-control required date-picker" type="text" placeholder="Reservation Date" aria-required="true">
          </div>
        </div>
        <div class="col-sm-12">
          <div class="form-group mb-0 mt-0">
            <input name="form_botcheck" class="form-control" type="hidden" value="">
            <button type="submit" class="btn btn-colored btn-theme-colored btn-lg btn-flat border-left-theme-colored-4px" data-loading-text="Please wait...">Submit Now</button>
          </div>
        </div>
      </div>
    </form>

<script type="text/javascript">
      $("#reservation_form_popup").validate({
        submitHandler: function(form) {
          var form_btn = $(form).find('button[type="submit"]');
          var form_result_div = '#form-result';
          $(form_result_div).remove();
          form_btn.before('<div id="form-result" class="alert alert-success" role="alert" style="display: none;"></div>');
          var form_btn_old_msg = form_btn.html();
          form_btn.html(form_btn.prop('disabled', true).data("loading-text"));
          $(form).ajaxSubmit({
            dataType:  'json',
            success: function(data) {
              if( data.status == 'true' ) {
                $(form).find('.form-control').val('');
              }
              form_btn.prop('disabled', false).html(form_btn_old_msg);
              $(form_result_div).html(data.message).fadeIn('slow');
              setTimeout(function(){ $(form_result_div).fadeOut('slow') }, 6000);
            }
          });
        }
      });
    </script>
    
</div>

<script>
  //reload date and time picker
  THEMEMASCOT.initialize.TM_datePicker();
</script>