Question

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

这是一个问题：在选择数量时，我希望系统动态转到数据库（PHP / MYSQL），将数据库数量与所选值进行比较。如果它大于股票价值（DB中的总值），那么它应该弹出一条消息，如警告框并禁用提交按钮，否则它应该添加到购物车并启用提交按钮。

我看了很多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

首先，您需要通过value获取要发送的ajax。然后，您将服务器端操作与所选值进行比较。我做这个代码来告诉你你应该做什么！：）

$("#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

当您更改数量中的值时，会发生以下代码，并且会运行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>

Answer 4

您可以执行以下操作：

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

希望这会有所帮助，只要问我代码中是否有模糊的解释，但尚未对其进行测试，请随时提出。

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

4 个答案: