CODEWITHSUNDEEP
djangoformsdrop-down-menu
Andrew
Andrew

Reputation: 1040

Django form submit on dropdown selection rather than submit button

I have a table with lots of job data, and I have a dropdown menu and a submit button, which acts as a filter, so that the table only displays jobs based on the filter:

<form>
    <select id="user_id_dropdown" name="user_id">
        <option disabled selected>Filter by Username</option>
        <option value="all">All Usernames</option>
        <option disabled>────────────</option>
        {% for user in users %}
            <option value={{ user.id }}>{{ user.username }}</option>
        {% endfor %}
    </select>
    <input id="filter" class="btn btn-primary" type="submit" value="Filter" />
</form>

<table>
...

How I've done it with the button is such that the user_id of the username is passed as a query string and my view handles it. Upon selecting a username (say it's user_id is 4) and clicking the submit button, the url is:

http://...jobs?user_id=4

Then I have a table below where all the jobs displayed are now only those created by user_id 4.

The thing is, now I just want to do away with the submit button and just submit the form on dropdown selection.

I've tried to give the form a name and to submit when there is a change on selection:

<form name='filter' method=POST>
    <select id="user_id_dropdown" name="user_id" onChange="filter.submit();">
    ...

But this doesn't seem to work. It does seem like the page reloads (similar to the submit button), but the table data doesn't change. What am I missing out here?

Upvotes: 6

Views: 8870

Answers (2)

shellbye
shellbye

Reputation: 4828

I tried this:

onChange="form.submit();"

and it worked. Seems the name is not necessary.

Upvotes: 11

Erik
Erik

Reputation: 832

Try putting this on your onchange attr:

document.filter.submit();

If this fails, give your form an ID attribute and do:

document.getElementById('youFormId').submit();

You could also send it as a GET paramenter like:

onchange="window.locatio.href+='?v='+this.value;"

By the way this question has little relation with Django, you should tag it html/javascript next time you ask about this kind of stuff.

Upvotes: 0

Related Questions