Question

我在django中构建了一个应用程序，我有一个过滤器表单，这是一个下拉菜单，您可以在＆＃34; new＆＃34;之间切换。和＃34;受欢迎＆＃34; （也按日期或投票数过滤）。我决定将这个格式化为按钮（有点像yik yak上的那样），在这两个按钮之间切换更容易。

我正在使用django小部件调整来显示我的表单，所以我生成的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>

更新：我尝试编写这个javascript函数来选择我的表单中的选项

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

最后，在我的HTML模板中，我有两个按钮

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

当我点击按钮时，我的表单中的所选选项会发生变化，但它没有提交，这对我来说没有意义，因为它应该在选项更改时自动提交。有什么想法吗？

Answer 1

仍然不确定为什么表单没有自动提交onchange="this.form.submit();"，但我最终在表单中添加了一个名称属性

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

然后添加到我的javascript函数

document.filter-form.submit();

现在它有效！为了完成它，我用<div class="hidden">包装了filterType字段，一切看起来都很完美！

javascript函数选择选项并提交django表单

1 个答案: