pass data from dynamic table using <select> to PHP

Hello,

I have the following prob and I hope You guys can help me out:
I want to fill in the array "feld[][]" using a form, that can be amplified dynamically using JS. One of the field (and one entry of the array) comes from a dropdown list. the text input is working fine for multiples rows.

My problem is: The data from the dropdown list is not entering the array where it should be, it is overwriting the fist array entry,

here is the code:

PHP Code:

<?php if (isset( $_POST['submitbutton'] )) { echo "<pre>" .print_r( $_POST, true ). "</pre>"; } ?> <html> <head><title>Test</title></head> <script type="text/javascript"> function clone_this() { NewRow = document.getElementById('tab').lastChild.cloneNode(true); document.getElementById('tab').appendChild (NewRow); var i = document.getElementById('tab').childNodes.length - 2; for(j=0;j<document.getElementById('tab').lastChild.getElementsByTagName('input').length;j++) { var newname ='feld[' +i+ '][' +j+ ']'; document.getElementById('tab').lastChild.getElementsByTagName('input')[j].setAttribute('name', newname) ; document.getElementById('tab').lastChild.getElementsByTagName('select')[j].setAttribute('name', newname) ; var name = document.getElementById('tab').lastChild.getElementsByTagName('input')[j].name; var name2 = document.getElementById('tab').lastChild.getElementsByTagName('select')[j].name; } } </script> <body> <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method='post' name='first'> <table id='tab' border=1 style='width: 100%; height: 35px;'> <tr>  <td width='33%'> <select name='feld[0][2]'> <option value=""></option> <option value="UNITS_GR">Gramm</option> </select> </td> <td width='33%'><center><input type='text' name='feld[0][3]' value='Blei'></center></td> </tr> </table> <input type='button' value='neue Zeile' onClick='clone_this()'> <input type="submit" name="submitbutton" id="submitbutton" value="Senden" /> </form> </body> </html>

the PHP printout for two rows should be:

Code:

Array ( [feld] => Array ( [0] => Array ( [0] => UNITS_GR [1] => Blei ) [1] => Array ( [0] => UNITS_GR [1] => Blei ) ) [submitbutton] => Senden )

but it is:

Code:

Array ( [feld] => Array ( [0] => Array ( [2] => UNITS_GR [3] => Blei ) [1] => Array ( [0] => Blei ) ) [submitbutton] => Senden )

I don t think it is a heavy mistake, but I don t see it.

thanks in advance,

Can you post the rendered HTML and not the PHP code?
(e.g., a stand alone HTML file that shows the bad behavior)
Thanks.

thanks for the reply, nap0leon

I can post the html code, but the problem not the "cloning" of the table row, it happens when I try to pass the form to PHP, so that why I posted the complete code. The array is not named properly for <select> "input"

Code:

<html> <head><title>Test</title></head> <script type="text/javascript"> function clone_this() { NewRow = document.getElementById('tab').lastChild.cloneNode(true); document.getElementById('tab').appendChild (NewRow); var i = document.getElementById('tab').childNodes.length - 2; for(j=0;j<document.getElementById('tab').lastChild.getElementsByTagName('input').length;j++) { var newname ='feld[' +i+ '][' +j+ ']'; document.getElementById('tab').lastChild.getElementsByTagName('input')[j].setAttribute('name', newname) ; document.getElementById('tab').lastChild.getElementsByTagName('select')[j].setAttribute('name', newname) ; var name = document.getElementById('tab').lastChild.getElementsByTagName('input')[j].name; var name2 = document.getElementById('tab').lastChild.getElementsByTagName('select')[j].name; } } </script> <body> <form method='post' name='first'> <table id='tab' border=1 style='width: 100%; height: 35px;'> <tr>  <td width='33%'> <select name='feld[0][2]'> <option value=""></option> <option value="UNITS_GR">Gramm</option> </select> </td> <td width='33%'><center><input type='text' name='feld[0][3]' value='Blei'></center></td> </tr> </table> <input type='button' value='neue Zeile' onClick='clone_this()'> <input type="submit" name="submitbutton" id="submitbutton" value="Senden" /> </form> </body> </html>

I'm confused...

Your original row's field names are
input: feld[0][2]
select: feld[0][3]

insert two new rows and they are named:
input: feld[1][0]
select: feld[1][0]

and

input: feld[2][0]
select: feld[2][0]

The names being the same is a problem.

Also... don't you want them named like:
input: feld[1][0]
select: feld[1][1]

and

input: feld[2][0]
select: feld[2][1]?

If so, change your JS to this:

Code:

function clone_this() { NewRow = document.getElementById('tab').lastChild.cloneNode(true); document.getElementById('tab').appendChild (NewRow); var i = document.getElementById('tab').childNodes.length - 2; for(j=0;j<document.getElementById('tab').lastChild.getElementsByTagName('input').length;j++) { var selectnewname ='feld[' +i+ '][' +j+ ']'; var inputnewname ='feld[' +i+ '][' +(j+1)+ ']'; document.getElementById('tab').lastChild.getElementsByTagName('input')[j].setAttribute('name', inputnewname ) ; document.getElementById('tab').lastChild.getElementsByTagName('select')[j].setAttribute('name', selectnewname) ; } }

Yes, exactly nap0leon

that was the problem, now the array contains the values of the <select> field

thank You a lot! now I will study the process in order to understand this.

how to get dynamic table data using javaScript to php

@chalko
please tell me how do you get each row and each column data from dynamic table in javaScript to php?? please help me