Question

I have a simple form created, which allows the users to add and delete rows as they choose. After the user decides how many rows to add and populates the form accordingly, after submitting, I’d like to post the data so that I can use a .php script to upload the data onto a server.

I have tested the functionality of adding and deleting rows. When I click the submit button, it redirects me to upload.php, but at that page, I see an error: “Undefined index: reward” which makes me think that the data isn’t being sent properly.

Is there a problem with my implementation below?

HTML

<button onclick="addRow();">Add Row</button>
<form method="post" action="upload.php">
    <table border="1" id="optionsTable">
        <tr>
        <td>Header1</td>
        <td>Header2</td>
        <td>Delete</td>
        </tr>

        <tr id="templateRow" style="display:none">
        <td><input type="text" id="reward" /></td>
        <td><input type="text" id="duration" /></td>
    <td><input type="button" id="deleteOption" value="Delete"     onclick="delRow(this)"/></td>
        </tr>
    </table>

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

</body>
</html>

<script>
var maxID = 0;
function getTemplateRow() {
    var x = document.getElementById("templateRow").cloneNode(true);
    x.id = "";
    x.style.display = "";
    x.innerHTML = x.innerHTML.replace(/{id}/, ++maxID);
    return x;
}
function addRow() {
    var t = document.getElementById("optionsTable");
    var rows = t.getElementsByTagName("tr");
    var r = rows[rows.length - 1];
    r.parentNode.insertBefore(getTemplateRow(), r);
}
function delRow(row) {
    var i=row.parentNode.parentNode.rowIndex;
    document.getElementById('optionsTable').deleteRow(i);
}

</script>

I’m only debugging with upload.php right now so there is only one command there:
echo($_POST[‘reward’]);

Any help would be greatly appreciated.

Answer 1

You need to define name for input.

<input type="text" id="reward" />

TO

<input type="text" id="reward" name="reward"/>