CODEWITHSUNDEEP
javascriptjqueryhtml
KeizerBridge
KeizerBridge

Reputation: 2757

How to add input and give them an different id?

I have an event click that create an input field each time you click on the link.

$("#add_file").click(function(e)
{
        var i = 0;

        $("#input_file").append('<input type="file" name="file[]" id="file"'+i+" />");
        $("#input_file").append('<br />');
        i++;
});
<a href="javascript:void(0)" id="add_file">Add file</a>

Here no probleme.. In fact I want to add a different Id each time I create my input tag. Like this : You click : <input type="file" name="file[]" id="file1" />

again : <input type="file" name="file[]" id="file2" />

Thx to all :)

EDIT: My tag doesnt fadeOut like the input what can I do ?

var i = 1;

    $("#add_file").click(function(e)
    {
        $("#input_file").append('<input type="file" name="file[]" id="file'+i+'" />');
        $("#input_file").append('<br />');
        $("#input_file").append('<input type="text" name="filename[]" id="file'+i+'" placeholder="Nom du fichier" />');
        $("#input_file").append('<a href="javascript:void(0)" onclick="removeFile(file'+i+');" id="file'+i+'">x</a>');
        $("#input_file").append('<br />');
        i++;
    });

    function removeFile(name)
    {
        $(name).fadeOut();
    }

Upvotes: 0

Views: 163

Answers (4)

David Thomas
David Thomas

Reputation: 253308

Move the i declaration outside of the function, otherwise it's always redeclared, and always set to 0 and, within the function, increment the variable by 1:

var i = 0;
$('#add_file').click(function(){
    var fileInput = $('<input />', {
        'type' : 'file',
        'id' : 'file' + i,
        'name' : 'file[]'
    }).appendTo('#input_file');
    i++;
});

JS Fiddle demo.

You could, though, avoid using global variables (that are subject to being changed elsewhere within the closure), using an attribute (in this case a given class-name) to keep track of how many elements there are:

$('#add_file').click(function (e) {
    e.preventDefault();
    $('<input />', {
        'type': 'file',
            'id': 'file' + $('.fileInput').length,
            'name': 'file[]',
            'class': 'fileInput'
    }).appendTo('#input_file');
});

JS Fiddle demo.

Upvotes: 2

Tamil Selvan C
Tamil Selvan C

Reputation: 20199

Assign var i=0 in outside of the function else it always 0

var i = 0;
$("#add_file").click(function(e)
{
    $("#input_file").append('<input type="file" name="file[]" id="file"'+i+" /><br />");
    i++;
});

Upvotes: 0

Mohamed AbdElRazek
Mohamed AbdElRazek

Reputation: 1684

var i = 1;
$("#add_file").click(function(e){
        $("#input_file").append('<input type="file" name="file[]" id="file"'+i+" />").append('<br />');
        i++;
});

Upvotes: 0

Sunny
Sunny

Reputation: 4809

i should be outside click function.

var i = 1;
$("#add_file").click(function(e)
{         
    $("#input_file").append('<input type="file" name="file[]" id="file"'+i+" />");
    $("#input_file").append('<br />');
    i++;           
});
<a href="javascript:void(0)" id="add_file">Add file</a>

Upvotes: 0

Related Questions