dimanche 21 février 2021

I am trying to make a php form using JavaScript and Ajax. but its not working, On clicking submit its not doing anything. please help me with this

please tell me what's wrong with my code, I'm trying to make a booking form. but nothing happens when i try to click submit

                    <div class="booking-form-wrpper">
                    <div class="container">
                       <div class="row">
                          <div class="formPopup" id="popupForm">
                             <form id="bookingForm">
                                <div class="form-header">
                                   <button type="button" class="cancel" onclick="closeForm()"><img src="./images/booking_close.png" height="12"
                                         width="10"></button>
                                   <h2>Booking Form</h2>

                                </div>

                                <div class="col">
                                   <div class="form-group">
                                      <label for="name">Name</label>
                                      <input type="text" name="name" placeholder="Enter Your Name" id="name"
                                         class="common-field" required="">
                                      <input type="hidden" name="type" value="booking">
                                   </div>
                                </div>


                                <div class="col">                                    
                                   <div class="form-group">
                                      <label for="email">Email</label>
                                      <input type="email" name="email" placeholder="Enter Your Email" id="email"
                                         class="common-field" required="">
                                   </div>
                                </div>


                                <div class="col">
                                   <div class="form-group">
                                      <label for="phone">Phone No.</label>
                                      <input type="tel" name="phone" id="phone" placeholder="Enter Your Phone Number " onkeypress="javascript:return isNumber(event)" class="common-field" required>
                                   
                                   </div>
                                </div>

                                <div class="col">
                                   <div class="form-group">
                                      <label for="passenger">No. Of Passengers.</label>
                                      <select name="passenger" ip="passenger" class="common-field" required>
                                         <option value="" hidden>Select</option>  
                                         <option value="1">1</option>
                                         <option value="2">2</option>
                                         <option value="3">3</option>
                                         <option value="4">4</option>
                                         <option value="5">5</option>
                                      </select>
                                   </div>
                                </div>
                                <div class="col">
                                   <div class="form-group">
                                      <label for="dateoftravel">Date of Travel</label>
                                      <input type="date" name="datefield" id="datefield" class="common-field">
                                   </div>
                                </div>

                                <div class="form-btn">
                                   <p id="success_sms" style="color: green;"></p>

                                   <a href="javascript:;" id="booksubmit" name="booking" class="btn-hover">Submit</a>
                                </div>
                             </form>
                          </div>
                       </div>
                    </div>
                 </div>

In my footer I have included the js file

<script src="js/script.js"></script>

This is my javaScript code, please do check the validation I have done is correct or not, I'm not sure with that.

$('#bookingForm #booksubmit').click(function(){  
$('#success_sms').text('');
$('#error_sms').html('');
$('#validform').val('');
$('.delfield').each(function(){
  if($(this).val()=='') {
    $('#validform').val(1);
  }
});
  var name    = validateNotEmpty($("#name"), 'Name is required');
  var email   = validEmail($("#email"));
  var phone   = validateMobile($("#phone"));
  var passenger = validateNotEmpty($("passenger"));
  var datefield = validateNotEmpty($("#datefield"), 'Date Of Travel  is required');

var errro_sms=$('#validform').val();
if(errro_sms=='1'){
  $('#error_sms').html('Please fill all fields');
  return false;
}


if(name && email && phone && passenger && datefield){
    var formData = $('#bookingForm').serialize();
    $.ajax({
    type:'POST',
    url:'ajax/mail.php',
   // url:'ajax/mail.php',
    data:formData,       
    beforeSend:function(html){ 
     // loderShow();
     $('#success_sms').text('Please wait.....');      
    },
    success:function(html){    
    if(html.trim()=='success')
    {
        api_type('success', 'Thank you! Your booking form has been submitted. We will get back to you via e-mail and confirm availability shortly.');
        $('#success_sms').html('Thank you! Your booking form has been submitted.<br> We will get back to you via e-mail and confirm availability shortly.');
          setTimeout(function(){ 
          // location.reload();
         }, 2500);     
        $('#name').val('');
        $('#email').val('');
        $('#phone').val('');
        $('#passenger').val('');      
        $('#datefield').val('');             
        $('#success_sms').text(''); 
        $('.delfield').each(function()
        {
         $(this).val('')
        }); 
        $('#remove_submit').remove();     
    }      

    if(html.trim()=='fail'){
       api_type('danger', 'Sorry something is wrong');
    }  
}
 });
}
else
{
  api_type('danger', 'Sorry something is wrong');
    
}

});

I'm not providing the mail code, but if you want that I can that too.




Aucun commentaire:

Enregistrer un commentaire