使用javascript更新值

我正在为厨师制作一份“购物清单”。假设他有菜单上的金枪鱼沙拉。他的食谱是一份，有几种配料。使用javascript，我如何动态地改变服务，并自动改变成分的数量？这是我当前的代码：

<?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);?>

您的javascript问题称为
AJAX
。查找
jQuery AJAX
，您可以加载元素
onChange
或
onBlur
等。如果您在没有javascripting的情况下提交表单，您还可以根据选择更改元素。这将处理jQuery表单。您需要仔细阅读，以便了解这一切的意义：

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>

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

我没有看到您尝试过的Javascript代码，但我确实看到，
$id
没有经过安全消毒。@JeremyMiller我在其他地方的表单提交中使用了mysqli\u real\u escape\u string（）。这还不够吗？除非你进行消毒并将其放回
$\u GET['id']
，否则不，这还不够。如果你这样做了，那就是坏习惯。例如，如果您知道它是一个
int
，那么
$id\u sanitized=（int）$\u GET['id']保护您的安全，并且您知道它已在变量命名的b/c中进行了清理。@JeremyMiller我知道这完全脱离主题，但您能告诉我在哪里可以找到有关清理的更多信息吗？”？谢谢，没问题。这个论坛是关于学习的。事实上，这个问题已经被提出了。我建议阅读，因为他们更完整地解决了这个问题。感谢您花时间重写代码。我知道有一种方法可以防止我一遍又一遍地输入几乎相同的行。至于更改值，理想情况下，我希望他将“1”（使其成为一个输入变量）更改为任意数字，并自动更改成分的数量。因此，您需要一个输入字段，有人可以键入一个或两个数字，它将重新加载，并对该服务大小进行计算？所以，如果有人说1份=1克，你希望他能输入3份，然后改成3克？像那样的？没错。我知道这很简单，但我似乎无法理解。好了，现在当单击submit按钮时，表单将
serialize（）
（基本上它收集表单字段中的所有数据），然后将整个内容发送到
lookup.php
页面。然后必须在
lookup.php
页面上创建代码，以返回正确的配方值和计算。