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

Question

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

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

有人知道我做错了什么吗？

填充选择框

     <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。考虑以下几点：

1. 用户为产品A选择了一些选项。
2. 用户决定购买产品B，并按此产品的提交。
   1. 产品A 是最后更改的，因此产品A 被提交。

Answer 2

您使用事件委托来设置以下内容，以便在将选择内容添加到 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();
    }); 
});