使用多个选择表单提交最近的表单

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

编辑:你似乎忘了关闭选择标签，否则上面的代码总是提交第一个表单。