I am developing a form that can add specific number of fields when the button is clicked and it will be disabled when the number reached the limit of adding text fields.

the problem is when it reaches the limit the button can still be clicked and will disable when you click on the button twice when the text field reached its maximum input boxes allowed

here is my code.

$(document).ready(function() {
  var max_fields = 5; //maximum input boxes allowed
  var wrapper = $("#healthcard"); //Fields wrapper
  var add_button = $("#add_field"); //Add button ID

  var x = 0; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x >= max_fields) { //max input box allowed
      e.preventDefault();
      $(this).toggleClass("disabled");
    } else {
      x++; //text box increment
      $(wrapper).append('<div class="hmo-add' + x + '""><div class="col-sm-12 col-md-4"><div class="form-group"><label class="card">Healthcard</label><input class="form-control col-md-4" type="text" name="mytext[]"/></div></div><div class="col-sm-12 col-md-8"><div class="form-group"><label class="card">Healthcard No.</label><input class="form-control col-md-8" type="text" /><a href="#" class="remove_field">Remove</a></div></div></div>'); //add input box
    }
  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $('.hmo-add' + x).remove();
    x--;
    e.preventDefault();
    $('#add_field').toggleClass("disabled");
  })


});

<script src=".1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-12">
    <div id="healthcard" class="form-group">
      <button id="add_field" class="btn btn-primary" type="button" name="hmo">HMO</button>
    </div>
  </div>
</div>

I am developing a form that can add specific number of fields when the button is clicked and it will be disabled when the number reached the limit of adding text fields.

the problem is when it reaches the limit the button can still be clicked and will disable when you click on the button twice when the text field reached its maximum input boxes allowed

here is my code.

$(document).ready(function() {
  var max_fields = 5; //maximum input boxes allowed
  var wrapper = $("#healthcard"); //Fields wrapper
  var add_button = $("#add_field"); //Add button ID

  var x = 0; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x >= max_fields) { //max input box allowed
      e.preventDefault();
      $(this).toggleClass("disabled");
    } else {
      x++; //text box increment
      $(wrapper).append('<div class="hmo-add' + x + '""><div class="col-sm-12 col-md-4"><div class="form-group"><label class="card">Healthcard</label><input class="form-control col-md-4" type="text" name="mytext[]"/></div></div><div class="col-sm-12 col-md-8"><div class="form-group"><label class="card">Healthcard No.</label><input class="form-control col-md-8" type="text" /><a href="#" class="remove_field">Remove</a></div></div></div>'); //add input box
    }
  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $('.hmo-add' + x).remove();
    x--;
    e.preventDefault();
    $('#add_field').toggleClass("disabled");
  })


});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-12">
    <div id="healthcard" class="form-group">
      <button id="add_field" class="btn btn-primary" type="button" name="hmo">HMO</button>
    </div>
  </div>
</div>

I think I am missing something in my code that I can't figure out. Please help me.

sorry for bad english.

Thanks,

• javascript
• jquery

5 Answers 5

Your problem is that you need to click the button 6 times to disable it which is wrong , below is a working snippet using the disabled attribute:

• When the user reaches the max, I disable the button.

• The button click is register to work on the button that is not disabled using not(':disabled')

• When the user removes a div, the button is enabled again

$(document).ready(function() {
  var max_fields = 5; //maximum input boxes allowed
  var wrapper = $("#healthcard"); //Fields wrapper
  var add_button = $("#add_field"); //Add button ID

  var x = 0; //initlal text box count
  $("#add_field").not(':disabled').click(function(e) { //on add input button click
    e.preventDefault();
    
    
    
    x++; //text box increment
    
    if (x == max_fields) 
    {
         $(this).attr("disabled", true);
    }
      $(wrapper).append('<div class="hmo-add' + x + '""><div class="col-sm-12 col-md-4"><div class="form-group"><label class="card">Healthcard</label><input class="form-control col-md-4" type="text" name="mytext[]"/></div></div><div class="col-sm-12 col-md-8"><div class="form-group"><label class="card">Healthcard No.</label><input class="form-control col-md-8" type="text" /><a href="#" class="remove_field">Remove</a></div></div></div>'); //add input box
    
   
  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
   
    $('.hmo-add' + x).remove();
    x--;
    
    $('#add_field').attr("disabled", false);
  })


});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-12">
    <div id="healthcard" class="form-group">
      <button id="add_field" class="btn btn-primary" type="button" name="hmo">HMO</button>
    </div>
  </div>
