Databases
StackOverflow2013
Postsdbo
POSuccess / Error Messages on form Submit not showing
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSuccess / Error Messages on form Submit not showing
    text
    copied!<p>I have a php / ajax / javascript form that I am trying to get to work. With a great deal of help from John Fable, I just need to get the success and error messages to show. See our thread here: <a href="https://stackoverflow.com/questions/8347692/putting-multiple-forms-on-the-same-page">Putting multiple forms on the same page</a></p> <p>My form is at: <a href="http://www.testing123.co.za/try/test-toggle.htm" rel="nofollow noreferrer">http://www.testing123.co.za/try/test-toggle.htm</a></p> <p>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.</p> <p>Javascript for the form goes like:</p> <pre><code> // JavaScript Document jQuery(document).ready(function() { $('.contactform').submit(function() { var action = $(this).attr('action'); $('.submit', this).attr('disabled', 'disabled').after('&lt;img src="assets/ajax- loader.gif" class="loader" /&gt;'); $('.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; }); }); </code></pre> <p>HTML FORM:</p> <pre><code>&lt;body&gt; &lt;div id="container"&gt; &lt;div id="accommodation_listing_options_box"&gt; &lt;ul id="accommodation_listing_options"&gt; &lt;li&gt;Price Range: &lt;a href="#" class="tooltip" style="cursor:help;" title="Mid-range Accommodation"&gt;&lt;img src="../mid-range-yellow.png" width="28" height="19" align="absmiddle" style="padding-left:0px;" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;View Comments&lt;/a&gt; &lt;img src="../comments_bubble_small.png" width="18" height="16" align="absmiddle" style="padding-left:5px;" /&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="quick_enquiry_box"&gt;Make Quick Enquiry&lt;/div&gt; &lt;div style="clear:both; width:710px;"&gt;&lt;/div&gt; &lt;div style="clear:both;"&gt;&lt;/div&gt; &lt;div id="slide_panel"&gt; &lt;div id="contact"&gt; &lt;form method="post" action="contact.php" name="contactform" id="contactform" class="contactform"&gt;&lt;div class="message"&gt;&lt;/div&gt; &lt;div id="my_contact_left"&gt; &lt;label for="name" accesskey="U"&gt;&lt;span class="required"&gt;*&lt;/span&gt;Name&lt;/label&gt;&lt;br /&gt; &lt;input name="name" type="text" id="name" size="30" class="name" /&gt; &lt;br /&gt; &lt;label for="email" accesskey="E"&gt;&lt;span class="required"&gt;* &lt;/span&gt;Email&lt;/label&gt;&lt;br /&gt; &lt;input name="email" type="text" id="email" size="30" class="email" /&gt; &lt;br /&gt; &lt;label for="phone" accesskey="P"&gt;&lt;span class="required"&gt;*&lt;/span&gt;Phone: &lt;/label&gt;&lt;br /&gt; &lt;input name="phone" type="text" id="phone" size="30" class="phone" /&gt; &lt;br /&gt; &lt;label for="dayin" accesskey="P"&gt;Day in:&lt;/label&gt;&lt;br /&gt; &lt;input name="dayin" type="text" id="dayin" size="30" class="dayin" /&gt; &lt;br /&gt; &lt;label for="dayout" accesskey="P"&gt;Day out:&lt;/label&gt;&lt;br /&gt; &lt;input name="dayout" type="text" id="dayout" size="30" class="dayout" /&gt; &lt;/div&gt; &lt;div id="my_contact_right"&gt; &lt;label for="comments" accesskey="C"&gt;&lt;span class="required"&gt;*&lt;/span&gt;Your Comments&lt;/label&gt;&lt;br /&gt; &lt;textarea name="comments" cols="40" rows="3" id="comments" class="comments" style="width: 350px; height:100px;"&gt;&lt;/textarea&gt; &lt;p&gt;&lt;span class="required"&gt;*&lt;/span&gt;Type the validation code in below&lt;/p&gt; &lt;div style="width:100px; height:40px; float:left;"&gt;&lt;label for="verify" accesskey="V"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;img src="image.php" alt="Image verification" border="0"/&gt;&lt;/label&gt;&lt;/div&gt; &lt;div style="width:310px; height:40px; float:right;"&gt;&lt;input name="verify" type="text" id="verify" class="verify" size="6" value="" style="width: 50px;" /&gt; &lt;input type="submit" style="margin-left:112px;" class="submit" id="submit" value="Send it!" /&gt;&lt;/div&gt; &lt;div style="clear:both; width:410px;"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div style="clear:both; width:710px;"&gt;&lt;/div&gt; &lt;/form&gt; &lt;/div&gt; &lt;div id="quick_form_wrapper_close"&gt;&lt;a href="#"&gt;&lt;img src="../close-panel-button.gif" /&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="accommodation_listing_options_box"&gt; &lt;ul id="accommodation_listing_options"&gt; &lt;li&gt;Price Range: &lt;a href="#" class="tooltip" style="cursor:help;" title="Mid-range Accommodation"&gt;&lt;img src="../mid-range-yellow.png" width="28" height="19" align="absmiddle" style="padding-left:0px;" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;View Comments&lt;/a&gt; &lt;img src="../comments_bubble_small.png" width="18" height="16" align="absmiddle" style="padding-left:5px;" /&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="quick_enquiry_box2"&gt;Make Quick Enquiry&lt;/div&gt; &lt;div style="clear:both; width:710px;"&gt;&lt;/div&gt; &lt;div style="clear:both;"&gt;&lt;/div&gt; &lt;div id="slide_panel2"&gt; &lt;div id="contact"&gt; &lt;form method="post" action="contact2.php" name="contactform" id="contactform" class="contactform"&gt;&lt;div class="message"&gt;&lt;/div&gt; &lt;div id="my_contact_left"&gt; &lt;label for="name" accesskey="U"&gt;&lt;span class="required"&gt;*&lt;/span&gt;Name&lt;/label&gt;&lt;br /&gt; &lt;input name="name" type="text" id="name" size="30" class="name" /&gt; &lt;br /&gt; &lt;label for="email" accesskey="E"&gt;&lt;span class="required"&gt;* &lt;/span&gt;Email&lt;/label&gt;&lt;br /&gt; &lt;input name="email" type="text" id="email" size="30" class="email" /&gt; &lt;br /&gt; &lt;label for="phone" accesskey="P"&gt;&lt;span class="required"&gt;*&lt;/span&gt;Phone: &lt;/label&gt;&lt;br /&gt; &lt;input name="phone" type="text" id="phone" size="30" class="phone" /&gt; &lt;br /&gt; &lt;label for="dayin" accesskey="P"&gt;Day in:&lt;/label&gt;&lt;br /&gt; &lt;input name="dayin" type="text" id="dayin" size="30" class="dayin" /&gt; &lt;br /&gt; &lt;label for="dayout" accesskey="P"&gt;Day out:&lt;/label&gt;&lt;br /&gt; &lt;input name="dayout" type="text" id="dayout" size="30" class="dayout" /&gt; &lt;/div&gt; &lt;div id="my_contact_right"&gt; &lt;label for="comments" accesskey="C"&gt;&lt;span class="required"&gt;*&lt;/span&gt;Your Comments&lt;/label&gt;&lt;br /&gt; &lt;textarea name="comments" cols="40" rows="3" id="comments" class="comments" style="width: 350px; height:100px;"&gt;&lt;/textarea&gt; &lt;p&gt;&lt;span class="required"&gt;*&lt;/span&gt;Type the validation code in below&lt;/p&gt; &lt;div style="width:100px; height:40px; float:left;"&gt;&lt;label for="verify" accesskey="V"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;img src="image.php" alt="Image verification" border="0"/&gt;&lt;/label&gt;&lt;/div&gt; &lt;div style="width:310px; height:40px; float:right;"&gt;&lt;input name="verify" type="text" id="verify" class="verify" size="6" value="" style="width: 50px;" /&gt; &lt;input type="submit" style="margin-left:112px;" class="submit" id="submit" value="Send it!" /&gt;&lt;/div&gt; &lt;div style="clear:both; width:410px;"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div style="clear:both; width:710px;"&gt;&lt;/div&gt; &lt;/form&gt; &lt;/div&gt; &lt;div id="quick_form_wrapper_close2"&gt;&lt;a href="#"&gt;&lt;img src="../close-panel-button.gif" /&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>The success / error message should appear in the div:</p> <p><code>&lt;div class="message"&gt;&lt;/div&gt;</code> which you can see is in the html form above.</p> <p>Any ideas why the success / error messages arn't showing upon submit?</p> <p>Thanks in advance.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload