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

Question

请看下面我的简单 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" />

Answer 1

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

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

Answer 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']检索这个值。做你的要求，现在比较价值！ :)

Answer 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'); 
            }
        },
    });
});

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

Answer 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>