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
", 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!