Add HTML Table data into MySQL DB

Question

I have an HTML table and a button that allows the user to add multiple rows.

<table id="component_table">
    <thead>
        <tr>
            <th>Component</th>
            <th>Component Type</th>
            <th>Component Thickness</th>
        </tr>
    </thead>
    <tbody id="component_tb">
        <tr>
            <td><?php echo $roofComponentDropDown ?></td>
            <td><?php echo $roofComponentTypeDropDown ?></td> 
            <td><input id="component_thickness" name="component_thickness" type="text"></td>
        </tr>
    </tbody>
</table>
<input type="button" value="+" id="addRows" />

These are my drop downs that are being generated for the table

//Queries here to get data for the drop down lists that make up the roof construction table...
$roofComponentQuery = "SELECT * FROM roof_component";
$roofComponentData = mysqli_query($dbc, $roofComponentQuery);

while ($rcRow = mysqli_fetch_array($roofComponentData)) {
         $roofComponentOptions .="<option value=\"".$rcRow['roof_component_id']."\">" . $rcRow['roof_component_name'] . "</option>";
}

$roofComponentDropDown = "<select name='selectedRoofComponent' id='selectedRoofComponent' onChange='getComponentType(this)'>
                            <option selected='selected' disabled='disabled' value=''>Select Component</option>
                        " . $roofComponentOptions . "
                        </select></br>";

$roofComponentTypeDropDown = "<select name='selectedComponentType' id='selectedComponentType'>
                                <option class='toggle_control' selected='selected' disabled='disabled' value=''>Select Type</option>
                            </select></br>";

Is there a way to add each <tr> into an array, then iterate through the array with a foreach loop and insert each <tr> into the DB?

Something like this maybe?

$tableRow = array(); 
foreach ($tableRow as $row) {
    //insert query
}

@Barmar Yes, the table is in a form with several other input fields. — BRBT
– BRBT, Commented Apr 6, 2015 at 15:58
You'll have to give, more information, the mysql table schema and the complete PHP code — Pedro Rodriguez Larez
– Pedro Rodriguez Larez, Commented Apr 6, 2015 at 16:04
@perodriguezl you don't need my table schema to answer the question, and I believe I have added in enough PHP here to support my question. — BRBT
– BRBT, Commented Apr 6, 2015 at 16:07

Barmar · Accepted Answer · 2015-04-06 16:04:03Z

1

Give the <select> elements names ending in [].

$roofComponentDropDown = "<select name='selectedRoofComponent[]' id='selectedRoofComponent' onChange='getComponentType(this)'>
                            <option selected='selected' disabled='disabled' value=''>Select Component</option>
                        " . $roofComponentOptions . "
                        </select></br>";
$roofComponentTypeDropDown = "<select name='selectedComponentType[]' id='selectedComponentType'>
                                <option class='toggle_control' selected='selected' disabled='disabled' value=''>Select Type</option>
                            </select></br>";

Then the elements of $_POST will be arrays that you can loop over.

foreach ($_POST['selectedRoofComponent'] as $index => $component) {
    $componentType = $_POST['selectedComponentType'][$index];
    // INSERT $component and $componentType into database
}

answered Apr 6, 2015 at 16:04

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

You Old Fool Over a year ago

This is a good answer but will not give the OP the structure which he asked about, which is a single array of $tableRow he can iterate over. Furthermore there's a bit of a leap of faith necessary in regards to which row each element's index belongs in. If something goes awry client side while generating new rows, he will end up with data in the wrong places.

Barmar Over a year ago

He said "something like this", I think my answer is something like it. It doesn't have to be a single array, just something he can iterate over.

BRBT Over a year ago

@Barmar Bonus Points(avoiding asking another question): I have implemented your answer and it seems to be working how it should. However I am trying to add [] to my component_thickness input field and I have done $componentThickness = $_POST['component_thickness'][$index]; but I am only getting the last value I have entered in.

Barmar Over a year ago

Are you changing the values of these fields dynamically with Javascript? You could be running into problems because they all have the same ID. IDs are supposed to be unique.

You Old Fool · Accepted Answer · 2015-04-06 16:22:52Z

First make sure each <tr> and subsequently newly created <tr> has a unique row id. Then use this to create the array index assign names to your elements in each <td> which are submitted with the form.

Perhaps something like <select name='tableRow[rowId][selectedRoofComponent]' id='selectedRoofComponent' onChange='getComponentType(this)'> this should give you an array with the appropriate structure in your POST data.

rowId in this case needs to be a variable which is either generated by your javascript or rendered by php when the page loads. So in php it might look something like:

"<select name='tableRow[" . $rowId . "][selectedRoofComponent]' id='selectedRoofComponent' onChange='getComponentType(this)'>"

or if javascript

"<select name='tableRow[" + rowId + "][selectedRoofComponent]' id='selectedRoofComponent' onChange='getComponentType(this)'>"

To give you anything more specific than this I'd need to see the javascript as well.

Collectives™ on Stack Overflow

Add HTML Table data into MySQL DB

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related