Submitting AJAX form when a field is changed
<p>I have a GET form that when submitted uses an <strong>AJAX</strong> request to update a php page.</p>

<p>I want this form to automatically submit any time a field is changed, the form contains mostly text inputs and a few dropdowns.</p>

<p>What I have tried:</p>

<p><code>onchange="this.form.submit()"</code> - This works, but instead of AJAXing the data to the php page, it actually redirects me to the page, which is a no go.</p>

<p><code>&lt;input type="submit"&gt;</code> - I would like this to be a last resort, because I want the form to send automatically, <strong>but it does work otherwise</strong>.</p>

<p>I know that sending a form every input change isn't usually a good idea, so ideally I would like it to send the form 1-2 seconds after inactivity (After inputting something obviously) - if that isn't possible, then every time a field is changed would be acceptable as its a low traffic server.</p>

<p>So my question is, what is the proper way to send a form via ajax automatically?</p>

<p>My current :</p>

<pre><code>                     &lt;form method="GET" id="submitRequest" action="showTable.php"&gt;
                        &lt;th&gt;&lt;input type="text" id="SSeries" name="SSeries" class="form-control"&gt;&lt;/th&gt;
                        &lt;th&gt;&lt;input type="text" id="SModel" name="SModel" class="form-control"&gt;&lt;/th&gt;
                        &lt;th&gt;&lt;input type="text" id="SSerial" name="SSerial" class="form-control"&gt;&lt;/th&gt;
                        &lt;th&gt;&lt;input type="text" id="SColor" name="SColor" class="form-control"&gt;&lt;/th&gt;
                        &lt;th&gt;&lt;input type="text" id="SStorage" name="SStorage" class="form-control"&gt;&lt;/th&gt;
                        &lt;th&gt;&lt;input type="text" id="SCarrier" name="SCarrier" class="form-control"&gt;&lt;/th&gt;
                        &lt;th&gt;&lt;input type="text" id="SType" name="SType" class="form-control"&gt;&lt;/th&gt;
                        &lt;th&gt;&lt;input type="text" id="SUPC" name="SUPC" class="form-control"&gt;&lt;/th&gt;
                        &lt;th&gt;&lt;input type="text" id="SStatus" name="SStatus" class="form-control"&gt;&lt;/th&gt;
                        &lt;input type="submit" class="btn btn-success"&gt;
                    &lt;/form&gt;
</code></pre>

<p>My current AJAX:</p>

<pre><code>                       $(document).ready(function() {
                           $('#submitRequest').submit( function( event ) {
                               $.ajax({ // create an AJAX call...
                                   data: $('#submitRequest').serialize(), // serialize the form
                                   type: $('#submitRequest').attr('method'), // GET or POST from the form
                                   url: $('#submitRequest').attr('action'), // the file to call from the form
                                   success: function(response) { // on success..
                                        showTable();
                                   }
                               });
                               event.preventDefault();
                            });
                        });
</code></pre>