I want to insert a new row into a table that contains a Dropdown and a textbox?
I need to load the new row’s DDL with data from another DLL that will be populated from a database.
Right now, I have a hardcoded DDL that I am trying to pull from. Why doesnt the new rows populate its DDL from the Source DDL? Code below. See the section that says //WHY DOESNT THIS WORK???
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
function createTextbox(counter){
return "<input id='"+ counter + "' type='text' />"
}
function createDropDown(counter){
var newSelectBox = "<select id='sel'" + counter + "></select>"
return newSelectBox
}
function createRow(counter){
return "<tr><td>" + createDropDown(counter) + "</td><td>"+ createTextbox(counter) + "</td></tr>";
}
function getValuesForPostback(){
//format as XML, JSON, or Whatever
var ToReturn = "<items>";
$('#sampleTable tr').each(function(){
ToReturn += "<item>";
//Get the textbox value
ToReturn += "<text>" + $(this).find('input[type=text]').val() + "</text>";
//Get the select values
$(this).find('select option:selected').each(function(){
ToReturn += "<select>" + $(this).val() + "</select>";
});
ToReturn += "</item>";
});
ToReturn += "</items>";
return ToReturn;
}
function submitValues()
{
alert(getValuesForPostback());
//NOW: Just ajax or post back this value to the server and parse for your data.
}
$(document).ready(function(){
$("#SourceDDL").hide();
var counter = 2;
$('#sampleTable').append(createRow(1));
$('#btnAdd').click(function(){
if(counter>10)
{
alert("You are only allowed to enter 10 Metrics for this project.");
return false;
}
$('#sampleTable').append(createRow(counter));
$('#SourceDDL option').clone().appendTo("'#sel" + counter + "'")//WHY DOESNT THIS WORK???
alert("'#sel" + counter + "'");
counter++;
});
$('#btnSubmit').click(function(){
submitValues();
});
});
</script>
</head>
<body>
<button id="btnAdd">Add</button>
<button id="btnSubmit">Submit</button>
<table id="sampleTable">
</table>
<select id='SourceDDL'>
<option>Zippy</option>
<option>ZippyTwo</option>
<option>ZippyThree</option>
</select>
</body>
</html>
You’re passing an incorrect string to
appendTo—selectors don’t have quotes.