Insert dynamically added TextBoxes value in JavaScript Array using jQuery

pandeygolu4200
 
on Sep 22, 2022 12:48 AM
210 Views

I am generating two textbox on button click, i want to fetch those data in array and pass it to controller as model object.

my problem is getting same value during iteration of dynamic textboxes.

$(document).ready(function () {
    function GetDynamicPrimarySpecialBox(value) {
        return '<input name = "Primarytxtvalue" type="text"  class="form-control" value = "' + value + '" />' +

            '<input name = "Primarytxtvalue" type="text"  class="form-control" value = "' + value + '" />' +

            '<input type="button" value="Remove" class="remove" />'
    }
    $("body").on("click", ".remove", function () {
        $(this).closest("div").remove();
    });

    function GetDynamicSubSpecialBox(value) {
        return '<div class="form-group"><input name = "SubSpecial" type="text"  class="form-control" value = "' + value + '" /></div>&nbsp;' +

            '<div class="form-group"><input name = "SubSpecial" type="text"  class="form-control" value = "' + value + '" /></div>&nbsp;' +

            '<input type="button" value="Remove" class="remove" />'

    }
    $("body").on("click", ".remove", function () {
        $(this).closest("div").remove();

    });
    $("#addmore").click(function (e) {
        e.preventDefault();

        var div = $("<div/>");
        div.html(GetDynamicPrimarySpecialBox(""));
        $("#TextBoxContainerPrimary").append(div);

    });

    // Remove element
    $('.container').on('click', '.remove', function () {

        var id = this.id;
        var split_id = id.split("_");
        var deleteindex = split_id[1];

        // Remove <div> with id
        $("#div_" + deleteindex).remove();
    });
    $("#addmorespecial").click(function (e) {
        e.preventDefault();

        var div = $("<div />");
        div.html(GetDynamicSubSpecialBox(""));
        $("#TextBoxContainersubspecial").append(div);
    });

    $("#btnSpecialityAdd").click(function () {

        var PrimarySpecialityMapping = new Array();
        var primaryfirstbox = $('#txtprimary').val();

        var primaryfirstboxtax = $('#txtprimarycode').val();
        // PrimarySpecialityMapping.push(primaryfirstboxtax);


        PrimarySpecialityMapping.push({
            TaxonamyCode: "'" + primaryfirstboxtax + "'",
            SpecialityName: "'" + primaryfirstbox + "'"
        });

        $("input[name=Primarytxtvalue]").each(function () {
            if (this.value != '') {
                //PrimarySpecialityMapping.push("'" + this.value + "'");

                PrimarySpecialityMapping.push({
                    SpecialityName: "'" + this.value + "'",
                    TaxonamyCode: "'" + this.value + "'"

                });
            }
        });

        var SubSpecialityMapping = new Array();
        var subfirstbox = $('#specialities').val();
        //SubSpecialityMapping.push(subfirstbox);

        var primarysubboxtax = $('#code2').val();
        //SubSpecialityMapping.push(primarysubboxtax);

        SubSpecialityMapping.push({
            SpecialityName: "'" + subfirstbox + "'",
            TaxonamyCode: "'" + primarysubboxtax + "'"

        });

        $("input[name=SubSpecial]").each(function () {
            if (this.value != '') {
                //SubSpecialityMapping.push("'" + this.value + "'");
                SubSpecialityMapping.push({
                    SpecialityName: "'" + this.value + "'",
                    TaxonamyCode: "'" + this.value + "'"

                });
            }

        });


        var clr = new Object();
        clr.PrimarySpecialityMapping = PrimarySpecialityMapping;
        clr.SubSpecialityMapping = SubSpecialityMapping;

        alert('hi')
        $.ajax({
            url: '@Url.Action("AddProviderSpecialities","Provider")',
            type: "POST",

            data: clr,
            success: function (data) {
                alert("Success");
            },
            failure: function (data) {
                alert("Failed");
            },
        });
    });
});

I am trying to get values by iterating the textbox name but getting same value. i have two textbox with different values

<form class="tab-pane" id="step3">
    <div class="provider-details-wrapper">
        <h6>Primary/Sub Specialities Details</h6>
        <div class="row">

            <div class="col-lg-3 col-md-4">
                <div class="form-group">
                    <label for="primary">Primary Specialities 1</label>
                    <input type="text" class="form-control" id="txtprimary">
                </div>
            </div>
            <div class="col-lg-3 col-md-4">
                <div class="form-group">
                    <label for="code">Taxonamy Code</label>
                    <input type="text" class="form-control" id="txtprimarycode">
                </div>
            </div>
            <div class="col-lg-5 col-md-6 align-self-center">
                <button class="btn upload-btn px-5 mt-3" id="addmore">Add More</button>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-3 col-md-4" id="TextBoxContainerPrimary">
            </div>
        </div>
        <div class="row">
            <div class="col-lg-3 col-md-4">
                <div class="form-group">
                    <label for="specialities">Sub Specialities 1</label>
                    <input type="text" class="form-control" id="txtspecialities">
                </div>
            </div>
            <div class="col-lg-3 col-md-4">
                <div class="form-group">
                    <label for="code2">Taxonamy Code</label>
                    <input type="text" class="form-control" id="txtspecialcode">
                </div>
            </div>
            <div class="col-lg-5 col-md-6 align-self-center">
                @*
                <button class="btn btn-trash mt-3 me-3 mb-2">
                    <span class="material-symbols-outlined align-middle">delete
                    </span>
                </button>
                *@
                                    <button class="btn upload-btn px-5 mt-3" id="addmorespecial">Add More</button>
            </div>

        </div>
        <div class="row">
            <div class="col-lg-3 col-md-4" id="TextBoxContainersubspecial">
            </div>

        </div>
        <div class="d-flex justify-content-end mt-5">
            <a href="@Url.Action("List","Provider")" class="btn cancel-btn me-3">Back</a>
            <input id="btnSpecialityAdd" type="submit" value="Submit" class="btn save-btn px-4" />
        </div>
    </div>
