Read data on server side from dynamically generated inputs

Question

In my case i have
<input type="text"/>
And button, that on click add additinal inputs to page.
To add inputs i use this JavaScript:

    var myBtn = document.getElementById('myBtn');
    var qtyOfAdds = 0;
    myBtn.addEventListener('click', function (event) 
    {
        addField();
    });

    var form = document.getElementById('form1');

    function addField() 
    {
        var input = document.createElement('input');
        input.id = qtyOfAdds;
        input.name = qtyOfAdds;
        input.type = "Text";
        form.insertBefore(input, myBtn);
        qtyOfAdds++;
        document.getElementById('AddedFieldsCount').value = qtyOfAdds;
    }

On server side i read post data, to get all field data input.
Using this C# code:

var context = HttpContext.Current; List<string> fieldsList = new List<string>(); string hiddenFieldData = context.Request["AddedFieldsCount"]; int addedFieldsCount = 0; Int32.TryParse(hiddenFieldData, out addedFieldsCount); for (int i = 0; i < addedFieldsCount; i++) { fieldsList.Add(context.Request[i.ToString()]); }

So, and html on .aspx page:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="StyleSheet.css" rel="stylesheet" />
<script src="JavaScript.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>

<body>
    <form id="form1" runat="server">
    <input type="text"/>
    <button type="button" id="myBtn">ADD</button>
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Submit" />
        <br />
        <input id="AddedFieldsCount" name="AddedFieldsCount" type="hidden" />
    </form> 
    <script src="JavaScript.js"></script>

</body>
</html>

Tell me please, can you advice more better way?

user2754435 · Accepted Answer · 2014-03-30 12:23:04Z

In my case using jQuery and Asp.Net MVC I'd approach it as follows (note, this is untested so there may be a few mistakes), I'm also unsure as to what the text boxes will be used for and what text they'll support.

Client side

$(document).ready(function(){
    $('#myBtn').click(function(){
        var $this = $(this),
            $form = $('#form1'),
            $inputs = $('input.tb');
            $newInput = $('<input/>', { type: 'text', name: 'tb' + $inputs.length, class: 'tb' }),

        $inputs.last().after($newInput);
   }
});

Server side

HttpContext context = HttpContext.Current;
// Retrieve all keys
List<string> keys = from key in context.Request.Form.AllKeys
                    where key.StartsWith("tb")
                    select key;

Without knowing your exact requirements and end use there are as always many ways to achieve what you want and the way you've currently handled it is fine but the way above could also be used.

Collectives™ on Stack Overflow

Read data on server side from dynamically generated inputs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related