How do I enable and disable the submit button based on certain defined conditions

Question

I have a code where I submit by calling a function with the the following code

<input type=submit value=SUBMIT onclick=report_submit()>

I want the button to be disabled initially and only enabled if all my inputs are not null.

Once the form is submitted, I want the button to be disabled again so that duplicate insertions don't take place.

I have tried other examples from Stack Overflow, but either it is perpetually enabled or disabled.

You may wish to look for variable changes in order to determine when to enable/disable inputs... See here: http://stackoverflow.com/questions/1759987/listening-for-variable-changes-in-javascript-or-jquery. Also, this sort of thing is childs play in a framework such as AngularJS. — IronAces, Oct 25 '16 at 13:48
@DanielShillcock oh, yes, you are right.. document.getElementById('theInput').disabled = true; — Adrian C., Oct 25 '16 at 14:00

thekodester · Answer 1 · 2016-12-13T16:28:09.670

When user types or changes a select it well check the form to see if all inputs have a value if not then it disables the button again. Also if interested in Array.prototype.slice().

function enableSubmit() {
  
  // counts the elments of inputs with values
  var i = 0;
  Array.prototype.slice.call(document.forms["form"].elements).forEach(function(e) {
    if (e.value) {
      i++; 
    }
  });
  
  // if all the elements have a value enabled the submit button
  if (i === (document.forms["form"].elements.length - 1)) {
    document.getElementById('disabled').disabled = false; 
  } else {
    document.getElementById('disabled').disabled = true;
  }
};

// add a event listener to each tag require (were using input and select)
Array.prototype.slice.call(document.forms["form"].elements).forEach(function(e) {
  if (e.tagName === 'INPUT') {
    e.addEventListener("keyup", function(e) {
      enableSubmit();
    }, false);
  } else if (e.tagName === 'SELECT') {
    e.addEventListener("change", function(e) {
      enableSubmit();
    }, false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form" method="post">
  <input id="text" name="text" type="text" />
  <select id="options" name="options">
    <option value></option>
    <option value="1">Option 1</option>
  </select>
  <input type="submit" id="disabled" disabled="disabled" />
</form>

Better to add event listeners than use intrusive javascript. And this won't work if there are fields that are not required. — Jon P, Oct 26 '16 at 04:30
Added the JavaScript for an event listener. The question never asked about required fields, just asked to disable and enable the submit button once all inputs are not null. — thekodester, Oct 26 '16 at 11:15

zer00ne · Answer 2 · 2016-10-26T03:59:02.593

kodecount has reminded me that this essential feature is not 100% across browsers (namely Safari see this).

Why don't you use the required attribute on each input and call it day. As long as your required inputs do not have any values, you can click that submit button a thousand times and it will will never be allowed to do anything until every input with required has a value. No JS, no CSS, just HTML.

<form id='f1' onsubmit='nullCheck()'>
  <input name='i1' required>
  <br/>
  <input name='i2' required>
  <br/>
  <input name='i3' required>
  <br/>
  <input name='i4' required>
  <br/>
  <input type='submit'>
</form>
<form id='f2' onsubmit='nullCheck()'>
  <input name='i5' required>
  <br/>
  <input name='i6' required>
  <br/>
  <input type='submit'>
</form>

This won't work on all browsers, but [form validation](http://www.formvalidator.net/) is another approach the user could take. — thekodester, Oct 25 '16 at 16:11

How do I enable and disable the submit button based on certain defined conditions

2 Answers2