Hi,
I have a php / ajax / javascript form that I am trying to get to work. With a great deal of help from another forum, I just need to get the success and error messages to show.
My form is at http://www.testing123.co.za/try/test-toggle.htm
My object was to get have multiple forms on 1 page, but at the moment when you click submit on either form, the success or error message doesn't show and instead a loading gif spins near the submit button.
Javascript for the form goes like:
Code:
// JavaScript Document
jQuery(document).ready(function(){
$('.contactform').submit(function(){
var action = $(this).attr('action');
$('.submit', this).attr('disabled','disabled').after('<img src="assets/ajax-loader.gif" class="loader" />');
$('.message', this).slideUp(750,function() {
$('.message', this).hide();
$.post(action, {
name: $('.name', this).val(),
email: $('.email', this).val(),
phone: $('.phone', this).val(),
dayin: $('.dayin', this).val(),
dayout: $('.dayout', this).val(),
comments: $('.comments', this).val(),
verify: $('.verify', this).val()
},
function(data){
$('.message', this).html(data);
$('.message', this).slideDown('slow');
$('img.loader', this).fadeOut('fast',function() {
$(this).remove();
});
$('.submit', this).removeAttr('disabled');
if(data.match('success') != null);
$('.message', this).show().delay(5000).fadeOut();
});
});
return false;
});
});
HTML FORM:
Code:
<body>
<div id="container">
<div id="accommodation_listing_options_box">
<ul id="accommodation_listing_options">
<li>Price Range: <a href="#" class="tooltip" style="cursor:help;" title="Mid-range Accommodation"><img src="../mid-range-yellow.png" width="28" height="19" align="absmiddle" style="padding-left:0px;" /></a></li>
<li><a href="#">View Comments</a> <img src="../comments_bubble_small.png" width="18" height="16" align="absmiddle" style="padding-left:5px;" /></li>
</ul>
</div>
<div id="quick_enquiry_box">Make Quick Enquiry</div>
<div style="clear:both; width:710px;"></div>
<div style="clear:both;"></div>
<div id="slide_panel">
<div id="contact">
<form method="post" action="contact.php" name="contactform" id="contactform" class="contactform"><div class="message"></div>
<div id="my_contact_left">
<label for="name" accesskey="U"><span class="required">*</span>Name</label><br />
<input name="name" type="text" id="name" size="30" class="name" />
<br />
<label for="email" accesskey="E"><span class="required">*</span>Email</label><br />
<input name="email" type="text" id="email" size="30" class="email" />
<br />
<label for="phone" accesskey="P"><span class="required">*</span>Phone:</label><br />
<input name="phone" type="text" id="phone" size="30" class="phone" />
<br />
<label for="dayin" accesskey="P">Day in:</label><br />
<input name="dayin" type="text" id="dayin" size="30" class="dayin" />
<br />
<label for="dayout" accesskey="P">Day out:</label><br />
<input name="dayout" type="text" id="dayout" size="30" class="dayout" />
</div>
<div id="my_contact_right">
<label for="comments" accesskey="C"><span class="required">*</span>Your Comments</label><br />
<textarea name="comments" cols="40" rows="3" id="comments" class="comments" style="width: 350px; height:100px;"></textarea>
<p><span class="required">*</span>Type the validation code in below</p>
<div style="width:100px; height:40px; float:left;"><label for="verify" accesskey="V"> <img src="image.php" alt="Image verification" border="0"/></label></div>
<div style="width:310px; height:40px; float:right;"><input name="verify" type="text" id="verify" class="verify" size="6" value="" style="width: 50px;" />
<input type="submit" style="margin-left:112px;" class="submit" id="submit" value="Send it!" /></div>
<div style="clear:both; width:410px;"></div>
</div>
<div style="clear:both; width:710px;"></div>
</form>
</div>
<div id="quick_form_wrapper_close"><a href="#"><img src="../close-panel-button.gif" /></a></div>
</div>
<div id="accommodation_listing_options_box">
<ul id="accommodation_listing_options">
<li>Price Range: <a href="#" class="tooltip" style="cursor:help;" title="Mid-range Accommodation"><img src="../mid-range-yellow.png" width="28" height="19" align="absmiddle" style="padding-left:0px;" /></a></li>
<li><a href="#">View Comments</a> <img src="../comments_bubble_small.png" width="18" height="16" align="absmiddle" style="padding-left:5px;" /></li>
</ul>
</div>
<div id="quick_enquiry_box2">Make Quick Enquiry</div>
<div style="clear:both; width:710px;"></div>
<div style="clear:both;"></div>
<div id="slide_panel2">
<div id="contact">
<form method="post" action="contact2.php" name="contactform" id="contactform" class="contactform"><div class="message"></div>
<div id="my_contact_left">
<label for="name" accesskey="U"><span class="required">*</span>Name</label><br />
<input name="name" type="text" id="name" size="30" class="name" />
<br />
<label for="email" accesskey="E"><span class="required">*</span>Email</label><br />
<input name="email" type="text" id="email" size="30" class="email" />
<br />
<label for="phone" accesskey="P"><span class="required">*</span>Phone:</label><br />
<input name="phone" type="text" id="phone" size="30" class="phone" />
<br />
<label for="dayin" accesskey="P">Day in:</label><br />
<input name="dayin" type="text" id="dayin" size="30" class="dayin" />
<br />
<label for="dayout" accesskey="P">Day out:</label><br />
<input name="dayout" type="text" id="dayout" size="30" class="dayout" />
</div>
<div id="my_contact_right">
<label for="comments" accesskey="C"><span class="required">*</span>Your Comments</label><br />
<textarea name="comments" cols="40" rows="3" id="comments" class="comments" style="width: 350px; height:100px;"></textarea>
<p><span class="required">*</span>Type the validation code in below</p>
<div style="width:100px; height:40px; float:left;"><label for="verify" accesskey="V"> <img src="image.php" alt="Image verification" border="0"/></label></div>
<div style="width:310px; height:40px; float:right;"><input name="verify" type="text" id="verify" class="verify" size="6" value="" style="width: 50px;" />
<input type="submit" style="margin-left:112px;" class="submit" id="submit" value="Send it!" /></div>
<div style="clear:both; width:410px;"></div>
</div>
<div style="clear:both; width:710px;"></div>
</form>
</div>
<div id="quick_form_wrapper_close2"><a href="#"><img src="../close-panel-button.gif" /></a></div>
</div>
</div>
</body>
The success / error message should appear in the div
<div class="message"></div>
which you can see is in the html form above.
Any ideas why the success / error messages arn't showing upon submit?
Thanks in advance.