Databases
StackOverflow2013
Postsdbo
POAJAX Form Submission Styling
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAJAX Form Submission Styling
    text
    copied!<p>I am using Ajax with jQuery to submit a webform. When the webform submits a nice thank you message comes up. The message covers the form itself and will provide the user with information on what to do next etc. The issue is that the form can have several fields and when the user hits submit they see the form disappear but that is about it. </p> <p>I added some JS that would kick the user to the top of the page (and see the thank you message at the top) but still there can be a lot of blank space where the form was. </p> <p>The question I have is how would I go about having the form change from its starting state to display:none; while the confirmation message shows in its place. </p> <p>Here is a copy of my code: </p> <pre><code>function jqsub() { var $j = jQuery.noConflict(); var $jform = $j('#ajaxform'); // form ID var $jmessagebox = $j('#ajaxdiv'); // message box ID var $jsuccessmessage = "&lt;h3&gt;Thank You For Your Submission!&lt;/h3&gt;"; // success message in HTML format var $jerrormessage = "&lt;h3&gt;Error - Please Try Again&lt;/h3&gt;"; //error message in HTML format $j.ajax({ type: 'POST', url: $jform.attr('action'), data: $jform.serialize(), success: function (msg) { if (msg.FormProcessV2Response.success) { $jmessagebox.append($jsuccessmessage) $jmessagebox.fadeIn(); } else { $jmessagebox.append($jerrormessage) $jmessagebox.fadeIn(); } }, error: function (msg) { $jmessagebox.append($jerrormessage) $jmessagebox.fadeIn(); }, }); $j( 'html, body' ).animate( { scrollTop: 0 }, 0 ); } </code></pre> <p>Here is the page I am working with: <a href="http://ubhape2remodel.businesscatalyst.com/testform.html" rel="nofollow">http://ubhape2remodel.businesscatalyst.com/testform.html</a></p> <p>One other note: If there is an error on the form what is a simple way to have the Error message go away and the form show again? (Basically swapping states back to where the form shows vs the message) Thanks again for your help!</p> <p>Hope all of that makes sense. </p> <p>I welcome any advice, ideas, and help. </p> <p>Thanks!</p> <p>Lynda</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