How to get values for dynamically added text boxes in Java Script and PHP

Question

I am trying to POST the values of the dynamically added text boxes. How to assign names to these new textboxes[as array]? How to pass these array values to the .php file?

Below piece of code adds texbox dynmically

HTML Part:

<input type="checkbox" name="bugs" value="1">Check this if bugs are not available </br> </br>
<INPUT type="button" value="Add Row" onclick="addBugRow('bugTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteBugRow('bugTable')" />

<TABLE id="bugTable" width="350px" border="1">
<TR>
            <TD></TD>
            <TD> No. </TD>
            <TD> PCR </TD> 
        <TD> Description </TD>

</TR>
<TR>
            <TD><INPUT type="checkbox" name="chk"/></TD>
            <TD> 1 </TD>
            <TD> <INPUT type="text" name="pcr[]" size="6"/> </TD> 
        <TD><textarea cols="75" rows="5" name="bugdata[]"> </textarea> </TD>

</TR>
</TABLE>

Java Script Part

function addBugRow(tableID) {

            var table = document.getElementById(tableID);

            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var cell1 = row.insertCell(0);
            var element1 = document.createElement("input");
            element1.type = "checkbox";
            cell1.appendChild(element1);

            var cell2 = row.insertCell(1);
            cell2.innerHTML = rowCount;

            var cell3 = row.insertCell(2);
            var element2 = document.createElement("input");
            element2.type = "text";
        element2.name = "pcr[]"; // text field names in array
        element2.size = 6;
            cell3.appendChild(element2);

        }

on PHP side, I need to get values of the number of textboxes added and their values.

PHP Part:

foreach($_POST['pcr'] as $key=>$value)
 echo $key.' '.$value;

Um, if they are part of the form, they should be sent when the form submits. Are you asking how to assign a name value to the <input type="text" /> elements? — thatidiotguy
– thatidiotguy, Commented Aug 15, 2012 at 18:54
How are the textboxes generated? Posting code would provide a more useful response.. — burmat
– burmat, Commented Aug 15, 2012 at 18:59
@thatidiotguy I am trying to name the new textbox as new array. — Ajay
– Ajay, Commented Aug 16, 2012 at 2:48

trevorkavanaugh · Accepted Answer · 2012-08-16 17:12:31Z

2

Adding name to dynamically created element:

var Input = document.createElement("input");     
Input.setAttribute("name", "ElementNameGoesHere");

As for posting the inputs as an array.. Yes this is possible as so:

Input Naming:

<input name="array[]" />
<input name="array[]" />

PHP:

$_POST['array'][0] // First Input
$_POST['array'][1] // Second Input

edited Aug 16, 2012 at 17:12

answered Aug 15, 2012 at 18:54

trevorkavanaugh

3402 silver badges8 bronze badges

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

2 Comments

Ajay Over a year ago

Can I name this as an array and POST the same array to PHP code.

trevorkavanaugh Over a year ago

Just tested it, will revise answer to include this. Please accept my answer if this works for you :D

mcarpenter · Accepted Answer · 2012-08-16 22:46:35Z

1

If you're using jquery:

var count  = $("input[name*='newInput']").length;
var hidden = $("<input>").attr("type", "hidden")
                         .attr("name", "newInput[" + count + "]")
                         .val("hiddenStuff");
$("#someId").append(hidden);

This should post just fine to PHP. As long as you generate predictable names that you know to look for on the PHP side, you should easily be able to get the data back out.

edited Aug 16, 2012 at 22:46

answered Aug 15, 2012 at 18:57

mcarpenter

1114 bronze badges

2 Comments

Ajay Over a year ago

on PHP side, I need to get values of the number of textboxes added and their values. can I use array to name them and get their values.

mcarpenter Over a year ago

For sure! There's no reason you couldn't use an array for the name so that you get an array created in PHP's $_POST global variable. You could even modify the code so it automatically added the "nth" item quite easily. I'll update my answer.

Collectives™ on Stack Overflow

How to get values for dynamically added text boxes in Java Script and PHP

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related