概括为多种形式

Question

我正在尝试在包含多个表单的页面上提交表单。表单需要从选择/下拉框中提交值。此选择框是动态填充的。一切正常但似乎脚本没有提交第一个选项。我需要更改选择框然后才能工作。当我不更改选择框时，不会提交任何内容。

我尝试选择第一个选项，但这也不起作用。

任何人都知道我做错了什么？

POPULATE SELECT BOXES

     <script type="text/javascript">  
       $(document).ready(function(){            
        $.getJSON('product.html?format=json', function(data){              
         $.each(data.product.variants, function (index, variant) {
           $('#product_123').append(new Option('' + variant.title + ' (€'+ variant.price.price +')', '' + variant.id + ''));
            });                
           }); 
         }); 
      </script>

HTML

    <select id="product_123"></select>

     <a href="#" class="actionbutton prodorderbtn submit">Order</a>
 </form>

提交

 <script>     
     $("#product_123").change(function(){
      var pvid = $('option:selected', $(this)).val();

      $(".submit").on("click", function(e){
       e.preventDefault();
       $("#formProduct123").attr("action", "/cart/add/" + pvid).submit();
        return false;
       });
     });
  </script>

Answer 1

问题在于提交位：

 <script>     
     $("#product_123").change(function(){
      var pvid = $('option:selected', $(this)).val();

      // on click handler is set every time the option changes
      $(".submit").on("click", function(e){
       e.preventDefault();
       $("#formProduct123").attr("action", "/cart/add/" + pvid).submit();
        return false;
       });
     });
  </script>

注意点击处理程序是如何嵌套在change中的。这意味着在进行更改之前，不会注册任何点击处理程序。

我提出以下解决方案：只需检查用户提交时的值，而不是更新处理程序。

var product = $('#product_123'); var form = $('#formProduct123'); // Set the handler once at the start, and check the value at the time of submit. $('.submit').on('click', function(){ e.preventDefault(); var pvid = $('option:selected', product).val(); form.attr('action', '/cart/add/' + pvid).submit(); return false; });

概括为多种形式

我们仍然会在开始时设置一次onclick处理程序。在点击期间，我们会查找父表单和兄弟选项。请验证此DOM遍历是否适合您。

$('.submit').on('click', function(){ e.preventDefault(); var submit = $(this); var form = submit.parents('form').first(); var selected = form.find('option:selected'); var pvid = selected.val(); form.attr('action', '/cart/add/' + pvid).submit(); return false; });

我强烈建议你放弃onchange。请考虑以下事项：

用户为产品A选择一些选项。

用户决定购买产品B，然后按此提交产品。

产品A是最后一次更改，因此产品A会被提交。

Answer 2

您可以使用use event delegation设置以下内容，以便在将选择内容添加到DOM时不必运行代码：

$(function() {
     $(document).on('change',"#product_123", function(){
        var pvid = this.value;
        var form = this.form;
        $(form).attr('action', '/cart/add/' + pvid);
        form.submit();
    });
});

在附加选择之后，运行以下代码：

$('#product_123').change();

应该这样做。实际上，您的组合代码变为：

$(function() {
     $(document).on('change','#product_123', function(){
        var pvid = this.value;
        var form = this.form;
        $(form).attr('action', '/cart/add/' + pvid);
        form.submit();
    });

    $.getJSON('product.html?format=json', function(data){              
        $.each(data.product.variants, function (index, variant) {
            $('#product_123').append(new Option('' + variant.title + ' (€'+ variant.price.price +')', '' + variant.id + ''));
        });
        $('#product_123').change();
    }); 
});

使用动态创建的选择框提交表单

2 个答案:

概括为多种形式