How to check mulitple input fields have values in it using jquery?

Question

I have 5 input fields 3 are select and 2 are input type and 1 submit button. i want to enable the submit button when all the fields have value in it. If any of the value is missing button should go disable again like & condition

following is my code

<select class='form-control class-manufacturer' name="" id='id_manufacturer>
        <option value="" selected disabled>Manufacturer *</option>
        <option value="">Apple</option>
        <option value="">Samsung</option>
</select>
<select class='form-control class-modelName' name="" id='id_modelName">
        <option value="" selected disabled>Model *</option>
        <option value="" >Iphone</option>
        <option value="" >Note</option>
</select>
<select class='form-control class-partName' name="" id='id_partName' >
        <option value="" selected disabled>Part *</option>
        <option value="" >IC</option>
        <option value="">LED</option>
</select>
<input type="text" name='' id="id_quantity" class="form-control class-quantity" pattern="^[0-9]{1,}$" maxlength="11" placeholder="Quantity *"/>
<input type="text" name='' id="id_costPerUnit" class="form-control class-costPerUnit" pattern="^[0-9]{1,}$" maxlength="11" placeholder="Price *"/>

<button type="button" class="btn btn-default add-row a"  onclick="add()" disabled='disabled' style="padding:10px 65px;">Add</button>

I want to enable and disable the addrow button if all the fields have values using jquery

what i have tried

<!--add button disable enable function-->
$(function(){
 var i;
$('.class-manufacturer').change(function(){
$('.class-modelName').change(function() {
$('.class-partName').change(function(){

$('.class-quantity').keypress(function() {
$('.class-costPerUnit').keypress(function(){

$('.add-row').prop('disabled', false);
}); }); }); }); });
 });

and what is it that you've tried with which you want help for — Amit Joki
– Amit Joki, Commented Apr 6, 2017 at 7:17
Use jquery validation plugin or validate simply in if else and then enable / submit your form. — Nitin Dhomse
– Nitin Dhomse, Commented Apr 6, 2017 at 7:18
$(function(){ var i; $('.class-manufacturer').change(function(){ $('.class-modelName').change(function() { $('.class-partName').change(function(){ $('.class-quantity').keypress(function() { $('.class-costPerUnit').keypress(function(){ $('.add-row').prop('disabled', false); }); }); }); }); }); }); — rahul.m
– rahul.m, Commented Apr 6, 2017 at 7:19

vinox · Accepted Answer · 2017-04-06 07:29:36Z

$(document).ready(function(){
var $classmanufacturer = $('.classmanufacturer');
var $classmodelName = $('.classmodelName');
var $classpartName = $('.classpartName');
var $classquantity = $('.classquantity');
var $classcostPerUnit = $('.classcostPerUnit');
var $addbtn = $('.addbtn')
  $('select, input').on('change keypress', function(){
    if(($classmanufacturer.val() != '') && ($classmodelName != '') && ($classpartName.val() != '') && ($classquantity.val() != '') && ($classcostPerUnit.val() != '')){
        $addbtn.removeAttr('disabled');
    } else {
      $addbtn.attr('disabled', 'disabled');
    }
  })
})

