Disable Submit Button With JQuery Until All Fields Have Values (input, Radio, Select, Checkbox)
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 attr
Solution 1:
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>
Solution 2:
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!
Post a Comment for "Disable Submit Button With JQuery Until All Fields Have Values (input, Radio, Select, Checkbox)"