Databases
StackOverflow2013
Postsdbo
PODisable Form Submit until Fields have been validated using jQuery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODisable Form Submit until Fields have been validated using jQuery
    text
    copied!<p>I have modified this script <a href="http://jsfiddle.net/mblase75/xtPhk/1/" rel="nofollow">http://jsfiddle.net/mblase75/xtPhk/1/</a> to submit a form. The goal is to disable submit button until all form fields have been validated. This works fine the first time but since, my form does not have a action jquery handles the submit as well. </p> <p>So after I submit the form, the submit button does not get disabled. I have to refresh the page in order for it to get disabled. </p> <p>What I am trying to do is, after every post.. the submit button should get disabled, without refreshing the page. </p> <p>Is this possible ?</p> <p>It does work if my form has a action page. but I dont want that </p> <p>Form Submit: </p> <pre><code> $(document).ready(function() { $("#paForm").submit(sendForm) }); function sendForm() { $.post('pa_submit.cfm',$("#paForm").serialize(),function(data,status){ $("#result").html(data) });// end of submit $( '#paForm' ).each(function(){ this.reset(); // end of reset }); return false } </code></pre> <p>Disable Submit Button until all fields have been validated </p> <pre><code> $(document).ready(function() { $form = $('#paForm'); // cache $form.find(':input[type="submit"]').prop('disabled', true); // disable submit btn $form.find(':input').change(function() { // monitor all inputs for changes var disable = false; $form.find(':input').not('[type="submit"]').each(function(i, el) { // test all inputs for values if ($.trim(el.value) === '') { disable = true; // disable submit if any of them are still blank } }); $form.find(':input[type="submit"]').prop('disabled',disable); }); }); </code></pre> <p>I am using a jquery function to post my values to a database. My form does not have a action.</p> <p><a href="http://jsfiddle.net/bC6GF/" rel="nofollow">http://jsfiddle.net/bC6GF/</a> </p> <p>Here is the jsfiddle page, which shows my issue. </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