CODEWITHSUNDEEP
javascriptjqueryhtmldom
Nehil Mistry
Nehil Mistry

Reputation: 1109

Add multiple html element dynamically using jquery

I want to add multiple html elements dynamically on button click and get values of each. Also one can delete created element on button click. HTML elements will be textbox and other text box for phone number.

I've tried to create single text box on button click. Fiddle: https://jsfiddle.net/dvkeojqn/

HTML: 

<input id="btnAdd" type="button" value="Add" />
<br />
<br />
<div id="TextBoxContainer">
    <!--Textboxes will be added here -->
</div>
<br />
<input id="btnGet" type="button" value="Get Values" />

JS: 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $("#btnAdd").bind("click", function () {
        var div = $("<div />");
        div.html(GetDynamicTextBox(""));
        $("#TextBoxContainer").append(div);
    });
    $("#btnGet").bind("click", function () {
        var values = "";
        $("input[name=DynamicTextBox]").each(function () {
            values += $(this).val() + "\n";
        });
        alert(values);
    });
    $("body").on("click", ".remove", function () {
        $(this).closest("div").remove();
    });
});
function GetDynamicTextBox(value) {
    return '<input name = "DynamicTextBox" type="text" value = "' + value + '" />&nbsp;' +
            '<input type="button" value="Remove" class="remove" />'
}
</script>

Upvotes: 4

Views: 5052

Answers (2)

Emipro Technologies Pvt. Ltd.
Emipro Technologies Pvt. Ltd.

Reputation: 14746

Try to replace this JavaScript code..

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $("#btnAdd").bind("click", function () {
        var div = $("<div />");
        div.html(GetDynamicTextBox(""));
        $("#TextBoxContainer").append(div);
    });
    $("#btnGet").bind("click", function () {
        var values = "";
        $("input[name=DynamicTextBox]").each(function () {
            values += $(this).val() + "\n";
        });
        alert(values);
    });
    $("body").on("click", ".remove", function () {
        $(this).closest("div").remove();
    });
});
function GetDynamicTextBox(value) {
       return '<input name = "DynamicTextBox" type="text" value = "' + value + '" />&nbsp;<input name = "DynamicTextBox" type="text" value="'+ value +'" />&nbsp;<input type="button" value="Remove" class="remove" />';
}
</script>

Upvotes: 0

Sarath Kumar
Sarath Kumar

Reputation: 2353

try replacing this function..

$(function () {
    $("#btnAdd").bind("click", function () {
        var div = $("<div />");
        div.html(GetDynamicTextBox(""));
        $("#TextBoxContainer").append(div);
    });
    $("#btnGet").bind("click", function () {
        var valuesarr = new Array();   
        var phonearr = new Array(); 
        $("input[name=DynamicTextBox]").each(function () {
            valuesarr.push($(this).val());
        });
        $("input[name=phoneNum]").each(function () {
            phonearr.push($(this).val());
        });
        alert(valuesarr); alert(phonearr);
    });
    $("body").on("click", ".remove", function () {
        $(this).closest("div").remove();
    });
});
function GetDynamicTextBox(value) {
       return '<input name = "DynamicTextBox" type="text" value = "' + value + '" />&nbsp;<input name = "phoneNum" type="text" />&nbsp;<input type="button" value="Remove" class="remove" />';
}

and HERE is the FIDDLE.

Upvotes: 3

Related Questions