tacos_tacos_tacos
tacos_tacos_tacos

Reputation: 10585

Dynamically-added dropdownlist not posted

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

Answers (1)

Aditya Singh
Aditya Singh

Reputation: 9612

Try this out:- http://jsfiddle.net/adiioo7/2Ra2S/1/

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

Related Questions