Let's say I've got a drop down like this:

<div class="selector">
    <select name="perPage">
        <option value="5">5</option>
        <option value="10">10</option>
        <option value="15">15</option>
        <option value="25">25</option>
    </select>
</div>

I'm know PHP and Javascript (jQuery) so a solution in either would be just fine. But I've got a submit button underneath it, and instead of that, I was wondering if there's a way to click the drop down, pick your value, then have it send that automatically with OUT having to hit a submit?

Let's say I've got a drop down like this:

<div class="selector">
    <select name="perPage">
        <option value="5">5</option>
        <option value="10">10</option>
        <option value="15">15</option>
        <option value="25">25</option>
    </select>
</div>

I'm know PHP and Javascript (jQuery) so a solution in either would be just fine. But I've got a submit button underneath it, and instead of that, I was wondering if there's a way to click the drop down, pick your value, then have it send that automatically with OUT having to hit a submit?

• javascript
• jquery
• html
• forms

4 Answers 4

You could use the 'onchange' element of the select:

<select name="dropdown" id="dropdown" onchange="this.form.submit()">

This only uses javascript without the need of loading the whole JQuery library - unless you use JQuery for other functions on the site.

You can listen to the change event using jQuery and submit the parent form automatically. Something like this:

$('.selector select[name=perPage]').on('change', function(e) {
    $(e.currentTarget).closest('form').submit();
});

Assign an id to to select, e.g. selectID, then add jQuery of the form:

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

$('select[name="perPage"]').on('change', submitForm);

where submitForm is a function that submits the form.