Dynamically pass input text in a html table to Javascript function

Question

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?

there is no problem in binding. I can bind the html table. It has 16 rows. I can allow the user to update the input text value, after changing the value, they will click save button. — thevan
– thevan, Commented Sep 12, 2016 at 8:09
You have to double quote the value, because you want to pass string, e.g: 'saveData( '" + data.d[i].Code + "','" + etc — A. Wolff
– A. Wolff, Commented Sep 12, 2016 at 8:10
in the same way, if i pass "data.d[i].Catchment" it is taking. but if i pass "$('#txtCatchment').val()", it is taking as undefined — thevan
– thevan, Commented Sep 12, 2016 at 8:11
I formely made a mistake, it should be ' wrapping around " for string you want to pass. But anyway your rendered HTML markup is invalid, IDs must be unique on document context — A. Wolff
– A. Wolff, Commented Sep 12, 2016 at 8:12

Pawan Nogariya · Accepted Answer · 2016-09-12 09:16:41Z

1

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/

edited Sep 12, 2016 at 9:16

answered Sep 12, 2016 at 8:22

Pawan Nogariya

9,05614 gold badges61 silver badges137 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

thevan Over a year ago

This one is not working. Javascript function is not calling.

Pawan Nogariya Over a year ago

Try it now! There was a small typo

thevan Over a year ago

I am getting this error: JavaScript critical error at line 1, column 17 in (unknown source location) SCRIPT1002: Syntax error

Pawan Nogariya Over a year ago

Actually there are so many single and double quotes, try it now. And use the full last line that I have given. You can replace your line that one

KrishCdbry · Accepted Answer · 2016-09-12 08:26:39Z

0

Instead using $('#txtCatchment').val use the data.d[i].Catchment and so on. Because #txtCatchment won't be unique after your loop

Modify you last line with save function with the below code.

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 + "," + data.d[i].Catchment + "," + data.d[i].salesMonth1 + "," + data.d[i].salesMonth2 + "," + data.d[i].salesMonth3 + ")'; value='Save'/></td></tr></table></div>";

Working live example https://jsbin.com/jayaki/edit?html,js,output

Hope this helps. Thanks !

edited Sep 12, 2016 at 8:26

answered Sep 12, 2016 at 8:20

KrishCdbry

1,05911 silver badges19 bronze badges

Collectives™ on Stack Overflow

Dynamically pass input text in a html table to Javascript function

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related