Disable submit button with jQuery until all fields have values (input, radio, select, checkbox)

Question

I have a form with a several different field types, all of which need to be complete before submission. I have the submit button disabled and would like to remove the disabled attribute once all the fields have values.

I have examples from previous questions of this functionality working with radios and checkboxes and I've read a few answers which show how to achieve this using <input> fields only:

But is there any way we can get check that all field types have values using jQuery? Including <select> and <textarea> fields?

Here's a Codepen of a basic version of my form and here's my HTML:

<div class="contact-form">
    <div class="contact-form__row">
        <p>Text field</p>
        <input type="text" />
    </div>
    <div class="contact-form__row">
        <p>Radio fields</p>
        <label for="radio-1">Radio 1</label>
        <input id="radio-1" type="radio" name="radio-option" />
        <label for="radio-2">Radio 2</label>
        <input id="radio-2" type="radio" name="radio-option" />
    </div>
    <div class="contact-form__row">
        <p>Checkbox fields</p>
        <label for="checkbox-1">Checkbox 1</label>
        <input id="checkbox-1" type="checkbox" />
        <label for="checkbox-2">Checkbox 2</label>
        <input id="checkbox-2" type="checkbox" />
    </div>
    <div class="contact-form__row">
        <p>Select options</p>
        <select id="my-select" name="my-select">
            <option value="a">Option A</option>
            <option value="b">Option B</option>
        </select>
    </div>
    <div class="contact-form__row">
        <p>Text area</p>
        <textarea></textarea>
    </div>
    <div class="contact-form__row">
        <input type="submit" value="Submit" disabled />
    </div>
</div>

Is this possible?

Have you had a look at the JQuery Validation Plugin? No need to reinvent the wheel this plugin should cover all of your requirements — Master Yoda
– Master Yoda, Commented Mar 21, 2018 at 11:57
Here's a start - you'll have to get inventive for the checkboxes and select boxes. It would be a lot easier to just use the jQuery Validation Plugin as mentioned. jsfiddle.net/maxshuty/9vuvt1sj/4 — maxshuty
– maxshuty, Commented Mar 21, 2018 at 12:13
it's easy if you have form tag e.g. <form class="contact-form"> instead of <div class="contact-form"> — Taufik Nur Rahmanda
– Taufik Nur Rahmanda, Commented Mar 21, 2018 at 12:54
@TaufikNurRahmanda It's not an issue for this idea, there will be a <form> wrapper eventually. — abbas_arezoo
– abbas_arezoo, Commented Mar 21, 2018 at 13:37
I mean we can just put jQuery change event listener to the <form> element, but in this case we put event listener on all of the input whether it's a textarea, select, etc. but you maybe right this is not really matter because jQuery have :input selector. — Taufik Nur Rahmanda
– Taufik Nur Rahmanda, Commented Mar 21, 2018 at 14:56

Scaramouche · Accepted Answer · 2018-03-21 13:15:47Z

A few remarks:

In the next snippet, I assume ALL inputs (except radio buttons) have to be filled in before making the form submittable, which does not necessarily represent all real life scenarios.
As mentioned, radios (in this example only 2) are given a special treatment since only one per group can be selected.
Concerning <select>s, one will be considered invalid if an empty option if selected (if one exists). In this example, your select tag always has a non-empty value, I added another to the markup to show its behavior.

Let me know if it works

$(document).ready(function() {

 $(":input").on('input', function(){validate();});
 $(":input").on('change', function(){validate();});
});

function validate() {
  var $submitButton = $("input[type=submit]");
  
  var isValid = true;
  
  if($(':checkbox:checked').length != $(':checkbox').length)
    isValid = false;
  else if($(':radio:checked').length == 0)
    isValid = false;
  else{
    $('input:text, textarea').each(function() {  
      if($(this).val() == ''){
        isValid = false;
        return false;
      }
    });
    if(isValid){
      $('select').each(function() {  
      if($(this).val() == ''){
        isValid = false;
        return false;
      }
    });
    }
  }
  
   $submitButton.prop("disabled", !isValid);
}

.contact-form {
	width: 400px;
	margin: 50px;
}

.contact-form__row {
	padding: 0 0 10px;
	margin: 0 0 10px;
	border-bottom: 1px solid grey;
}

p {
	font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contact-form">
	<div class="contact-form__row">
		<p>Text field</p>
		<input type="text" />
	</div>
	<div class="contact-form__row">
		<p>Radio fields</p>
		<label for="radio-1">Radio 1</label>
		<input id="radio-1" type="radio" name="radio-option" />
		<label for="radio-2">Radio 2</label>
		<input id="radio-2" type="radio" name="radio-option" />
	</div>
	<div class="contact-form__row">
		<p>Checkbox fields</p>
		<label for="checkbox-1">Checkbox 1</label>
		<input id="checkbox-1" type="checkbox" />
		<label for="checkbox-2">Checkbox 2</label>
		<input id="checkbox-2" type="checkbox" />
	</div>
	<div class="contact-form__row">
		<p>Select options</p>
		<select id="my-select" name="my-select">
			<option value="a">Option A</option>
			<option value="b">Option B</option>
		</select>
    <select id="my-select" name="my-select">
			<option></option>
      <option value="a">Option A</option>
			<option value="b">Option B</option>
		</select>
	</div>
	<div class="contact-form__row">
		<p>Text area</p>
		<textarea></textarea>
	</div>
	<div class="contact-form__row">
		<input type="submit" value="Submit" disabled />
	</div>
</div>

Taufik Nur Rahmanda · Accepted Answer · 2018-03-21 12:59:25Z

0

you can do like this with jQuery: (in codepen replace all your javascript with this code, I have tested it in your codepen)

<script>
$(function() {
    $('.contact-form').on('input',':input',function() {
        var inputs = $('.contact-form :input');
        var num_inputs = inputs.length;
        var num_filled = inputs.filter(function() { return !!this.value }).length;
        $('.contact-form :submit').prop('disabled',(num_filled<num_inputs));
    });
});
</script>

good luck!

answered Mar 21, 2018 at 12:59

Taufik Nur Rahmanda

1,9992 gold badges23 silver badges37 bronze badges

2 Comments

abbas_arezoo Over a year ago

This almost works. When you complete all of the fields the submit button becomes enabled as requested. However, if you go back and uncheck each of the checkboxes, the submit button remains enabled.

Taufik Nur Rahmanda Over a year ago

I see, please change return !!this.value in my code above to return $(this).is(':checkbox')?$(this).is(':checked'):!!this.value and see if it works like you want

Collectives™ on Stack Overflow

Disable submit button with jQuery until all fields have values (input, radio, select, checkbox)

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related