thevan thevan - 2 months ago 8
HTML Question

Dynamically pass input text in a html table to Javascript function

I am generating html table like below:

var tablebody = "";

$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "mCatchmentMapping.aspx/BindDatatable",
data: "{}",
dataType: "json",
success: function (data) {
var struct = "<div class='message_list'><div class='module_content'>";

for (var i = 0; i < data.d.length; i++) {
tablebody = tablebody + "<div class='message'><table id='tblhtml' width='100%'><tr><td width='25%'>" + data.d[i].Name + "</td>";
tablebody = tablebody + "<td><input type='hidden' style='color: green;' id='txtCode' name='Code' size='5' type='number' value=" + data.d[i].Code + "></td>";
tablebody = tablebody + "<td width='15%' class='nr' align='left' style='color:green'><input type='text' class='nr' style='color: green;' id='txtCatchment' name='txtCatchment' size='5' type='number' value=" + data.d[i].Catchment + "></td>";
tablebody = tablebody + "<td width='15%' align='left' style='color:green'><input type='text' style='color: green;' id='txtSalesMonth1' name='SalesMonth1' size='5' type='number' value=" + data.d[i].salesMonth1 + "></td>";
tablebody = tablebody + "<td width='15%' align='left' style='color:green'><input type='text' style='color: green;' id='txtSalesMonth2' name='SalesMonth2' size='5' type='number' value=" + data.d[i].salesMonth2 + "></td>";
tablebody = tablebody + "<td width='15%' align='left' style='color:green'><input type='text' style='color: green;' id='txtSalesMonth3' name='SalesMonth3' size='5' type='number' value=" + data.d[i].salesMonth3 + "></td>";
tablebody = tablebody + "<td width='15%' align='left' style='color:green'><input type='submit' class='use-address' id='btnSave' name='Save' onclick='saveData( " + data.d[i].Code + "," + $('#txtCatchment').val() + "," + $('#txtSalesMonth1').val() + "," + $('#txtSalesMonth2').val() + "," + $('#txtSalesMonth3').val() + ")'; value='Save'/></td></tr></table></div>";
}
tablebody = tablebody + "</div></div>"
tablebody = struct + tablebody;
$("#tbDetails").append(tablebody);
},
error: function (result) {
alert("Error");
}
});


Each row which has a save button at the last td. If I click "Save" button, the corresponding rows input text value should be passed as parameters to the JavaScript function "saveData".

This is my javascript function:

function saveData(code, catchment, month1, month2, month3) {
alert("storename :" + code);
alert("catchment :" + catchment);
alert("month1 :" + month1);
alert("month2 :" + month2);
alert("month3 :" + month3);
}


when I click save, I am getting undefined value for "catchment", "month1", "month2" and "month3".

How to pass the input text value to the javascript function?

Answer

You are creating text boxes dynamically so they will not be available while creation but will be available on run time, so you have to pass them like this

tablebody = tablebody + "<td width='15%' align='left' style='color:green'><input type='submit' class='use-address' id='btnSave' name='Save' onclick='saveData( " + data.d[i].Code + ",$(\"#txtCatchment\").val(), $(\"#txtSalesMonth1\").val(),$(\"#txtSalesMonth2\").val(), $(\"#txtSalesMonth3\").val())'; value='Save'/></td></tr></table></div>";

Here is the similar example

https://jsfiddle.net/h553jzmb/

Comments