Отправить ближайшую форму с несколькими формами выбора

У меня есть несколько форм на одной странице с другим именем, но в каждой форме я использую одно и то же имя ввода.

Теперь я хочу отправить форму при изменении выбора, это работает, но только для первой формы.

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

Что случилось?


forms jquery submit closest
person tom    schedule 26.02.2014    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Идентификаторы 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

Что не так с живым методом jQuery?

person Unknown    schedule 26.02.2014

arrow_upward
1
arrow_downward

Это связано с тем, что у вас не может быть нескольких элементов HTML с одним и тем же ID, кроме того, вы должны изменить селектор, используя вместо этого поле NAME. Вы должны попытаться изменить идентификаторы полей SELECT.

$(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>
person Amin Abu-Taleb    schedule 26.02.2014

arrow_upward
0
arrow_downward

Селекторы ID, такие как "#number_tickets", соответствуют только первому элементу, используйте элемент class или html для соответствия всем:

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

РЕДАКТИРОВАТЬ: Также вы, похоже, забыли закрыть теги select , иначе приведенный выше код всегда будет отправлять первую форму.

person Wilmer    schedule 26.02.2014