CODEWITHSUNDEEP
javascriptphphtmlarraysforms
Alan W
Alan W

Reputation: 301

Iterate Through HTML Array with PHP

Im trying to create some forms using php. I was asked to make a dynamic form that adds input rows to a table on the click of a button. For some reason I cannot print the values stored in an array for each dynamic form row using php. 

<html>
    <body>
        Welcome <?php echo $_POST["name"]; ?></br>
        You e-mail address is <?php echo $_POST["email"];?></br>
        Your occupation is <?php echo $_POST["occupation"];?></br>

<?php foreach($_POST['colleague' as $a){ ?>
        Your colleague is <?php echo $a;?></br>
<?php }?>
   </body>
</html>

The php code should print all the colleague values that were submitted in the form, but for some reason it is not doing it. 

<html>
    <script src="script.js"></script>
    <body>
        <form action="test.php" method="post">
        <table id="testTable" style="text-align:left">
            <tr>
                <th>
                Name
                </th>
                <td>
                <input type="text" name="name">
                </td>
            </tr>
            <tr>
                <th>
                Email
                </th>
                <td>
                <input type="text" name="email"
                </td>
            </tr>
            <tr>
                <th>
                Occupation
                </th>
                <td>
                <input type = "text" name="occupation">
                </td>
            </tr>
            <tr>
                <th>
                Colleague
                </th>
                <td>
                <input type ="text" name="colleague[]">
                </td>
                <td>
                    <input type="button" value="Add Colleague" onClick="addRow('testTable')" />
                </td>
            </tr>
        </table>
        <input type="submit">
        </form>
    </body>
</html>

'

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var header = table.createTHead();
    var row = table.insertRow(rowCount);
    var cell = row.insertCell(0);
    header.innerHTML = table.rows[3].cells[0].innerHTML;
    cell.appendChild(header);
    var cellTwo = row.insertCell(1);
    cellTwo.innerHTML = table.rows[3].cells[1].innerHTML;
}

Upvotes: 0

Views: 107

Answers (1)

Mohammad Aftab Uddin
Mohammad Aftab Uddin

Reputation: 425

Here, try this for HTML

<html>
    <script src="script.js"></script>
    <body>
        <form action="test.php" method="post">
        <table id="testTable" style="text-align:left">
            <tr>
                <th>
                Name
                </th>
                <td>
                <input type="text" name="name">
                </td>
            </tr>
            <tr>
                <th>
                Email
                </th>
                <td>
                <input type="text" name="email">
                </td>
            </tr>
            <tr>
                <th>
                Occupation
                </th>
                <td>
                <input type = "text" name="occupation">
                </td>
            </tr>
            <tr>
                <th>
                Colleague
                </th>
                <td>
                <input type ="text" name="colleague[]">
                </td>
                <td>
                    <input type="button" value="Add Colleague" onClick="addRow('testTable')" />
                </td>
            </tr>
        </table>
        <input type="submit">
        </form>
    </body>
</html>

For the PHP file (test.php) write

<html>
    <body>
        Welcome <?php echo $_POST["name"]; ?><br />
        You e-mail address is <?php echo $_POST["email"];?><br />
        Your occupation is <?php echo $_POST["occupation"];?><br/>

<?php foreach($_POST['colleague'] as $a){ ?>
        Your colleague is <?php echo $a;?></br>
<?php }?>
    </body>
</html>

Hope it helps.

Upvotes: 1

Related Questions