</div>

Check x right after append:

$(add_button).click(function(e) { //on add input button click
  if (x < max_fields) { //max input box allowed
    x++; //text box increment
    $(wrapper).append('<div class="hmo-add' + x + '""><div class="col-sm-12 col-md-4"><div class="form-group"><label class="card">Healthcard</label><input class="form-control col-md-4" type="text" name="mytext[]"/></div></div><div class="col-sm-12 col-md-8"><div class="form-group"><label class="card">Healthcard No.</label><input class="form-control col-md-8" type="text" /><a href="#" class="remove_field">Remove</a></div></div></div>'); //add input box
    if (x == max_fields)
    {
      $(this).addClass("disabled");
    }
  }
});

DEMO

Instead of toggleClass use addClass while disabling and removeClass while enabling as below:

$(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x >= max_fields) { //max input box allowed
      e.preventDefault();
      $(this).addClass("disabled");//addClass
    } else {
      x++; //text box increment
      $(wrapper).append('<div class="hmo-add' + x + '""><div class="col-sm-12 col-md-4"><div class="form-group"><label class="card">Healthcard</label><input class="form-control col-md-4" type="text" name="mytext[]"/></div></div><div class="col-sm-12 col-md-8"><div class="form-group"><label class="card">Healthcard No.</label><input class="form-control col-md-8" type="text" /><a href="#" class="remove_field">Remove</a></div></div></div>'); //add input box
    }
});

$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $('.hmo-add' + x).remove();
    x--;
    e.preventDefault();
    $('#add_field').removeClass("disabled"); //removeClass
})

This is what you need:

$(document).ready(function() {
    var max_fields = 5; //maximum input boxes allowed
    var wrapper = $("#healthcard"); //Fields wrapper
    var add_button = $("#add_field"); //Add button ID

    var x = 0; //initlal text box count
    $(add_button).click(function(e) { //on add input button click
        e.preventDefault();
        if (x >= max_fields) { //max input box allowed
            $(this).addClass("disabled");
            $(this).attr("disabled", "disabled");
        } else {
            x++; //text box increment
            $(wrapper).append('<div class="hmo-add' + x + '""><div  class="col-sm-12 col-md-4"><div class="form-group"><label class="card">Healthcard</label><input class="form-control col-md-4" type="text" name="mytext[]"/></div></div><div class="col-sm-12 col-md-8"><div class="form-group"><label class="card">Healthcard No.</label><input class="form-control col-md-8" type="text" /><a href="#" class="remove_field">Remove</a></div></div></div>'); //add input box
        }
    });

    $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
        e.preventDefault();
        $('.hmo-add' + x).remove();
        x--;
        $('#add_field').removeClass("disabled");
        $('#add_field').removeAttr("disabled");
    })
});

I removed the toggleClass to addClass/removeClass as it makes more sense in this situation. I also disabled the button once the limit is reached using the disabled HTML attribute and the attr() function. If you hit the remove button, the disabled class and attribute is removed. I also removed a couple of duplicate e.PreventDefault() calls as they weren't needed.

$(document).ready(function() {
  var max_fields = 5; //maximum input boxes allowed
  var wrapper = $("#healthcard"); //Fields wrapper
  var add_button = $("#add_field"); //Add button ID

  var x = 0; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    //if (x >= max_fields) { //max input box allowed
      //e.preventDefault();
     // $(this).toggleClass("disabled");
    //} else {
    if(x < max_fields){
      x++; //text box increment
      $(wrapper).append('<div class="hmo-add' + x + '""><div class="col-sm-12 col-md-4"><div class="form-group"><label class="card">Healthcard</label><input class="form-control col-md-4" type="text" name="mytext[]"/></div></div><div class="col-sm-12 col-md-8"><div class="form-group"><label class="card">Healthcard No.</label><input class="form-control col-md-8" type="text" /><a href="#" class="remove_field">Remove</a></div></div></div>'); //add input box
      if(x === max_fields) {
      	$(this).toggleClass("disabled");
      }
      
    }
  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $('.hmo-add' + x).remove();
    x--;
    e.preventDefault();
    $('#add_field').toggleClass("disabled");
  })


});

[http://jsfiddle/W4Km8/8153/][1] I just updated your code in jsfiddle please check