CODEWITHSUNDEEP
javascriptjqueryhtmldom
sach jot
sach jot

Reputation: 570

How to restrict creating dynamically input element above 3?

I have an input element in my form. It create dynamic input fields when I click on plus sign. How can I restrict it so it only generate maximum of 3 input fields and then hide the plus sign from the screen?

$(function() {
  $(document).on('click', '.btn-add', function(e) {
    e.preventDefault();

    var controlForm = $('.controls form:first'),
      currentEntry = $(this).parents('.entry:first'),
      newEntry = $(currentEntry.clone()).appendTo(controlForm);

    newEntry.find('input').val('');
    controlForm.find('.entry:not(:last) .btn-add')
      .removeClass('btn-add').addClass('btn-remove')
      .removeClass('btn-success').addClass('btn-danger')
      .html('<span class="glyphicon glyphicon-minus"></span>');
  }).on('click', '.btn-remove', function(e) {
    $(this).parents('.entry:first').remove();

    e.preventDefault();
    return false;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
My HTML ELEMENT:

<div class="controls">
  <form role="form" autocomplete="off">
    <div class="entry input-group col-xs-3">
      <input class="form-control" name="fields[]" type="text" placeholder="Type something" />
      <span class="input-group-btn">
                <button class="btn btn-success btn-add" type="button">
                    <span class="glyphicon glyphicon-plus"></span>
      </button>
      </span>
    </div>
  </form>
</div>

Upvotes: 1

Views: 52

Answers (2)

Racil Hilan
Racil Hilan

Reputation: 25351

Check the number of entries in your form and if they are more than 2, remove the add button:

$(function() {
  $(document).on('click', '.btn-add', function(e) {
    e.preventDefault();

    var controlForm = $('.controls form:first'),
      currentEntry = $(this).parents('.entry:first'),
      newEntry = $(currentEntry.clone()).appendTo(controlForm);

    if (count = $('.controls form > *').length > 2) {
      newEntry.find('.btn-add').remove();
    }

    newEntry.find('input').val('');
    controlForm.find('.entry:not(:last) .btn-add')
      .removeClass('btn-add').addClass('btn-remove')
      .removeClass('btn-success').addClass('btn-danger')
      .html('<span class="glyphicon glyphicon-minus"></span>');
  }).on('click', '.btn-remove', function(e) {
    $(this).parents('.entry:first').remove();

    e.preventDefault();
    return false;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="controls">
  <form role="form" autocomplete="off">
    <div class="entry input-group col-xs-3">
      <input class="form-control" name="fields[]" type="text" placeholder="Type something" />
      <span class="input-group-btn">
            <button class="btn btn-success btn-add" type="button">
                <span class="glyphicon glyphicon-plus"></span>
      </button>
      </span>
    </div>
  </form>
</div>

Upvotes: 1

Anjo
Anjo

Reputation: 171

You can check the count of input elements inside your form

 $(document).on('click', '.btn-add', function(e)
 {
    e.preventDefault();

    //this will check here if the number of input is less than 3
    if($(".controls form input[type=text]").length < 3){

    var controlForm = $('.controls form:first'),
        currentEntry = $(this).parents('.entry:first'),
        newEntry = $(currentEntry.clone()).appendTo(controlForm);

    newEntry.find('input').val('');
    controlForm.find('.entry:not(:last) .btn-add')
        .removeClass('btn-add').addClass('btn-remove')
        .removeClass('btn-success').addClass('btn-danger')
        .html('<span class="glyphicon glyphicon-minus"></span>');
    } else {
         //Add your logic here for hiding the add button
    }
    });

Upvotes: 2

Related Questions