CODEWITHSUNDEEP
javascriptjqueryhtml
J.Zil
J.Zil

Reputation: 2449

Submit form on select change

This is my code: http://jsfiddle.net/47apf/

It should submit the form on select change but it doesnt do anything 

$(function() {
    $('#candidate_filter').change(function() {
        this.form.submit();
    });
});

Can anyone please explain why this code doesn't work?

Upvotes: 0

Views: 1601

Answers (7)

jcobarbosa
jcobarbosa

Reputation: 36

Try:

$(function() {
    $('#candidate_filter select[name="vacancy"]').change(function() {
        $('#candidate_filter').submit();
    });
});

Inside jQuery selectors, the this word references to the selected element on DOM, in you original code, $('#candidate_filter') represents the FORM element. Adding a second reference you have a better approach to what you desire $('#candidate_filter select[name="vacancy"]'). And to submit the form, you need to point especifically to the FORM element.

Upvotes: 1

darksioul
darksioul

Reputation: 156

You can do like this in jQuery.

Put a class on your select, and bind the event onchange

 $('.candidateList').on('change', function(evt){
    $('#candidate_filter').submit();
});

http://jsfiddle.net/darksioul/4ygAg/2/

Upvotes: 1

Sid M
Sid M

Reputation: 4364

Try this

$('#candidate_filter').change(function() {
        //alert("hii");
        this.submit();
    });

Fiddle: fiddle

Upvotes: 3

Nicolas Henrard
Nicolas Henrard

Reputation: 843

You have to submit the form like this: $('#candidate_filter').submit();

Here is a working JSFiddle: http://jsfiddle.net/47apf/5/

JQuery 

$(function() {
    $('#candidate_filter').change(function() {
        alert("change event catched");
         $('#candidate_filter').submit();
    });
});

Upvotes: 1

Amit
Amit

Reputation: 15387

You need to assign id of drop down as below: 

    <form id="candidate_filter">
    <select name="vacancy" id="candidate_filter1">
    <option value="all">Any Vacancy</option>
    <option value="1">Engineering lk;lk;</option>
    </select>
    <select name="status" id="candidate_filter2">
    <option value="all">Any Status</option>
    <option value="open">Open for applications</option>
    <option value="closed">Closed for applications</option>
    <option value="inactive">Inactive</option>
    </select>
    <select name="date">
    <option value="all">Any Date</option>
    <option value="today">Today</option>
    <option value="3">3 days</option>
    <option value="7">This week</option>
    </select>
    <select name="consideration" id="candidate_filter3">
    <option value="all">Any Consideration</option>
    <option value="qualified">Qualified</option>
    <option value="rejected">Rejected</option>
    </select>
    <input type="submit">
    </form>

JS

    $(function() {
        $('select[id^="candidate_filter"]').change(function() {
            this.form.submit();
        });
    });

DEMO

Upvotes: 1

Daniel Schmidt
Daniel Schmidt

Reputation: 11931

Well, you don't need the .form in this case.

$(function() {
  $('#candidate_filter').change(function() {
    this.submit();
  });
});

Upvotes: 5

codingrose
codingrose

Reputation: 15709

Here, this itself is the form.

Write this:

$('#candidate_filter').change(function() {
    $(this).trigger('submit');
});

Updated fiddle here.

Upvotes: 4

Related Questions