Constantly add multiple mysql database rows into a html table using a dropdown
Question
I have a small project that I need some help with!
I have a MYSQL database containing: 'ID' 'FoodTitle' 'Serving' 'Carbs' 'Protein' 'Fat'
Now, I have the 'FoodTitle' column in a dropdown menu. So whenever a user selects what food they want the 'Serving' 'Carbs' 'Protein' 'Fat' column in that praticular row displays in its appropriate text input inside a html table.
I would like the user to be able to keep selecting 'FoodTitle' so they can keep adding rows/content to the html table. Almost like they are creating a recipe.
I just can't find a way to allow the user to keep adding the content to the html table like a list.
Here is my code...
<?php
// create a connection
$conn = mysqli_connect("localhost", "root", "root", "DBPT_MP_breakfast");
// check connection
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
?>
<html>
<head>
<style>
th, td {border:1px solid black;}
</style>
<meta charset="utf-8">
<title>DBPT Food Database</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<section>
<div class="form-fields">
<?php
$breakfast = 'SELECT * FROM breakfast';
$breakfastDisplay = mysqli_query($conn, $breakfast);
echo '<form action="" method="post">';
echo '<select class="meal-planner-selector" name="searchFood">';
echo '<option>Select a food:</option>';
while($bDis=mysqli_fetch_array($breakfastDisplay)){
echo '<option value="' . $bDis['ID'] . '">' . $bDis['FoodTitle'] . '</option>';
}
echo '</select>'; // Closing of list box
echo '<input type="submit" value="Add Food">';
echo '</form>';
//SEARCH FOOD DATABASE
if (!empty($_REQUEST['searchFood'])) {
$Search = mysqli_real_escape_string($conn, $_REQUEST['searchFood']);
$sql = "SELECT * FROM breakfast WHERE ID LIKE '%".$Search."%'";
$r_query = mysqli_query($conn, $sql);
$r = '';
$r .= '<table id="foodTable">';
while ($row = mysqli_fetch_array($r_query)){
$r .= '<tbody id="test">';
//HEADINGS
$r .= '<tr id="table-headings">';
$r .= '<th>'. 'Food Title' . '</th>';
$r .= '<th>'. 'Serving' . '</th>';
$r .= '<th>'. 'Carbs' . '</th>';
$r .= '<th>'. 'Protein' . '</th>';
$r .= '<th>'. 'Fat' . '</th>';
$r .= '</tr>';
//DATA
$r .= '<tr id="table-data">';
$r .= '<td>' .$row['FoodTitle'] . '</td>';
$r .= '<td><input type="text" value=" '.$row['Serving'] . '"</td>';
$r .= '<td><input type="text" value=" '.$row['Protein'] . '"</td>';
$r .= '<td><input type="text" value=" '.$row['Carbs'] . '"</td>';
$r .= '<td><input type="text" value=" '.$row['Fat'] . '"</td>';
$r .= '<td><input type="button" onclick="addRow()" id="add-row" value="Add Row"</td>';
$r .= '</tr>';
}
$r .= '</tbody>';
$r .= '</table>';
echo $r;
}
?>
<script>
function addRow() {
var row = document.createElement('tr'); // create row node
var col1 = document.createElement('td'); // create 1st column node
var col2 = document.createElement('td'); // create 2nd column node
var col3 = document.createElement('td'); // create 3rd column node
var col4 = document.createElement('td'); // create 4th column node
var col5 = document.createElement('td'); // create 5th column node
var col6 = document.createElement('td'); // create 6th column node
row.appendChild(col1); // append 1st column to row
row.appendChild(col2); // append 2nd column to row
row.appendChild(col3); // append 3rd column to row
row.appendChild(col4); // append 4th column to row
row.appendChild(col5); // append 5th column to row
row.appendChild(col6); // append 6th column to row
col1.innerHTML = "<? echo $row['FoodTitle'] ?>"; // put data in 1st column
col2.innerHTML = "<input type='text' value='<? echo $row['Serving']?>'/>"; // put data in 2nd column
col3.innerHTML = "<input type='text' value='<? echo $row['Carbs']?>'/>"; // put data in 3rd column
col4.innerHTML = "<input type='text' value='<? echo $row['Protein']?>'/>"; // put data in 4th column
col5.innerHTML = "<input type='text' value='<? echo $row['Fat']?>'/>"; // put data in 5th column
col6.innerHTML = "<input type='button' onclick='addRow()' id='add-row' value='Add Row'/>"; // put data in 6th column
var table = document.getElementById("foodTable"); // find table to append to
table.appendChild(row); // append row to table
}
</script>
</div>
</section>
<?php
$conn->close();
?>
</body>
</html>
Any help would be greatly appreciated!
1 answers
solution1
0 2015-11-02 11:10:52
in your case you need two pages one for displaying the select form and the other is just return the data passed on post request to it and on the first page every time you the select box is changed make an ajax post request to the second page and get json array and display it using jquery
http://www.infotuts.com/fetch-record-from-database-using-jquery-and-php/
http://openenergymonitor.org/emon/node/107
http://www.codexworld.com/load-more-data-using-jquery-ajax-php-from-database/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.