function add() {
  alert("enabled");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='form-control classmanufacturer' name="" id='id_manufacturer'>
        <option value="">Manufacturer *</option>
        <option value="Apple">Apple</option>
        <option value="Samsung">Samsung</option>
</select>
<select class='form-control classmodelName' name="" id="id_modelName">
        <option value="">Model *</option>
        <option value="Iphone" >Iphone</option>
        <option value="Note" >Note</option>
</select>
<select class='form-control classpartName' name="" id='id_partName' >
        <option value="">Part *</option>
        <option value="IC" >IC</option>
        <option value="LED">LED</option>
</select>
<input type="text" name='' id="id_quantity" class="form-control classquantity" pattern="^[0-9]{1,}$" maxlength="11" placeholder="Quantity *"/>
<input type="text" name='' id="id_costPerUnit" class="form-control classcostPerUnit" pattern="^[0-9]{1,}$" maxlength="11" placeholder="Price *"/>

<button type="button" class="btn btn-default add-row a addbtn"  onclick="add()" disabled='disabled' style="padding:10px 65px;">Add</button>

it working but when i remove any value from it should disable again . i want solution like & state

user6803018 · Accepted Answer · 2017-04-18 10:29:24Z

0

   $(document).on('keyup change', 'form', function(){
  // Loop through all elements of form
  $.each($('form').find(':input'), function(){
    if($(this).val() == ""){
      // If any value is empty, disable button and break the loop
      $('button').attr('disabled', 'disabled');
      return false;
    }
  })
  // Else if all are filled
  $('button').removeAttr('disabled');
});

answered Apr 18, 2017 at 10:29

user6803018

Comments

MUT · Accepted Answer · 2017-04-06 07:29:32Z

Add this HTML

<input type="submit" id="addRow" value="addRow" disabled="disabled" />

Use this js code

$(function() {
    $('form > input').keyup(function() {

        var checkEmpty = false;
        $('form > input').each(function() {
            if ($(this).val() == '') {
                checkEmpty = true;
            }
        });

        if (checkEmpty ) {
            $('#addRow').attr('disabled', 'disabled'); 
        } else {
            $('#addRow').removeAttr('disabled'); 
        }
    });

Ikhlak S. · Accepted Answer · 2017-04-06 07:46:49Z

0

Take a look at this code:

$(document).on('keyup change', 'form', function(){
  // Loop through all elements of form
  $.each($('form').find(':input'), function(){
    if($(this).val() == ""){
      // If any value is empty, disable button and break the loop
      $('button').attr('disabled', 'disabled');
      return false;
    }
  })
  // Else if all are filled
  $('button').removeAttr('disabled');
});

answered Apr 6, 2017 at 7:46

Ikhlak S.

9,10411 gold badges60 silver badges80 bronze badges

Comments

AlbertVanHalen · Accepted Answer · 2017-04-06 07:49:10Z

Be aware that each option in your selectboxes have no value.

You can easily bind the input event on each element having the class form-control to determine the disabled state.

Use this code:

function checkForm() {
    var disable = false;
    $(".form-control").each(function() {
        var value = $(this).val();
        if (!value) {
            disable = true;
            return false;
        }
    });

    $("button.add-row").prop("disabled", disable);
}

$(function() {
    $(".form-control").on("input", checkForm);
});

guest271314 · Accepted Answer · 2017-04-06 08:13:06Z

Provide a value at value attribute of <option> elements html a that is not an empty string.

You can set <select>, <input> elements as child nodes of <form> element, include required attribute at elements, use input event attached to form, call .checkValidity() at if condition, if true call .removeAttribute() on .btn element with "disabled" as parameter, else call .setAttribute() with "disabled" as both first and second paramter

document.querySelector("form[name=form]")
.oninput = function() {
    if (this.checkValidity()) {
      this.querySelector(".btn")
      .removeAttribute("disabled")
    } else {
      this.querySelector(".btn")
      .setAttribute("disabled", "disabled")
    }
}

<form name="form">
  <select class='form-control class-manufacturer' name="" id='id_manufacturer' required>
        <option value="" selected disabled>Manufacturer *</option>
        <option value="Apple">Apple</option>
        <option value="Samsung">Samsung</option>
</select>

  <select class='form-control class-modelName' name="" id="id_modelName" required>
        <option value="" selected disabled>Model *</option>
        <option value="Iphone">Iphone</option>
        <option value="Note">Note</option>
</select>

  <select class='form-control class-partName' name="" id='id_partName' required>
        <option value="" selected disabled>Part *</option>
        <option value="IC" >IC</option>
        <option value="LED">LED</option>
</select>
  <input type="text" name='quantity' id="id_quantity" class="form-control class-quantity" pattern="[0-9]{1,}" maxlength="11" placeholder="Quantity *" required/>
  <input type="text" name='cost' id="id_costPerUnit" class="form-control class-costPerUnit" pattern="[0-9]{1,}" maxlength="11" placeholder="Price *" required/>
  <button type="button" class="btn btn-default add-row a" onclick="alert('valid')" style="padding:10px 65px;" disabled>Add</button>
</form>

guest271314 · Accepted Answer · 2017-04-06 08:32:58Z

You can use required attribute at <select>, <input> elements, :invalid, :valid css pseudo class selectors, set pointer-events property of <button> element to none if form is invalid or all if valid

form:invalid button.btn {
  pointer-events: none;
}

form:valid button.btn {
  pointer-events: all;
}

<form name="form">
  <select class='form-control class-manufacturer' name="" id='id_manufacturer' required>
        <option value="" selected disabled>Manufacturer *</option>
        <option value="Apple">Apple</option>
        <option value="Samsung">Samsung</option>
</select>

  <select class='form-control class-modelName' name="" id="id_modelName" required>
        <option value="" selected disabled>Model *</option>
        <option value="Iphone">Iphone</option>
        <option value="Note">Note</option>
</select>

  <select class='form-control class-partName' name="" id='id_partName' required>
        <option value="" selected disabled>Part *</option>
        <option value="IC" >IC</option>
        <option value="LED">LED</option>
</select>
  <input type="text" name='quantity' id="id_quantity" class="form-control class-quantity" pattern="[0-9]{1,}" maxlength="11" placeholder="Quantity *" required/>
  <input type="text" name='cost' id="id_costPerUnit" class="form-control class-costPerUnit" pattern="[0-9]{1,}" maxlength="11" placeholder="Price *" required/>
  <button type="button" class="btn btn-default add-row a" onclick="alert('valid')" style="padding:10px 65px;" >Add</button>
</form>

@stone Yes, save for onclick attribute event at html, which calls alert() instead of add() at stacksnippets. If form is :invalid pointer-events of button element is set to none at css, else pointer-events is set to all at button element, which permits click on <button> element to dispatch onclick event at element. See :invalid, pointer-events
@stone Adjust selector at css to target appropriate <form> element, for example, form[name="form"]:invalid{pointer-events:none}form[name="form"]:valid{pointer-events:all}, or use :nth-of-type() pseudo class selector to target specific form element, if form elements do not have unique .id or .className to select element by. Do both form elements have same .className?

Collectives™ on Stack Overflow

How to check mulitple input fields have values in it using jquery?

7 Answers 7

3 Comments

Comments

Comments

Comments

Comments

Comments

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

Comments

Comments

Comments

Comments

Comments

5 Comments

Related