pass data from dynamic table using <select> to PHP

**chalko** · 02-07-2012 05:41 AM

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%'><center><input type='text' name='feld[0][1]' value='eins'></center></td>-->

         <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,

**nap0leon** · 02-07-2012 08:39 AM

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

**chalko** · 02-07-2012 11:01 AM

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%'><center><input type='text' name='feld[0][1]' value='eins'></center></td>-->
         <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>

**nap0leon** · 02-07-2012 11:23 AM

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) ;
  }
}

**chalko** · 02-07-2012 12:03 PM

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.

**mastermind007** · 05-13-2012 10:02 PM

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

Thread: pass data from dynamic table using <select> to PHP

Thread Tools

Display

Hybrid View

pass data from dynamic table using <select> to PHP

how to get dynamic table data using javaScript to php

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions