Question 10953 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to keep submit button disabled when filling out multiple fields in form – Jquery

I have a form with multiple fields and the submit button is supposed to stay disabled until all of the :required fields are filled in. My problem is that the button becomes active when I start typing in the first field.

I’ve tried different things, from different questions on here, and I cannot get it to work.

Fiddle is below, and here is the code:

<form>
<div class="row">
  <label for="realname">Name<span class="required">*</span></label>
  <input type="text" name="realname" id="realname" required/>
  </div>

  <div class="row">
    <label for="company">Company</label>
    <input type="text" name="company" id="company"/>
  </div>

  <div class="row">
    <label for="email">Email<span class="required">*</span></label>
    <input type="email" name="email" id="email" required/>
  </div>

  <div class="row">
    <label for="phone">Phone<span class="required">*</span></label>
    <input type="tel" name="phone" id="phone" required/>
  </div>

  <div class="row">
    <input type="submit" value="SUBMIT">
  </div>
  </form>

$(document).ready(function(){

    var allInput = $('input:required');

    var submit = $('input[type="submit"]');

    submit.prop('disabled', true);
    $('form').bind('submit',function(e){e.preventDefault();});

    $(allInput).on('input change', function() {
        $.each(allInput,function(){
            if($(this).val() == ""){
                console.log('nope');
            } else {
                submit.prop('disabled', false);
                $('form').unbind('submit');
            }
        });
    });
});

https://jsfiddle.net/cdpritch/vqcemxh6/

Thanks!

Tags:

3

Answers


  1. 0

    Your if block is not right. The if block is saying if one of those required fields is not blank, then enable the button. You want to check that all of them are not blank.

    $(allInput).on('change', function() {
    counterGood=0;
    $.each(allInput,function(){
        if($(this).val() == ""){
            console.log('nope');
        } else {
            counterGood++;
        }
    });

    //check count
    if(counterGood == allInput.length){
        submit.prop('disabled', false);
        $('.fancy-form').unbind('submit');
    }else{
        submit.prop('disabled', true);
    }
});
    Login or Signup to reply.
  2. 0

    When one value is not an empty string you are enabling the button, I would do it the opposite way, enable the submit button and if one item is empty disable the button:

    $(document).ready(function(){

    var allInput = $('input:required');

    var submit = $('input[type="submit"]');

    submit.prop('disabled', true);
    $('.fancy-form').bind('submit',function(e){e.preventDefault();});

    $(allInput).on('input change', function() {
    submit.prop('disabled', false);
        $('.fancy-form').unbind('submit');
        $.each(allInput,function(){
            if($(this).val() == ""){
                submit.prop('disabled', true);
                $('.fancy-form').bind('submit',function(e){e.preventDefault();});
            }
        });
    });
});
    Login or Signup to reply.
  3. 0

    The code has been changed to get closer to optimal use of Jquery style code and to cover different use cases such as deleting already entered values.

    $(function() {
  const selector = 'input[required]';
  const allInput = $(selector);
  const submit = $('input[type="submit"]');

  $(document).on('change', selector, function() {
    const counterGood = allInput.filter(function() {
      return this.value !== '';
    }).length;
    
    submit.prop('disabled', counterGood !== allInput.length);
  });
  
  $('form').on('submit', function(e) {
    if (submit.prop('disabled')) {
      console.log('nope');
      e.preventDefault();
      return;
    }
    
    console.log('submit is Ok');
  });

  allInput.eq(0).trigger('change');
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search