How to show input info on next page?

Question

I have a html file with the following code inside:

<input type="button" id="styles" value="Add More" onClick="addRow('data')" /> 

<form action="mail.php" method="post">
<table id="data"><tr><td>
  <select name="selectorfirst" id="styles">
    <option>Yellow</option>
    <option>Green</option>
    <option>Red</option>
  </select>
</td>

<td>
  <select name="selectorsecond" id="styles">
    <option>375</option>
    <option>1000</option>
    <option>5000</option>
  </select>
</td></tr></table>

<input id="styles" type="submit" value="Submit" />
</form>

I also have javascript which is copying this form by pressing a button (So I can have for example 4 different forms with the same options and ids).

function addRow(tableID) { var table = document.getElementById(tableID); }

I need to POST these values selected in form on the next page after pressing button. I tried the code below but it didnt work.

<? $selectorfirst = $_POST['selectorfirst'];
$selectorsecond = $_POST['selectorsecond']; ?>

<table id="data">
  <?php foreach($selector as $key => $value) { ?>
    <tr>
      <td ><?php echo $a+1; ?></td>

      <td>
        <input type="text" id="styles" name="selectorfirst[$key]" value="<?php echo $selectorfirst[$key]; ?>">
      </td>

      <td>
        <input type="text" id="styles" name="selectorsecond[$key]" value="<?php echo $selectorsecond[$key]; ?>">
      </td>

</tr><?php } ?></table>

score 1 · Accepted Answer · answered Nov 01 '18 at 09:01

1

$selector is empty or null;

A foreach needs $selector to hold values otherwise it won't execute.

Documentation

answered Nov 01 '18 at 09:01

ImAtWar

1,073
3
11
23

Should I make $selector as an array and put there $selectorfirst and $selectorsecond? I dont understand php very much. – Viacheslav Nmk Nov 01 '18 at 09:08
Yes. However `$_POST['selectorfirst'];` should contain a single value, later in your foreach method you tried to use the `$selectorfirst[$key]` and treat the `$selectorfirst` as an array but its a string variable. – ImAtWar Nov 01 '18 at 09:14
I guess it should be like $selector = array($selectorfirst, $selectorsecond); No? – Viacheslav Nmk Nov 01 '18 at 09:31
Thank you. Now I have another problem when I get those values on the last page it doesnt show correctly. I see only replacement characters (html �) instead of actual values I chose before in the form. – Viacheslav Nmk Nov 01 '18 at 09:44
This is a seperate issue, however you should look into html encoded characters. This seems to be the case here. Could you select answer and close this issue? This separate answer might help you. https://stackoverflow.com/a/3527176/2725502 – ImAtWar Nov 01 '18 at 09:49

score 0 · Answer 2 · answered Nov 01 '18 at 10:03

You need to submit your data as an array, which could look like this:

array(3) { 
    [0]=> array(2) {
        ["first"]=> string(6) "Yellow" 
        ["second"]=> string(3) "375" 
    } 
    [1]=> array(2) {
        ["first"]=> string(5) "Green" 
        ["second"]=> string(4) "1000"
    }
    [2]=> array(2) { 
        ["first"]=> string(3) "Red" 
        ["second"]=> string(4) "5000"
    }
}

Every array element contains the data of one of the table rows. These are again represented by arrays with the first and second value. In html, it looks something like this:

<td>
    <select name="selector[0][first]" id="styles">
        <option>Yellow</option>
        <option>Green</option>
        <option>Red</option>
    </select>
</td>

<td>
    <select name="selector[0][second]" id="styles">
        <option>375</option>
        <option>1000</option>
        <option>5000</option>
    </select>
</td>

By adding brackets to your name tag, the values will be stored as an array (named selector, submitting to the 0th node in this case to the keys first and second).

I wrote my JS function a little quick and dirty, but it does the job:

var counter = 0;
function addRow(tableID) {
    var table = document.getElementById(tableID);
    var tablerow = table.rows[0].innerHTML;
    var tablerow = tablerow.replace(/name="selector\[\d+\]/g, 'name="selector['+ ++counter +']');
    table.getElementsByTagName('tbody')[0].innerHTML += '<tr>' + tablerow + '</tr>';
}

In short, it fetches the first row of the table, replaces the index of the name tag and adds this as a new row to the table.

Then in mail.php, fetch the $_POST['selector'] and loop through it likt this:

<?php
    $selector = $_POST['selector'];
?>

<table id="data">
    <?php foreach($selector as $key => $value) { ?>
    <tr>
        <td ><?php echo $key; ?></td>

        <td>
            <input type="text" id="styles" name="selectorfirst[$key]" value="<?php echo $value['first']; ?>">
        </td>

        <td>
            <input type="text" id="styles" name="selectorsecond[$key]" value="<?php echo $value['second']; ?>">
        </td>

    </tr>
    <?php } ?>
</table>

How to show input info on next page?

2 Answers2