使用 ajax/Javascript 动态验证用户选择

Posted 2023-05-08

【中文标题】使用 ajax/Javascript 动态验证用户选择

【英文标题】：Dynamically validate user selection using ajax/Javascript

【发布时间】：2015-07-08 09:02:12

【问题描述】：

请看下面我的简单 html 表单。我希望用户从下拉列表中选择产品。之后，继续从下一个下拉列表中选择数量并添加到购物车。

问题来了：在选择数量的时候，我想让系统动态进入数据库（php/mysql），将数据库数量与选择的值进行比较。如果大于库存值（数据库中的总值），则应弹出警告框之类的消息并禁用提交按钮，否则应添加到购物车并启用提交按钮。

我查看了许多 ajax 示例和帮助，但无法获得它。如有必要，将不胜感激样品/修改。

<p>Product Name:<select name="prod_name" size="1">
<option value="Select">Select</option>
<?php
while ($line = mysqli_fetch_array($query, MYSQL_ASSOC))  
 ?>
<option value="<?php echo $line['prod_name'];?>"><?php echo $line['prod_name'];?> </option>  
<?php  ?> 

</select></p>
<p>Quantity:<input  type="number" name="qty"  size="30"  required="required"/></p>
<input name="submit" type="submit" value="Add to Cart" /> | <input name="reset" type="reset" value="Cancel" />

【参考方案1】：

所以，你最好使用 jQuery。首先要做的是在数量变化时触发一些代码

<script>
$( "input[name='qty']" ).change(function() 
    alert( "Handler for .change() called you selected Quantity " + this.value);
);
</script>

【讨论】：

您能否提供数量变化时将触发的代码示例。

顺便说一下，您可能想在这里重新考虑您的策略。我假设您的目标是防止人们在他们的购物篮中添加大量没有库存的商品。问题是，当他们结账时，库存很可能已经发生变化，无论如何您的用户购买都必须修改。在绘制页面之前检查库存值可能会更容易，将下拉列表限制为该数字，以便用户首先无法选择比库存更大的数字。容易得多。但仍然：库存水平可能会随着退房时间而变化。

@Foxbeefly：好策略。谢谢。但是，请给我一个示例代码，使用 php/mysqli 将下拉框限制为库存中的最大数量。

查询您的数据库以获取该项目的可用库存，然后输出您的数量下拉列表，添加一个循环以创建下拉选项，受查询检索的值的限制。非常粗略：$stock_level = get_stock_on_hand_function($productID); echo '<select name="prod_name">': for ($i = 1; $i <= $stock_level; $i++) echo '<option value="'.$i.'">"'.$i.'"</option>'; echo '</select>';

看看我的代码：它不起作用，但是当我硬编码时它起作用了。错误在哪里：

【参考方案2】：

首先，你需要得到你想通过ajax发送的value。然后，您执行服务器端操作，将 与所选值进行比较。 我执行此代码是为了向您展示您应该做什么！ :)

$("#select").change(function() 
    var valueOpt = $("option:selected", this).attr("value");
    $.ajax(
        type: "post",
        url: "YourURL",
        data: yourParams: valueOpt,
        success: function(data) 
            console.log(data);
        
    );
);

通过change event获取值，然后将其传递给yourParams，顺便可以用php:echo $_POST['yourParams']检索这个值。做你的要求，现在比较价值！ :)

【参考方案3】：

你可以这样做：

$('select').on('change', function ()  // Better if you put class in your html tags when your using it in either CSS or JS
    $.ajax(
        url: urlToGetTheResultOfMySQL, // this page must have the query to your database that will receive the data in the AJAX POST
        type: 'POST',
        data 
            qty: this.value // you can get this qty value via $_POST['qty']
        ,
        success: function(data) 
            if (data == 1)  
            /* if you prefer that your logic will only return 1 if the 
               quantity exceeds the in one your database, disabled the  
               submit button, but it's much better to remove the input tag  
               and replace it with just a dummy button */
                $('input[type="submit"]').attr('disabled','disabled'); 
            
        ,
    );
);

希望这有帮助，请问我的代码中是否有模糊的解释，还没有测试过，所以随时问。

【讨论】：

请问对数据库的查询是什么样的，如何发送？这样的东西会起作用吗？$val = "SELECT qty FROM stock WHERE prod_name='".$_GET['prod_name']."'"; $conf = mysqli_query($con,$val); $fetchVal = mysqli_fetch_array($conf); $stock = $fetchVal['prod_name'];

【参考方案4】：

当您更改数量中的值时会发生以下代码，它将运行 ajax 调用以检查数量是否大于您的库存。

<p>Product Name:<select name="prod_name" id="prod_name" size="1">
<option value="Select">Select</option>
<?php
while ($line = mysqli_fetch_array($query, MYSQL_ASSOC))  
?>
<option value="<?php echo $line['prod_name'];?>">
<?php echo $line['prod_name'];?> </option>  
<?php  ?> 

</select></p>
<p>Quantity:<input  type="number" id="qty" name="qty"  
size="30"  required="required"/></p>
<input name="submit" type="submit" id="btn" value="Add to Cart" /> | 
<input name="reset" type="reset" value="Cancel" />

<script>
$('#qty').change(function()
var prodname = $(#prod_name).val();
var qty= $(#qty).val();
$.ajax(
    url: 'your_php_',
    data:prodname: prodname, qty: qty,
    success: function(e)
        if(e == 'true')
            /*if the quantity is greater than the stock*/
            alert('Your MEssage');
            $('#btn').prop('disabled', true);
        else
            $('#btn').prop('disabled', false);
        
    
)
);
</script>

【讨论】：

请问我是 aajx 的新手，所以我需要更多的解释/帮助。第 (2) 行显示错误。即变种。此外，该 url 是将从数据库中获取总库存的 php 脚本。我将如何确定产品。例如 $val = "SELECT qty FROM stock WHERE prod_name='".GET['prod_name']."'; $conf = mysqli_query($con,$val); $fetchVal = mysqli_fetch_array($conf); $stock = $ fetchVal['prod_name']; 请检查我是否在课程中，或者我怎样才能得到这个

检查产品名称，即您获得产品名称的位置。您应该将 $_GET 放入您的查询所在的 php 中

请问我是 ajax 新手，所以我需要更多解释/帮助。第 (2) 行显示错误。即变种。此外，该 url 是将从数据库中获取总库存的 php 脚本。我将如何确定产品。例如 $val = "SELECT qty FROM stock WHERE prod_name='".GET['prod_name']."'; $conf = mysqli_query($con,$val); $fetchVal = mysqli_fetch_array($conf); $stock = $ fetchVal['prod_name']; 请检查我是否在课程中或者有什么办法可以做得更好。另外，请注意这意味着我必须让用户点击，但我认为这不是一个好想法。请帮忙。

我编辑了上面的代码以包含一个数量以将其传递给查询所在的 php。现在我们已经在表格中传递了产品名称和数量。您要做的就是将该产品名称和数量添加到您的 php.ini 文件中。您的查询应检查所选产品库存是否少于数量，您可以回显“真”或“假”，并且在成功的 ajax 中，您的 php 中的结果将检查其真假。

请原谅我的问题，只是我试过了，但仍然没有得到它。这是 URL： url: 'confirmStock.php'，这是内容： 请问我在哪里错过它。