Submit closest form with multiple select forms

Question

I have multiple forms on one page with a different name but in every form i use the same input name.

Now i want to submit the form when you change the select, this works but only for the first form.

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

What is wrong?

Answer 1

Id's of html elements should be unique. .live() was already considered an inefficient way to handle event binding, Because of that for future use you have to use .on(). Try:

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

That's because you can't have multiple HTML elements with the same ID, apart from that, you should change the selector using the field NAME instead. You should try to change the ID's of the SELECT fields.

$(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 selectors such as "#number_tickets" only match the first element, use a class or html element to match all:

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

EDIT: Also you seem to have forgotten to close the select tags , otherwise the above code will always submit the first form.