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

【问题标题】：Submit closest form with multiple select forms使用多个选择表单提交最接近的表单
【发布时间】：2014-02-26 19:15:19
【问题描述】：

我在一个页面上有多个名称不同的表单，但在每个表单中我都使用相同的输入名称。

现在我想在您更改选择时提交表单，这有效但仅适用于第一个表单。

    $(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>

怎么了？

【问题讨论】：

标签： jquery forms submit closest

【解决方案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?

【讨论】：

【解决方案2】：

这是因为你不能有多个 HTML 元素具有相同的ID，除此之外，你应该使用字段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>

【讨论】：

【解决方案3】：

ID选择器如“#number_tickets”只匹配第一个元素，使用class或html元素匹配全部：

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

编辑：您似乎也忘记关闭选择标签，否则上面的代码将始终提交第一个表单。

【讨论】：