CODEWITHSUNDEEP
jqueryinputaddition
ToddN
ToddN

Reputation: 2961

Input Number to Add more Inputs JQuery

I want to have a form input that one would enter a number and click the button next to it so it would "Add" the former number of Inputs with each its own name.

  1. Enter Number
  2. Click Go Button or whatever
  3. Outputs on same page that number of inputs (creates new inputs)

I have tried this which only gives an ADD one at a time feature:

$(function() {
    var i = $('input').size() + 1; // check how many input exists on the document and add 1 for the add command to work

    $('a#add').click(function() { // when you click the add link
        $('<p><input type="text" value="' + i + '" /></p>').appendTo('body'); // append (add) a new input to the document.
// if you have the input inside a form, change body to form in the appendTo
        i++; //after the click i will be i = 3 if you click again i will be i = 4
    });

    $('a#remove').click(function() { // similar to the previous, when you click remove link
    if(i > 1) { // if you have at least 1 input on the form
        $('input:last').remove(); //remove the last input
        i--; //deduct 1 from i so if i = 3, after i--, i will be i = 2
    }
    });

    $('a.reset').click(function() {
    while(i > 2) { // while you have more than 1 input on the page
        $('input:last').remove(); // remove inputs
        i--;
    }
    });

}); 

<a href="#" id="add">Add</a>  
<a href="#" id="remove">Remove</a>  
<input type="text" value="1" />

Upvotes: 0

Views: 2221

Answers (3)

Mark Coleman
Mark Coleman

Reputation: 40863

Sort of late to the party, however a good option would be to use jQuery templates $.tmpl (assuming you are not opposed to using a plugin)

var markup = '<input type="text" id="Input${this.data}" value="" class="auto"/>';
$.template("inputTemplate", markup);

$("input.add").click(function() {
    var times = parseInt($("input.times").val(), 10);
    var total = $("input.auto").length;
    for (var x = 0; x < times; x++) {
        $.tmpl("inputTemplate", (x+ total) ).appendTo("body");
    }
});
$("input.remove").click(function() {
    $("input.auto:last").remove();
});
$("input.reset").click(function() {
    $("input.auto").remove();
});

Code example on jsfiddle.

Upvotes: 0

gen_Eric
gen_Eric

Reputation: 227210

You could do something like this (adapt this code to your needs):

var newInputs = parseInt($('#newInputs').val(), 10);
for(var i = 0; i < newInputs; i++){
  var $input = $('<input/>').attr({
    name: 'input_'+i,
    value: i
  }).appendTo('#form');
}

Basically, when you click the 'Go' button, you want to take the inputted value, and loop that many times. Each iteration, create a new input element and append it to the original form.

Upvotes: 1

scunliffe
scunliffe

Reputation: 63580

Something like this?

<script>
  $(document).ready(function(){
    $('#addButton').click(function(){
      var count = parseInt($('#quantity').val());
      var newHTML = [];
      for(var i=0;i<count;i++){
        newHTML.push('<input type="text"/><br/>');//or whatever content you want
      }
      $('#sandbox').html(newHTML.join(''));
    });
  });
</script>



<input type="text" id="quantity" value=""/>
<input type="button" id="addButton" value="Add"/>
<div id="sandbox"></div>

Upvotes: 2

Related Questions