Question

我有一个带有两个选择元素的表单，用户可以在其中选择产品变体（例如红色，绿色，蓝色衬衫）和数量。

在更改变体/数量时，我会进行AJAX请求以获取价格。

复杂的部分是：每个变体都有自己的价格和数量。例如，红色衬衫的价格为10美元，而最低数量为5（10、15…）。绿色衬衫15美元，但数量从3（6，9…）起。

（颜色/衬衫只是一个例子，真正的产品是路灯的控制单元：-）

问题是，当默认值为“红色”和“ 5”并且我更改为“绿色”时，价格显示75美元（AJAX查询为绿色+5）。但是绿色只有3、6、9等数量。

我可以从我的AJAX请求中返回最小数量，但这样用户在更改数量选择时就无法更新价格。

我看到的唯一解决方案是制作两个doSubmit（）函数和两个SubmitAjax（）。但这意味着我有很多重复的代码。

HTML

<form action="" id="product_selection">
    <select name="product_variation">
        <option value="r">Red</option>
        <option value="g">Green</option>
        <option value="b">Blue</option>
    </select>
    <select name="product_quantity">
        <option value="">10</option>
        <option value="">20</option>
        <option value="">30</option>
    </select>
</form>

JavaScript

// Product variation, quantity select dropdown
var product_selection = document.querySelector('#product_selection');
var product_variation = document.querySelector('#product_variation');
var product_quantity = document.querySelector('#product_quantity');

// Event listener to submit the form on change
product_selection.addEventListener('submit', submitAjax);
product_variation.addEventListener('change', doSubmit);
product_quantity.addEventListener('change', doSubmit);

// Submit form
function doSubmit(event) {
    product_selection.dispatchEvent(new Event('submit')); // product_selection.submit();
}

// Handle ajax submit
function submitAjax(event) {

    // Stop default form submit
    event.preventDefault();

    // Ajax request
    $.ajax({
        url: '/static/public/ajax/get_product_data.php',
        type: 'POST',
        data: $('#product_selection').serialize(),
        success: function(result) {
            if (result == 0) {
                alert('Sorry');
            } else {
                setProductData(result);
            }
        },
        error: function(jqxhr, status, exception) {
            alert('Sorry');
        }
    })
}

// Update product details
function setProductData(result) {
    $('#product_price').html(result.price_gross);

    // Remove current quantity options
    var product_quantity = document.getElementById("product_quantity");
    for(i = product_quantity.options.length - 1 ; i >= 0 ; i--) {
        product_quantity.remove(i);
    }
    // … reapply new quantity options
    var c = 0;
    for (var i = result.minimum; i <= result.maximum; i+=result.graduation) {
        product_quantity.options[c] = new Option(i + ' ' + pwjs.product.unit, i);
        if (result.product_quantity == i) {
            var setselectedIndex = c;
        }
        c++;
    }
    // product_quantity.selectedIndex = setselectedIndex;
}

Answer 1

我想您应该分步进行，所以product_variation.addEventListener('change', doSomethingElse);

那么您的选择将类似于：

<select name="product_variation">
    <option data-increment="5" value="r">Red</option>
    <option value="g">Green</option>
    <option data-increment="3" value="b">Blue</option>
</select>

然后，当product_variation更改doSomethingElse时，将重建product_quantity选择，以获取所选increment的{{1}}值

Answer 2

据我所知，您正在使用jQuery。因此，我将举一个如何实现此目标的示例。

HTML

首先，不要忘记为您的选择选项指定值，您的product_quantity值为空。另外，我建议您创建一个额外的选项标签，将其作为默认选择的选项，并稍后再验证您的表单。

<form action="" id="product_selection" name="product_selection">
    <select name="product_variation">
        <option value="">Select color</option>
        <option value="r">Red</option>
        <option value="g">Green</option>
        <option value="b">Blue</option>
    </select>
    <select name="product_quantity">
        <option value="">Select quantity</option>
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
    </select>
</form>

JavaScript

对于JavaScript，我建议您为最后一个输入添加事件监听器，即product_quantity。

$("#product_selection").submit(function(e){
   e.preventDefault();
   var inputs = document.product_selection;
   if( inputs.product_variation.value != "" && inputs.product_quantity.value != "" ){
     $.ajax({
        url: '/static/public/ajax/get_product_data.php',
        type: 'POST',
        data: $('#product_selection').serialize(),
        success: function(result) {
            if (result == 0) {
                alert('Sorry');
            } else {
                setProductData(result);
            }
        },
        error: function(jqxhr, status, exception) {
            alert('Sorry');
        }
      });
   }
});

带有两个选择元素的复杂AJAX更新

2 个答案:

HTML

JavaScript