Reputation: 10585
Say my page has the following HTML:
<form action="/some/where" method="POST">
<div id="someDiv">
</div>
</form>
Then suppose I click on a button, which calls a function that uses jQuery to add a drop down list to that DIV somehow.
(I am using DataTables and the DIV is really a TD)
var ddlSubset = '<select id="ddlSubset_' + rowNum + '"></select>';
oTable.fnUpdate(ddlSubset, rowNum, 3, false, true);
var subsetsURL = "/TotalTuple/Subsets";
$.getJSON(subsetsURL, function (data) {
for (i = 0; i < data.length; i++) {
if (data[i] == subsetData) {
$('#ddlSubset_'+rowNum).append($('<option selected></option>').text(data[i]));
}
else {
$('#ddlSubset_' + rowNum).append($('<option></option>').text(data[i]));
}
}
});
If I look at the page source both before and after I make the control they are the same.
When I submit the form, the new DDL is not passed along.
How can I make sure that the DDL is included with the form?
Upvotes: 0
Views: 63
Reputation: 9612
Just provide name
attribute to dynamically added select.
JS:-
jQuery(function($){
$("#btnAddDropdown").on("click",function(){
$("#someDiv").html("<select name='test'><option>Test</option></select>");
});
$("#btnSubmit").on("click",function(){
$("#myForm").submit();
});
$("#myForm").on("submit",function(){
var datastring = $("#myForm").serialize();
console.log(datastring);
});
});
HTML:-
<form id="myForm" action="/some/where" method="POST">
<div id="someDiv">
</div>
</form>
<input type="button" value="Add Dropdown" id="btnAddDropdown" />
<input type="button" value="Submit Form" id="btnSubmit" />
Upvotes: 1