提交多個選擇表格的最接近的形式

Question

我有一個不同的名稱在一個頁面上的多個表單，但在每個表單中我使用相同的輸入名稱。

現在我想提交表單，當你改變選擇，這個作品，但只適用於第一種形式。

$(function() { 
     $("#number_tickets").live("change keyup", function() { 
      $(this).closest('form').submit(); 
     }); 
    }); 


<form name="form-1" id="form-1" enctype="multipart/form-data" action="order/submit/1/" method="post" class="form_count"> 
<input type="hidden" name="id" value="'.htmlspecialchars($row2['id']).'"> 
<select name="number_tickets" id="number_tickets"> 
    <option selected disabled>Choose..</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    </form> 

<form name="form-2" id="form-2" enctype="multipart/form-data" action="order/submit/2/" method="post" class="form_count"> 
<input type="hidden" name="id" value="'.htmlspecialchars($row2['id']).'"> 
<select name="number_tickets" id="number_tickets"> 
    <option selected disabled>Choose..</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    </form> 

<form name="form-3" id="form-3" enctype="multipart/form-data" action="order/submit/3/" method="post" class="form_count"> 
<input type="hidden" name="id" value="'.htmlspecialchars($row2['id']).'"> 
<select name="number_tickets" id="number_tickets"> 
    <option selected disabled>Choose..</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    </form> 

什麼是錯？

Answer 1

html元素的Id應該是唯一的。 .live()已經被認爲是處理事件綁定的低效方式，因爲爲了將來的使用，您必須使用.on()。嘗試：

$(function() { 
     $("select[name='number_tickets']").on("change keyup", function() { 
      $(this).closest('form').submit(); 
     }); 
    }); 

http://webdesign.about.com/od/css/f/blfaqmultiIDs.htm

What's wrong with the jQuery live method?

Answer 2

這是因爲您不能使用相同的ID多個HTML元素，除此之外，您應改爲使用字段NAME替代選擇器。 您應該嘗試更改SELECT字段的ID。

$(function() { 
     $("*[name='number_tickets']").live("change keyup", function() { 
      $(this).closest('form').submit(); 
     }); 
    }); 


<form name="form-1" id="form-1" enctype="multipart/form-data" action="order/submit/1/" method="post" class="form_count"> 
<input type="hidden" name="id" value="'.htmlspecialchars($row2['id']).'"> 
<select name="number_tickets" id="number_tickets1"> 
    <option selected disabled>Choose..</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    </form> 

<form name="form-2" id="form-2" enctype="multipart/form-data" action="order/submit/2/" method="post" class="form_count"> 
<input type="hidden" name="id" value="'.htmlspecialchars($row2['id']).'"> 
<select name="number_tickets" id="number_tickets2"> 
    <option selected disabled>Choose..</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    </form> 

<form name="form-3" id="form-3" enctype="multipart/form-data" action="order/submit/3/" method="post" class="form_count"> 
<input type="hidden" name="id" value="'.htmlspecialchars($row2['id']).'"> 
<select name="number_tickets" id="number_tickets3"> 
    <option selected disabled>Choose..</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    </form> 

Answer 3

ID選擇如「#number_tickets」只匹配第一個元素，使用類或html元素，以匹配所有：

$(function() { 
    $("select").live("change keyup", function() { 
     $(this).closest('form').submit(); 
    }); 
}); 

編輯：另外，你似乎忘記關閉選擇標籤，否則上述代碼將始終提交第一個表單。