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元素应该是唯一的。 .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();
    });
});

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

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

3 个答案: