CODEWITHSUNDEEP
javascripthtml
Fox
Fox

Reputation: 584

Add and remove inputs dynamicly with a other input

I searched a lot for this, but I can only find +1 -1 solutions. But I want to set the number of inputs with a other input like this:

//Enter the number of inputs (1 is the start-value)
<input type="text" size="3" maxlength="3" id="count" name="count" value="1">

//Display that number of inputs (1 at start)
<input type="text" size="30" maxlength="30" id="input_1" name="input_1">

When the user now writes 5 in the first field, the form should look like this:

//Enter the number of inputs (1 is the start-value)
<input type="text" size="3" maxlength="3" id="count" name="count" value="1">

//Display that number of inputs (1 at start)
<input type="text" size="30" maxlength="30" id="input_1" name="input_1">
<input type="text" size="30" maxlength="30" id="input_2" name="input_2">
<input type="text" size="30" maxlength="30" id="input_3" name="input_3">
<input type="text" size="30" maxlength="30" id="input_4" name="input_4">
<input type="text" size="30" maxlength="30" id="input_5" name="input_5">

How can I make this? MUST I use js?

Upvotes: 1

Views: 121

Answers (5)

Gurmeet
Gurmeet

Reputation: 3314

This worked for me

       function AddField() {
        var count = $("#countetfield").val();
        var i = 1;
        var id = $("#container .testClass:last").attr('name');
        var test = id.split("_");
        id_name = test[1];

        while (i <= count) {

            id_name++;
            var a = '<input type="text" class="testClass" size="30" maxlength="30" id="input_' + id_name + '" name="input_' + id_name + '"/>';
            $("#container").append(a);
            i++;
        }
    }

<input type="text" id="countetfield" value="1" />
        <input type="button" value="Go" onclick="AddField();" />
        <div id="container">
            <input type="text" class="testClass" size="30" maxlength="30" id="input_1" name="input_1" />
        </div>

Upvotes: 0

Thomas Leu
Thomas Leu

Reputation: 855

Here's a simple javascript snippet that doesn't make use of any frameworks:

function addInputs() {
    var count = parseInt(document.getElementById("count").value);
    for (var i = 2; i <= count; i++) {
        document.getElementById('moreinputs').innerHTML += '<input type="text" name="input_' + i + '" id="input_' + i + '" />';
    }
}

In this example you have to add a container (div) with id 'moreinputs'. However, when calling this function more than once, it will not work properly (e.g. it can only increase the number of input but not decrease)

Upvotes: 1

Vond Ritz
Vond Ritz

Reputation: 2012

Here's the FIDDLE. Hope it helps. :)

html

<input type="text" size="3" maxlength="3" id="count" name="count" value="1">
<div id="container"></div>

script

$('#count').on('keyup', function () {
    var $this = $(this);
    var count = $this.val();
    $('#container').empty();
    for (var x = 1; x <= count; x++) {
        var newInput = '<input type="text" size="30" maxlength="30" id="input_' + x + '" name="input_' + x + '">';
        $('#container').append(newInput);
    }
});

Upvotes: 0

iConnor
iConnor

Reputation: 20189

Yes you must use js to do it dynamically on the spot You have a jQuery tag so I will show an example in jQuery

This is not the best example but it works and it's a starting point

JS:

$(function(){
    $('#master').on('change', function() {
        var count = $(this).val();
        $('#otherInputs').html('')
        for( var i = 0; i < count; i++) {
           $('#otherInputs').append(
               $('<input>', {type: 'text'})
           );
        }
    });

});

HTML:

<input type="number" id="master" value="1">
<div id="otherInputs"></div>

Demo

In English this is saying...

When you change #master I will empty #master (html('')) loop through and append a new input depending on #master's value

Upvotes: 1

Thomas Leu
Thomas Leu

Reputation: 855

Yes, either you use javascript, or you send the form to the server, where a new html page with all the inputs is generated (e.g. with PHP).

Upvotes: 1

Related Questions