获取动态添加的输入字段的内容

Question

I am adding extra input fields to a webpage with JavaScript when a button is clicked and am trying to get the content of the new input fields in ASP.NET, but I am only able to access the original input fields and not the new ones created with JavaScript.

Original List that gets added to:

<ul class="add-event-list" id="eventList" runat="server">
    <li id="eventItemsList">
         <asp:TextBox name="event-info" TextMode="MultiLine" Columns="50" Rows="5" id="eventInfo" placeholder="Enter an Event..." runat="server"/>

         <label for="event-date" class="field-heading">Date</label>
         <asp:TextBox Type="date" name="event-date" id="eventDate" placeholder="Enter a Date..." runat="server"/>
     </li>
</ul>
<button class="btn add-event-btn" onclick="return false" >Add Event <span class="glyphicon glyphicon-plus"/></button>

On the Button Click:

$('.add-event-btn').on('click', function () {
    var list = $('#eventItemsList').clone();
    $('.add-event-list').append(list);
});

On the submit click:

<button class="grey-btn" id="buttonSubmitHouse" onserverclick="buttonSubmitHouse_ServerClick" runat="server">Submit</button>

Only shows the original elements in the ul:

protected void buttonSubmitHouse_ServerClick(object sender, EventArgs e)
{
    foreach (Control item in eventList.Controls)
    {
        Control Test = item;
    }
}

Answer 1

The reason you're encountering the issue, with the dynamic control they aren't actually rendering on the server. Which is why you can't iterate through them, the server doesn't know they exist. The easiest approach, would be to implement a Web Service.

When you call the service you would simply append a QueryString , then perform your desired functionality. So from the Client you would do:

$.ajax({
     type: '...',
     url: '...',
     dataType: 'json',
     success: (function (response) {
          // Do something with service response.
     })
});

Depending on your technology, you would either hit a Controller or use a Generic Asp Handler File, so you would anchor onto HttpContext that is passed to the handler.