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