Dynamically generated input name in JavaScript

Question

I am trying to make a page where users can add as many rows to a table as they want, and then the values of the inputs (there is an input in each cell of the table) are passed back to the page.

My problem comes when trying to make the name of each dynamically generated input box different. I've tried to create a variable to do it, but the syntax I'm using, which works in other places, doesn't seem to work when creating new elements.

Here is the code in question:

    if ($_POST['dept_1'] != null){  //If there was an input
    $i = intval($_POST['num_of_rows']);
    while ($i != 0){
        $dept = $_POST['dept_' . $i];
        $hours = $_POST['hours_' . $i];
        echo $dept . " " . $hours . "\n";
        $i--;
    }
}

.....

var i = 2;
        $("document").ready(function(){
            $("#newrow").click(function(e){
                $("#maintable").append('<tr> \
                                        <td><input type="text" name="dept_" + i size="5" maxlength="5" /></td> \
                                        <td><input type="text" name="hours_" + i size="5" maxlength="1" /></td> \
                                    </tr>');
                                    alert("dept_" + i);
                e.preventDefault();
                $("#hiddenvalue").attr("value", "" + i + "");
                i = i + 1;
            });
        });

$POST['dept' . $i] works when $i = 1, because dept_1 is written into the HTML of the page.

alert("dept_" + i) works, concatenating the value of i to the string.

name="dept_" + i does not work. Inspecting the new element, its name is "dept_ + i"

Why is this happening, and how can I fix it?

iambriansreed · Accepted Answer · 2012-03-31 01:03:22Z

5

Don't make it so hard on yourself. Use an array name.

<td><input type="text" name="dept[]" size="5" maxlength="5" /></td>
<td><input type="text" name="hours[]" size="5" maxlength="1" /></td>

Get the values in PHP using $_POST['dept'] and $_POST['hours'] which will return nice clean arrays.

answered Mar 31, 2012 at 1:03

iambriansreed

22.3k6 gold badges66 silver badges81 bronze badges

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

2 Comments

Andrew Latham Over a year ago

Thanks for teaching me something new. I'm really interested in learning the answer to my question though, because I've tried to do similar things other times and had them not work.

iambriansreed Over a year ago

@AndrewLatham You've got it all in ThiefMaster's answer.

ThiefMaster · Accepted Answer · 2012-03-31 01:04:33Z

3

The proper solution would be using an array by naming the element dept[]; that will give you an array $_POST['dept'] on the PHP side.

Besides that, syntax highlighting already shows you the problem: Your +i is inside the string; use this instead:

$("#maintable").append('<tr> \
    <td><input type="text" name="dept_' + i + '" size="5" maxlength="5" /></td> \
    <td><input type="text" name="hours_' + i + '" size="5" maxlength="1" /></td> \
  </tr>');

answered Mar 31, 2012 at 1:04

ThiefMaster

320k85 gold badges608 silver badges648 bronze badges

Comments

jfriend00 · Accepted Answer · 2012-03-31 04:38:04Z

0

You need to fix some javascript syntax errors in your string like this so that you end the string in the appropriate places so you have 'string1' + i + 'string2':

    var i = 2;
    $("document").ready(function(){
        $("#newrow").click(function(e){
            $("#maintable").append('<tr> \
                                    <td><input type="text" name="dept_' + i + '" size="5" maxlength="5" /></td> \
                                    <td><input type="text" name="hours_' + i + '" size="5" maxlength="1" /></td> \
                                </tr>');
                                alert("dept_" + i);
            e.preventDefault();
            $("#hiddenvalue").attr("value", "" + i + "");
            i = i + 1;
        });
    });

edited Mar 31, 2012 at 4:38

answered Mar 31, 2012 at 1:04

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

2 Comments

Andrew Latham Over a year ago

This doesn't work, the result is ... name="dept_" i size="5" ...

jfriend00 Over a year ago

@AndrewLatham - I just made a correction to my answer, but even what I had before wasn't giving what you think it was. I don't think you had the right code from my answer. This will give name="dept_2" size="5"...

Collectives™ on Stack Overflow

Dynamically generated input name in JavaScript

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related