Update values with javascript

Question

I'm creating a "shopping list" for a chef. Let's say he has the menu item Tuna Salad. His recipe is for 1 serving and has several ingredients. With javascript, how do I dynamically change the serving and it automatically change the amounts of the ingredients? This is my current code:

<?php include 'config.php';?>
<?php
if (isset($_GET['id'])) {
$id = $_GET['id'];
$sql = mysqli_query($con, "SELECT * FROM recipes WHERE id='$id'");
while ($result = mysqli_fetch_array($sql)){
include 'header.php';
echo "One serving of " . "<strong>" . $result['name'] . "</strong>" . " equals:";
echo "<ul>";
echo "<li>" . $result['ing1Amt'] . " " . $result['ing1Mea'] . " " . $result['ing1'] . "  </li>";
echo "<li>" . $result['ing2Amt'] . " " . $result['ing2Mea'] . " " . $result['ing2'] . "</li>";
echo "<li>" . $result['ing3Amt'] . " " . $result['ing3Mea'] . " " . $result['ing3'] . "</li>";
echo "<li>" . $result['ing4Amt'] . " " . $result['ing4Mea'] . " " . $result['ing4'] . "</li>";
echo "<li>" . $result['ing5Amt'] . " " . $result['ing5Mea'] . " " . $result['ing5'] . "</li>";
echo "<li>" . $result['ing6Amt'] . " " . $result['ing6Mea'] . " " . $result['ing6'] . "</li>";
echo "<li>" . $result['ing7Amt'] . " " . $result['ing7Mea'] . " " . $result['ing7'] . "</li>";
echo "<li>" . $result['ing8Amt'] . " " . $result['ing8Mea'] . " " . $result['ing8'] . "</li>";
echo "<li>" . $result['ing9Amt'] . " " . $result['ing9Mea'] . " " . $result['ing9'] . "</li>";
echo "<li>" . $result['ing10Amt'] . " " . $result['ing10Mea'] . " " . $result['ing10'] . "</li>";
echo "</ul>";
include 'footer.php';
}
}
?>
<?php mysqli_close($con);?>

I don't see your Javascript code you've tried, but I do see that `$id` is not sanitized for safety. — , Oct 15 '14 at 04:03
@JeremyMiller I use mysqli_real_escape_string() in the form submission elsewhere. Is that not enough? — joshlsullivan, Oct 15 '14 at 04:11
Unless you sanitize and put that back into `$_GET['id']`, then no, it's not enough. And if you do, then that's bad practice. If you know it's an `int`, for example, then `$id_sanitized = (int)$_GET['id'];` keeps you safe and you know it has been sanitized b/c of your variable naming. — , Oct 15 '14 at 04:14
@JeremyMiller I know this is completely off the topic, but will you point me where I can find more information about sanitizing? Thank you. — joshlsullivan, Oct 15 '14 at 04:21
No problem. The forum is about learning. That question has been asked, actually. I suggest reading the [higher-voted answers here](http://stackoverflow.com/questions/129677/whats-the-best-method-for-sanitizing-user-input-with-php) as they address the question more completely. — , Oct 15 '14 at 04:24

Rasclatt · Answer 1 · 2014-10-15T05:12:37.730

Your javascript question is referred to as AJAX. Look up jQuery AJAX, you can load elements onChange or onBlur etc. You can also change elements based on selections if you do a form submission without javascripting. This will address your jQuery form. You will want to read up on it so you know what this is all doing:

index.php

<form id="recipes">
    <label for="recipelist">Recipes</label>
    <select id="recipelist" name="recipelist">
    <!-- HERE IS WHERE YOU LIST THE RECIPIES-->
<?php for($i = 1; $i <= 20; $i++) { ?>
        <option value="<?php echo $i; ?>">Food <?php echo $i; ?></option>
<?php } ?>
    </select>
    <input type="text" size="4" maxlength="2" name="serving_size" id="serving_size" />
    <input type="submit" name="submit" value="submit" />
</form>
<div id="ingredients"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#recipes').submit(function() {
            $.ajax({
                    // You need to reference this page in the
                    // "lookup.php" whatever the page will be called
                    url:"lookup.php",
                    type: "POST",
                    data: $("#recipes").serialize(),
                    success:function(result) {
                        $("#ingredients").html(result);
                }});
                return false;
              });
            });
    </script>

lookup.php

// Do all your look ups and calculations
print_r($_REQUEST);

Thanks for taking the time to rewrite the code. I knew there was a way to prevent me from typing almost the same lines over and over. As far as changing the values, ideally, I would like for him to change "One" (make it an input variable) to any number and it automatically change the amounts of the ingredients. — joshlsullivan, Oct 15 '14 at 04:51
So you want an input field that someone can type a digit or two and it will reload making calculations on that serving size? So if something says 1 serving = 1g you want him to be able to type 3 servings and changes to 3 g? Something like that? — Rasclatt, Oct 15 '14 at 04:55
Exactly. I know it's something simple, but I can't seem to figure it out. — joshlsullivan, Oct 15 '14 at 05:00
Ok so now the form will `serialize()` (basically it gathers all the data from the form fields) when the submit button is clicked and then send the whole thing to the `lookup.php` page. You will have to then create the code on the `lookup.php` page to return the correct recipe values and calculations. — Rasclatt, Oct 15 '14 at 05:15

Update values with javascript

1 Answers1