</form>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Sep 23, 2022 12:52 AM

Hi pandeygolu420...,

Check below example.

HTML

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body class="container">
    <form class="tab-pane" id="step3">
        <div class="provider-details-wrapper">
            <h6>Primary/Sub Specialities Details</h6>
            <div class="row">
                <div class="col-lg-3 col-md-4">
                    <div class="form-group">
                        <label for="primary">Primary Specialities 1</label>
                        <input type="text" class="form-control" name="PrimarySpeciality">
                    </div>
                </div>
                <div class="col-lg-3 col-md-4">
                    <div class="form-group">
                        <label for="code">Taxonamy Code</label>
                        <input type="text" class="form-control" name="PrimaryTaxonamyCode">
                    </div>
                </div>
                <div class="col-lg-5 col-md-6 align-self-center">
                    <button class="btn upload-btn px-5 mt-3" id="addmore">Add More</button>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-3 col-md-4" id="TextBoxContainerPrimary">
                </div>
            </div>
            <div class="row">
                <div class="col-lg-3 col-md-4">
                    <div class="form-group">
                        <label for="specialities">Sub Specialities 1</label>
                        <input type="text" class="form-control" name="SubSpeciality">
                    </div>
                </div>
                <div class="col-lg-3 col-md-4">
                    <div class="form-group">
                        <label for="code2">Taxonamy Code</label>
                        <input type="text" class="form-control" name="SubTaxonamyCode">
                    </div>
                </div>
                <div class="col-lg-5 col-md-6 align-self-center">
                    <button class="btn upload-btn px-5 mt-3" id="addmorespecial">Add More</button>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-3 col-md-4" id="TextBoxContainersubspecial">
                </div>
            </div>
            <div class="d-flex justify-content-end mt-5">
                <input id="btnSpecialityAdd" type="button" value="Submit" class="btn save-btn px-4" />
            </div>
        </div>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
        <script type="text/javascript">
            $(function () {
                function GetDynamicPrimarySpecialBox(value) {
                    return '<input name="PrimarySpeciality" type="text" class="form-control" value="' + value + '" />' +
                        '<input name="PrimaryTaxonamyCode" type="text" class="form-control" value="' + value + '" />' +
                        '<input type="button" value="Remove" class="remove" />'
                }

                function GetDynamicSubSpecialBox(value) {
                    return '<div class="form-group"><input name="SubSpeciality" type="text" class="form-control" value="' + value + '" /></div>' +
                        '<div class="form-group"><input name="SubTaxonamyCode" type="text" class="form-control" value="' + value + '" /></div>' +
                        '<input type="button" value="Remove" class="remove" />'
                }

                $("body").on("click", ".remove", function () {
                    $(this).closest("div").remove();
                });

                $("#addmore").click(function (e) {
                    e.preventDefault();
                    var div = $("<div/>");
                    div.html(GetDynamicPrimarySpecialBox(""));
                    $("#TextBoxContainerPrimary").append(div);
                });

                // Remove element
                $('.container').on('click', '.remove', function () {
                    var id = this.id;
                    var split_id = id.split("_");
                    var deleteindex = split_id[1];
                    // Remove <div> with id
                    $("#div_" + deleteindex).remove();
                });

                $("#addmorespecial").click(function (e) {
                    e.preventDefault();
                    var div = $("<div />");
                    div.html(GetDynamicSubSpecialBox(""));
                    $("#TextBoxContainersubspecial").append(div);
                });

                $("#btnSpecialityAdd").click(function () {
                    var PrimarySpecialityMapping = new Array();
                    $("input[name=PrimarySpeciality]").each(function (index, item) {
                        var specialityName = $(this).val();
                        var taxonamyCode = $("input[name=PrimaryTaxonamyCode]").eq(index).val();

                        PrimarySpecialityMapping.push({
                            SpecialityName: specialityName,
                            TaxonamyCode: taxonamyCode
                        });
                    });

                    var SubSpecialityMapping = new Array();
                    $("input[name=SubSpeciality]").each(function (index, item) {
                        var subSpecialityName = $(this).val();
                        var subTaxonamyCode = $("input[name=SubTaxonamyCode]").eq(index).val();

                        SubSpecialityMapping.push({
                            SpecialityName: subSpecialityName,
                            TaxonamyCode: subTaxonamyCode
                        });
                    });
                    var clr = new Object();
                    clr.PrimarySpecialityMapping = PrimarySpecialityMapping;
                    clr.SubSpecialityMapping = SubSpecialityMapping;
                    alert(JSON.stringify(clr));
                });
            });
        </script>
    </form>
</body>
</html>

Demo