CODEWITHSUNDEEP
javascriptjqueryhtml
Loek
Loek

Reputation: 4135

How to add and remove HTML elements depending on number in input field

I have a number input field in which a user can enter a number. Depending on this number, some new input fields are generated.

Currently I have no problems adding fields, as long as the new number put in by the user is higher than the previous. I can't remove the generated fields if the user puts in a lower number though.

So i.e. a user types in '5', which generates 5 new fields. If the user adjusts this number to '3', there are still 5 generated fields.

Input HTML

<input type="number" class="form-control" name="amount_of_vote_groups" id="amount_of_vote_groups">

Javascript (jQuery)

var i = 1;
$('#amount_of_vote_groups').change(function () {
    while (i <= this.value) {
        $('#right-column').prepend(
                '<div class="form-group" id="generated-field-'+i+'">' +
                    // Some other stuff here
                '</div>'
        );
        i++;
    }
    if (this.value > i) {
        $('#right-column').remove('#generated-field-' + i);
    }
});

I know I'm doing something stupid with the remove statement, but I just can't it get figured out. I'm a real sucker at javascript ;)

Upvotes: 4

Views: 1363

Answers (4)

SaidbakR
SaidbakR

Reputation: 13534

There is a solution depends on the difference of count between the i generated and the count of available elements, the class selector, this solution is assured from deleting the first element:

 var i = 1;
$('#amount_of_vote_groups').change(function () {
    while (i <= this.value) {
        $('#right-column').prepend(
                '<div class="form-group" id="generated-field-'+i+'">' +
                    '<input type="text" value="'+i+'" />'+
                '</div>'
        );
        i++
    }
  //alert($(this).val())
    if ((i-1) > $(this).val()) {

       // alert($('.form-group').size()+"***"+i)
      beDel = i - $('.form-group').size();
      for (j =0; j < beDel; j++){
        $('.form-group:first').remove();
      }
      --i;
    }

});

This is a DEMO

Upvotes: 1

Karin
Karin

Reputation: 8600

In case someone stumbles along this question that wants to keep the generated forms already on the screen and only remove those that are greater than the requested number, here is an approach that uses jQuery's filter to get the excess form groups, then removes them. It also moves index information to a data- attribute on the div to demonstrate how you might be able to expand on this to filter on other attributes without putting information into a div id.

var currForms = 0;
$('#amount_of_vote_groups').change(function() {
  var numForms = this.value;
  if (currForms > numForms) {
    $('#right-column .form-group').filter(function(index, ele) {
        return $(ele).data('index') >= numForms;
    }).remove();
    currForms = numForms;
  } else {
    while (currForms < numForms) {
      $('#right-column').append(
        '<div class="form-group" data-index="' + currForms + '">' +
        'Field ' + currForms + ':<input type="text">' +
        '</div>'
      );
      currForms++;
    }
  }
});

Here's a fiddle. You can enter text in the generated inputs, and notice they remain for forms that are still on the page after entering in a lower number.

Upvotes: 2

j08691
j08691

Reputation: 207901

I'd do it like this:

$('#amount_of_vote_groups').change(function() {
  $('#right-column div.form-group').remove();
  for (var i = 1; i <= this.value; i++) {
    $('#right-column').prepend(
      '<div class="form-group" id="generated-field-' + i + '">div</div>'
    );
  }
});

jsFiddle example

Whenever you change the number input, clear out any divs that may exist, then spin through a loop to add the new ones.

Upvotes: 7

vijayst
vijayst

Reputation: 21836

The if loop should also be a while loop like this:

while (this.value > i) {
  $('#right-column').remove('#generated-field-' + i);
  i--;
}

Upvotes: 4

Related Questions