I want to sumbit a form which have a drop down option using jquery

Question

I have been trying to do some staffs. I am trying to submit a form using jQuery. Here is my code. Please take a look at them.

My aim is that when a user clicks on any drop down option the form will be submitted then. I have been searching for a long time but can't find solution of my specific problem. If you find this question similar to any other question asked please comment the link.

I am kinda new in jQuery. Any help will be appreciated.

HTML:

<form method="post" action="#" id="opart">
  <select name="sort_out" class="sort_tool">
    <option value="low-price">Sort Out Products By...</option>
    <option id="oparst" value="high-price">Price High to Low</option>
    <option value="low-price">Price Low to High</option>
    <option value="low-model">Model Name A-Z</option>
    <option value="high-model">Model Name Z-A</option>
    <option value="low-brand">Brand Name</option>
  </select>
</form>

jQuery:

$('#oparst').click(function(){
    $('#opart').submit();
});

possible duplicate of [Can multiple different HTML elements have the same ID if they're different types?](http://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-types) — user229044, Dec 28 '14 at 05:02
I deleted 2 of the id "oparst" and kept one(I kept the id at prict high to low option). Then I run the code and clicked the option price high to low. But still no luck. Can you please elaborate it? — Shubroto debnath Shuvo, Dec 28 '14 at 05:06

Mooseknuckles · Accepted Answer · 2014-12-28T05:09:45.277

0

This can easily be done like this:

<select name="sort_out" class="sort_tool" onchange="this.form.submit()">
  <option> ... </option>
  <option> ... </option>
</select>

edited Dec 28 '14 at 05:09

answered Dec 28 '14 at 05:03

Mooseknuckles

497
3
7

score 0 · Answer 2 · answered Dec 28 '14 at 05:07

0

ID should be unique.

Use change instead of using click.

$('#oparst').change(function(){
   var value = $(this).val();
   if(value == 'something'){
      $('form#opart').submit();
   }
});

answered Dec 28 '14 at 05:07

atiquratik

1,296
3
27
34

score 0 · Answer 3 · edited May 01 '16 at 15:53

Try this

HTML

<form method="post" action="#" id="opart">
 <select name="sort_out" class="sort_tool" id="chartName">
  <option id="oparst1" value="low-price">Sort Out Products By...</option>
  <option id="oparst2" value="high-price">Price High to Low</option>
  <option id="oparst3" value="low-price">Price Low to High</option>
  <option value="low-model">Model Name A-Z</option>
  <option value="high-model">Model Name Z-A</option>
  <option value="low-brand">Brand Name</option>
 </select>
</form>

jQuery

$(function () {
 $("#chartName").click(function (e) {
    $('#opart').submit();
 });
});

I want to sumbit a form which have a drop down option using jquery

3 Answers3