使用動態創建的選擇框提交表單

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