Question

I have an issue to create dynamic fields with string count using JavaScript or jQuery.

Briefing

I want to create dynamic fields with the help of sting count, for example when I write some text on player textfield like this p1,p2,p3 they create three file fields on dynamicDiv or when I remove some text on player textfield like this p1,p2 in same time they create only two file fields that’s all.

The whole scenario depend on keyup event

Code:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function commasperatedCount(){
    var cs_count = $('#player').val();
    var fields = cs_count.split(/,/);
    var fieldsCount = fields.length;

    for(var i=1;i<=fieldsCount;i++){
        var element = document.createElement("input");
        element.setAttribute("type", 'file');
        element.setAttribute("value", '');
        element.setAttribute("name", 'file_'+i);

        var foo = document.getElementById("dynamicDiv");
        foo.appendChild(element);
    }
}
</script>

<form>
<label>CountPlayerData</label>
<input type="text" name="player" id="player" onkeyup="return commasperatedCount();" autocomplete="off" />
<div id="dynamicDiv"></div>

<input type="submit" />
</form>

Answer 1

var seed = false,
    c = 0,
    deleted = false;
$('#player').on('keyup', function(e) {
    var val = this.value;
    if ($.trim(this.value)) {
        if (e.which == 188) {
            seed = false;
        }
        if (e.which == 8 || e.which == 46) {
            var commaCount = val.split(/,/g).length - 1;
            if (commaCount < c - 1) {
                deleted = true;
            }

        }
        commasperatedCount();
    } else {
        c = 0;
        deleted = false;
        seed = false;
        $('#dynamicDiv').empty();
    }
});

function commasperatedCount() {
    if (deleted) {
        $('#dynamicDiv input:last').remove();
        deleted = false;
        c--;
        return false;
    }
    if (!seed) {
        c++;
        var fields = '<input value="" type="file" name="file_' + c + '">';
        $('#dynamicDiv').append(fields);
        seed = true;
    }
}​

DEMO