2016-07-18 4 views
0

私はdjangoでアプリケーションを構築していますが、ドロップダウンリストのフィルタフォームがあり、 "new"と "popular"の間で切り替えることができますまたは投票数)。私はこれをボタンのようにフォーマットすることを決めました。(これはyik yakのようなものです)、2つの間で切り替えるのが簡単です。オプションを選択してdjangoフォームを送信するためのjavascript関数

私は生成されたHTMLがどのように見えるので、私のフォームを表示するには、ジャンゴウィジェットの調整を使用しています:

<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:私は私の形で

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

を選択を選択するには、このjavascript関数を書いてみました最後に私のHTMLテンプレートには2つのボタンがあります

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

ボタンを押すと、フォームの選択されたオプションが変更されますが、送信されません。オプションが変更されたときに自動的に送信されるはずなので、私には意味がありません。何か案は?それでも

答えて

1

フォームが自動的にonchange="this.form.submit();"に提出されなかったが、私は自分のフォーム

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

にname属性を追加することになった。そして

document.filter-form.submit(); 

、今の私のjavascript機能を追加した理由ではないことを確認できます!そしてそれを完成させるために、私は<div class="hidden">とfilterTypeフィールドをラップし、すべてが見える/完璧に動作する!

関連する問題