Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>You'll have to do things manually with an AJAX call to the server. This will require you to override the form as well.</p> <p>But don't worry, it's a piece of cake. Here's an overview on how you'll go about working with your form:</p> <ul> <li>override the default submit action (thanks to the passed in event object, that has a <code>preventDefault</code> method)</li> <li>grab all necessary values from the form</li> <li>fire off an HTTP request</li> <li>handle the response to the request</li> </ul> <p>First, you'll have to cancel the form submit action like so:</p> <pre><code>$("#myform").submit(function(event) { // Cancels the form's submit action. event.preventDefault(); }); </code></pre> <p>And then, grab the value of the data. Let's just assume you have one text box.</p> <pre><code>$("#myform").submit(function(event) { event.preventDefault(); var val = $(this).find('input[type="text"]').val(); }); </code></pre> <p>And then fire off a request. Let's just assume it's a POST request.</p> <pre><code>$("#myform").submit(function(event) { event.preventDefault(); var val = $(this).find('input[type="text"]').val(); // I like to use defers :) deferred = $.post("http://somewhere.com", { val: val }); deferred.success(function () { // Do your stuff. }); deferred.error(function () { // Handle any errors here. }); }); </code></pre> <p>And this should about do it.</p> <p><strong>Note 2:</strong> For parsing the form's data, it's preferable that you use a <a href="http://css-tricks.com/snippets/jquery/serialize-form-to-json/">plugin</a>. It will make your life really easy, as well as provide a nice semantic that mimics an actual form submit action.</p> <p><strong>Note 2:</strong> You don't have to use defers. It's just a personal preference. You can equally do the following, and it should work, too.</p> <pre><code>$.post("http://somewhere.com", { val: val }, function () { // Start partying here. }, function () { // Handle the bad news here. }); </code></pre>
 

Querying!

 
Guidance

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