提交多个选择表格的最接近的形式

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

编辑：另外，你似乎忘记关闭选择标签，否则上述代码将始终提交第一个表单。