how to add multiple input field based on text box value?

Question

I have created a add input field function which is working fine. I would like add many input field on basis of input field number.I just start unfortunately couldn't find a proper result for that. here is my JQ code

$(document).ready(function() {
    var scntDiv = $('#add_words');
    var wordscount = 1;
    var i = $('.line').size() + 1;

    $('#add').click(function() {
        var v = $("#inputs").val();
        alert(v);
        wordscount++;
        $('<div class="line">Word is ' + wordscount + '<input type="text" value="' + wordscount + '" /><a class="remScnt" href="#">Remove</a></div>').appendTo(scntDiv);
        i++;
        return false;
    });

    //    Remove button
    $('#add_words').on('click', '.remScnt', function() {
        if (i > 1) {
            $(this).parent().remove();
            i--;
        }
        return false;
    });
});

and HTML code also

<select id="inputs" style="width:60px;">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>                      
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<a id="add" href="#">Add</a>
<div id="add_words"></div>

Actually I need to add input filed on the basis of how much is we select in the id="inputs.

Marco Johannesen · Accepted Answer · 2012-03-26 12:51:48Z

2

Like this:

$(document).ready(function() {
    var scntDiv = $('#add_words');
    var wordscount = 1;
    var i = $('.line').size() + 1;

    $('#add').click(function() {
        var inputFields = parseInt($('#inputs').val());
        for (var n = i; n < inputFields; ++ n){
            wordscount++;
            $('<div class="line">Word is ' + wordscount + '<input type="text" value="' + wordscount + '" /><a class="remScnt" href="#">Remove</a></div>').appendTo(scntDiv);
            i++;
        }  
        return false;
    });

    //    Remove button
    $('#add_words').on('click', '.remScnt', function() {
        if (i > 1) {
            $(this).parent().remove();
            i--;
        }
        return false;
    });
});

See it in action here: http://jsfiddle.net/zLG7c/6/

edited Mar 26, 2012 at 12:51

answered Mar 26, 2012 at 11:49

Marco Johannesen

13.1k6 gold badges34 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mo. Over a year ago

it is working. Could you tell me a solution to fix input number on basis of selected value from id="inputs. if yo know Thanks for your help

Marco Johannesen Over a year ago

It take the value from id="inputs" and loops until that number is reached. I might not be undestanding your problem correctly though :)

Elias Van Ootegem Over a year ago

just get the value for the var inputFields like this: parseInt($('#inputs').val());. If 2 is selected, inputFields will hold the value 2 as an int.

Mo. Over a year ago

@Marco Johannesen my question become like this "I need input fileds on the basis of how much I selected from id="inputs". When select 3 then three inputs only when select 5 shows five inputs only like that"

Marco Johannesen Over a year ago

Updated code with @EliasVanOotegem code .. Thanks, didn't know you could call it on the select element directly :)

|

Gopesh · Accepted Answer · 2012-03-26 12:26:00Z

Check this

HTML

<select id="inputs" style="width:60px;">
    <option>1</option>
    <option>2</option>
    <option>3</option>                      
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
</select>
<a id="add" href="#">Add</a>

<div id="add_words"></div>

Jquery

$(document).ready(function() {
    var scntDiv = $('#add_words');
    var wordscount = 1;
    var i = $('.line').size() + 1;
  var counter=1;
    $('#add').click(function() {
        var inputFields = parseInt($('#inputs').val());

        if(counter>inputFields){
            alert("Only "+inputFields+" textboxes allow");
            return false;
    }   



            $('<div class="line">Word is ' + counter+ '<input type="text" value="' + counter+ '" /><a class="remScnt" href="#">Remove</a></div>').appendTo(scntDiv);

      counter++;

    });

    //    Remove button
    $('#add_words').on('click', '.remScnt', function() {

        if (counter > 1) {
            $(this).parent().remove();
            counter--;
        }
        return false;
    });
});

Sample Fiddle

Collectives™ on Stack Overflow

how to add multiple input field based on text box value?

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related