www.webdeveloper.com
Results 1 to 6 of 6

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

Hybrid View

  1. #1
    Join Date
    Feb 2012
    Posts
    3

    Question 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$_POSTtrue ). "</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,

  2. #2
    Join Date
    Nov 2007
    Posts
    432
    Can you post the rendered HTML and not the PHP code?
    (e.g., a stand alone HTML file that shows the bad behavior)
    Thanks.

  3. #3
    Join Date
    Feb 2012
    Posts
    3
    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>

  4. #4
    Join Date
    Nov 2007
    Posts
    432
    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) ;
      }
    }

  5. #5
    Join Date
    Feb 2012
    Posts
    3
    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.
    Last edited by chalko; 02-07-2012 at 01:07 PM. Reason: revision

  6. #6
    Join Date
    May 2012
    Location
    pakistan
    Posts
    2

    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles