Ok, I really am not that good at submitting questions here, so if I don't get all the markup just right, go easy on me. I am building a form that contains rows of data, of which a couple of the fields are inputs, and the rows all contain matching data. That is, each row contains the same fields. This is the html for my form...
echo "<div id='display-wrapper' style='position:absolute;
left:-100000px;'><form method='post'><table id='uploan' class='table-striped table-bordered'><thead><tr>";
$TtlReactHeaderNames = array_keys($TtlReactQuery[1]);
foreach($TtlReactHeaderNames as $TtlReactkey=>$TtlReactvalue) {
echo "<th>" . $TtlReactvalue . "</th>";
}
echo "<th class='green'>Revised BB Value</th><th class='green'>Revised Max Loan Capacity</th></tr></thead><tbody>";
foreach($TtlReactQuery as $TtlReactkey=>$TtlReactvalue) {
echo "<tr>";
echo "<td>" . $TtlReactvalue['Store Name'] . "</td>";
echo "<td>" . $TtlReactvalue['VIN Number'] . "</td>";
echo "<td><input type='text' name='display-name' value='" . $TtlReactvalue['Full Name'] . "' readonly /></td>";
echo "<td>" . $TtlReactvalue['SSN(Last Four)'] . "</td>";
echo "<td>" . $TtlReactvalue['Ecash Vehicle Value'] . "</td>";
echo "<td>" . $TtlReactvalue['Max Capacity'] . "</td>";
echo "<td><input type='text' name='revised-bb-value' /></td>";
echo "<td><input type='text' name='revised-max-loan-capacity' /></td>";
echo "</tr>";
}
echo "</tbody></table><input type='submit' /></form></div>";
...and there are about 200 rows of data in this form. The end user will only be choosing one row, filling the info in the fields that are blank, and submitting it. But as it is right now, it will only submit what is on the last line due to the fact that all the rows input's have the same name. I thought of adding a counter and appending the name attribute with the number so that each field has a unique name, but I end up with a BUNCH of empty fields in the POST array when I submit it, although the data is there too, and I don't know what row they are going to fill out so i don't know what to grab from the POST data. Someone suggested a hidden form using javascript to populate the form but I'm not exactly sure how to go about it. Any help would be so appreciated!!!
By creating one big form you will need to use different names for every field. A better solution would be to create on form per row of data. This way you will have many forms with the same fields but only one will be sent.
The inputs must definitely have different names. The counter approach was a good one, but you have to append it AFTER the name (e.g.: display-name0, NOT 0display-name).
Then on submit, you loop through all the rows, calling the submit function only for those rows where values have been filled.
There are three options:
Option #1:
Since all of your inputs are empty by default, change the input name to include a set of brackets: <input type='text' name='revised-bb-value[]' />. This will give you an array of values. Assuming you have an equal number of inputs, $_POST['revised-bb-value'][5] will be the same row as $_POST['display-name'][5]. All you need to do is loop through your inputs:
for($i = 0; $i < count($_POST['display-name']; $i++) {
if($_POST['revised-bb-value'][$i] == '' && $_POST['revised-max-loan-capacity'][$i] == '')
continue;
}
/* process row */
}
The disadvantage is the submission of empty records (though still not an excessive amount of data).
Options #2:
Create one form per row.
The disadvantage of this is that it can get ugly and error prone when you need to have a "submit" button next to every line. You could write javascript that appends the submit button onFocus() to the row, but you still have a lot of unnecessary forms, and this isn't exactly "proper" html syntax.
Option #3
Using JavaScript, when a row is clicked, you dynamically insert the fields for that row. Give each tr and td and unique id that includes the unique ID for the data (for example, the database rows unique ID). An example would be <tr id='row[1365]' and <td id='row-bb-value[1365]' like.
When the user clicks the row, replace the contents of the column with the html input and the pre-defined value matching the value. Often, a data-tag will be used to store the original, in case the user changes their mind:
<td id='row-bb-value[1365]' data-original='30k'>30k</td>
An onClick function of the row would change this to:
<td id='row-bb-value[1365]' data-original='30k'><input type='text' name='revised-bb-value' value='30k' /></td>
You would do this for each of the editable items in the row.
The advantage is that you can have multiple edits in a single form (benefit of option #1, limit of option #2), without the extra buttons or html (limit of option #2), and without all the empty rows (drawback of option #1).