Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery: Prevent Form Submission on Button / Click Event
    text
    copied!<p>I'm using the following script in order to ensure that a <code>&lt;select&gt;</code> field has a value applied to it (other than the default) when the form is submitted.</p> <pre><code>// form-submit $('#form-register form .button').click(function(e) { e.preventDefault(); // don't submit it var submitOK = true; $('#form-register').find("select").each(function() { if ($(this).val() == "Select Brand") { alert ('Please select an appliance and a brand'); submitOK = false; return false; // breaks out of the each } }); if (submitOK) { $('#form-register form').submit(); } }); </code></pre> <p>I had to bind the function to the <code>click()</code> event on the button because having it on the form's <code>submit()</code> event resulted in a 'too much recursion' error in my browser.</p> <p>However now the problem I'm having is that the script can't seem to prevent the form from submitting, even if the validation error is alerted to the user.</p> <p>Does anyone know how I can modify it to prevent the submission of the form in the event of a validation error?</p> <p><strong>I'm starting to think the fact I'm using Gravity Forms for WordPress it might be making things difficult. If it helps, here is the markup for the submit button (which includes some jQuery):</strong></p> <pre><code>&lt;input type="button" onclick="jQuery(&amp;quot;#gform_target_page_number_1&amp;quot;).val(&amp;quot;2&amp;quot;); jQuery(&amp;quot;#gform_1&amp;quot;).trigger(&amp;quot;submit&amp;quot;,[true]); " tabindex="13" value="Register My Appliances" class="button gform_next_button" id="gform_next_button_1_14"&gt; </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