Would anyone know why my submit button wouldn’t call javascript to verify if certain fields are populated in the form?
To have better idea I have provided a link to the website: http://www.flyingcowproduction.com/pls and click on the button “reservation” from the top menu.
Form:
<form method="post" action="process.php">
<div class="grid_6">
<div class="element">
<label>Name*</label>
<input type="text" name="name" class="text" style="width:427px;" />
</div>
</div>
<div class="clear"></div>
<div class="grid_3">
<div class="element">
<label>Email*</label>
<input type="text" name="email" class="text" style="width:200px;" />
</div>
</div>
<div class="grid_3">
<div class="element">
<label>Phone</label>
<input type="text" name="phone" class="text" style="width:200px;" />
</div>
</div>
<div class="clear"></div>
<div class="grid_3">
<div class="element">
<label>Address*</label>
<input type="text" name="address" class="text" style="width:200px;" />
</div>
</div>
<div class="grid_2">
<div class="element">
<label>City*</label>
<input type="text" name="city" class="text" style="width:119px;" />
</div>
</div>
<div class="grid_1">
<div class="element">
<label>Zip*</label>
<input type="text" name="zipcode" class="text" style="width:55px;" />
</div>
</div>
<div class="clear"></div>
<div class="grid_6">
<div class="element">
<label>Where do you want to go?*</label>
<input type="text" name="service" class="text" style="width:427px;" />
</div>
</div>
<div class="clear"></div>
<div class="grid_3">
<div class="element">
<label>Date and time of service*</label>
<input type="text" name="datetime" class="text" style="width:200px;" />
</div>
</div>
<div class="grid_2">
<div class="element">
<label>Passengers (max)</label>
<input type="text" name="passingers" class="text" style="width:75px;" />
</div>
</div>
<div class="grid_1">
</div>
<div class="clear"></div>
<div class="grid_6">
<div class="element">
<label>Comment</label>
<textarea name="comment" class="text textarea" style="width:427px;" rows="4" /></textarea>
</div>
</div>
<div class="clear"></div>
<div class="grid_6">
<div class="element">
<input type="submit" id="submit" value="MAKE RESERVATION" />
<p> </p>
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
//if submit button is clicked
$('#submit').click(function () {
//Get the data from all the fields
var name = $('input[name=name]');
var email = $('input[name=email]');
var phone = $('input[name=phone]');
var address = $('input[name=address]');
var city = $('input[name=city]');
var zipcode = $('input[name=zipcode]');
var service = $('input[name=service]');
var datetime = $('input[name=datetime]');
var passingers = $('input[name=passingers]');
var comment = $('textarea[name=comment]');
//Simple validation to make sure user entered something
//If error found, add hightlight class to the text field
if (name.val()=='') {
name.addClass('hightlight');
return false;
} else name.removeClass('hightlight');
if (email.val()=='') {
email.addClass('hightlight');
return false;
} else email.removeClass('hightlight');
if (address.val()=='') {
address.addClass('hightlight');
return false;
} else address.removeClass('hightlight');
if (city.val()=='') {
city.addClass('hightlight');
return false;
} else city.removeClass('hightlight');
if (zipcode.val()=='') {
zipcode.addClass('hightlight');
return false;
} else zipcode.removeClass('hightlight');
if (service.val()=='') {
service.addClass('hightlight');
return false;
} else service.removeClass('hightlight');
if (datetime.val()=='') {
datetime.addClass('hightlight');
return false;
} else datetime.removeClass('hightlight');
//organize the data properly
var data = 'name=' + name.val() + '&email=' + email.val() + '&phone=' + phone.val() + '&address=' + address.val() + '&city=' + city.val() + '&zipcode=' + zipcode.val() + '&service=' + service.val() + '&datetime=' + datetime.val() + '&passingers=' + passingers.val() + '&comment=' + encodeURIComponent(comment.val());
//disabled all the text fields
$('.text').attr('disabled','true');
//show the loading sign
$('.loading').show();
//start the ajax
$.ajax({
//this is the php file that processes the data and send mail
url: "process.php",
//GET method is used
type: "GET",
//pass the data
data: data,
//Do not cache the page
cache: false,
//success
success: function (html) {
//if process.php returned 1/true (send mail success)
if (html==1) {
//hide the form
$('.form').fadeOut('slow');
//show the success message
$('.done').fadeIn('slow');
//if process.php returned 0/false (send mail failed)
} else alert('Sorry, unexpected error. Please try again later.');
}
});
//cancel the submit button default behaviours
return false;
});
});
many many thanks in advance
Your function is fine and is getting called if one uses your provided html above. But the site you gave link of shows this
see that id=”FormId” it should be “submit”
Ok now please try this
1) Make sure you backup things
2) Remove the validation function that we just added to index.html
3) Replace the last script block (which starts from line 358) on index.html with the following
EDIT 2
1) Remove the Script block at the bottom that we just added.
2) Copy the whole reservations div from loader.html into a new file named reservations.html.
3) Place the original validation function in this div back on its position in “reservations.html”.
4) Place this script block at the end of your index.html