jquery dynamic add file fields

Question

Hello I want to do something like this : Here is example I want to do after click "+" add 2 new fields with indexed name+1, and after click "-" I want to delete this fields.

I don't know how to get started. I have form with one file input, but I don't know how add/delete dynamic next fields — Kubol
– Kubol, Commented Feb 28, 2014 at 9:55

James · Accepted Answer · 2014-02-28 10:07:47Z

1

Try this

var i=1;
$('#pl').click(function(){ $(this).parents('.ch').prepend($('<input/>').attr({'type':'file','name':i,'id':i}));
    i++;
});
$('#mn').click(function(){
    $(this).parents('.ch').children('input').first().remove();
i--;
})

If I understood your question properly It may help

live demo

answered Feb 28, 2014 at 10:07

James

2,9844 gold badges32 silver badges57 bronze badges

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

1 Comment

Kubol Over a year ago

Almost, because I would like to be added once the two fields :) Thanks for the reply!

Satish Sharma · Accepted Answer · 2014-02-28 10:26:13Z

try this LIVE DEMO

HTML

<div id="main_div">

  <div id="div_1">
    <div style="float:left">
        <label>Textbox 1 </label><input type="text" name="text1" id="text1">
    </div>
    <div style="float:left">
        <label>Textbox 2 </label><input type="text" name="text2" id="text2">
    </div>
    <div style="float:left">
        <label class="cursor_plus" onclick="add_Textbox();">+</label><label class="cursor_minus" onclick="remove_Textbox();">-</label>
    </div>
  </div>

</div>

JAVASCRIPT :

<script>
var counter = 1;
function add_Textbox()
{
    counter = counter + 1;
    var second = counter *2;
        var first = second - 1;
        var html = '<div id="div_'+counter+'" style="clear:both;">';
            html += '<div style="float:left">';
            html += '<label>Textbox '+first+' </label><input type="text" name="text'+first+'" id="text'+first+'">';
            html += '</div>';
            html += '<div style="float:left">';
            html += '<label>Textbox '+second+' </label><input type="text" name="text'+second+'" id="text'+second+'">';
            html += '</div>';
            html += '<div style="float:left">';
            html += '<label class="cursor_plus" onclick="add_Textbox();">+</label><label class="cursor_minus" onclick="remove_Textbox();">-</label>';
            html += '</div>';
            html += '</div>';
    document.getElementById('main_div').innerHTML += html;      
}

function remove_Textbox()
{
    if(counter==1)
    {
        alert("Cant' remove remaining One Only !!");
    }
    else
    {
        var id_rem = "div_"+counter+"";
        (elem=document.getElementById(id_rem)).parentNode.removeChild(elem)
        counter = counter - 1;  
    }   
}

</script>

CSS :

<style>
.cursor_plus{float:left; font-weight:bold; color:green; cursor:pointer}
.cursor_minus{float:left;margin-left:5px;font-weight:bold; color:red; font-size:12px; cursor:pointer}
</style>

Collectives™ on Stack Overflow

jquery dynamic add file fields

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related