CODEWITHSUNDEEP
javascriptdjango
Catherine
Catherine

Reputation: 251

javascript function to select option and submit a django form

I'm building an app in django and I've got a filter form that is a dropdown and you can switch between "new" and "popular" (aka filter by date or number of votes). I decided that I want this to be formatted as buttons (kind of like how it is on yik yak) where it is easier to toggle between the two.

I am using django widget tweaks to display my forms so my generated HTML looks like:

<form action="/board/Intuna/" method="post" class="ng-pristine ng-valid"> 
    <input type="hidden" name="csrfmiddlewaretoken" value="io55AwNMPKNzAkv69qWkcRzqNV7mwo1w">
    <div class="form-group">
        <label class="col-sm-1 control-label" for="id_filterType">Filter By</label>
         <div class="col-sm-11">
             <select class="form-control" id="id_filterType" name="filterType" onchange="this.form.submit();">
                 <option value="0" selected="selected">Most Recent</option>
                 <option value="1">Popularity</option>
             </select>
         </div>
     </div>
 </form>

UPDATE: I tried writing this javascript function to select the choice in my form

function filter(valueToSelect) {
    var item = document.getElementById('id_filterType');
    console.log(item);
    if (item) {
        item.value = valueToSelect;
    }
}

And lastly in my HTML template I have two buttons

<button class="btn btn-primary" onclick="filter('0');">New</button>
<button class="btn btn-primary" onclick="filter('1');">Hot</button>

When I click the buttons, the selected option in my form changes but it doesn't submit, which does not make sense to me since it is supposed to automatically submit when the option is changed. Any ideas?

Upvotes: 1

Views: 1461

Answers (1)

Catherine
Catherine

Reputation: 251

Still not sure why the form was not automatically submitting with onchange="this.form.submit();" but I ended up adding a name attribute to my form 

<form action="/board/Intuna/" method="post" class="ng-pristine ng-valid" name="filter-form">

And then added to my javascript function 

document.filter-form.submit();

and now it works! And to finish it up I wrapped the filterType field with <div class="hidden"> and everything looks/works perfectly!

Upvotes: 1

Related Questions