我想在页面加载后提交此表单,并且我已使用以下代码执行此操作。问题是页面继续重新加载并保持在该循环中。
HTML
<body onload="document.getElementById('filters').submit();">
<form id="filters" method="post">
<section>
<select id="Genre" name="genres" >
<option value="Select Genre">Select Genre</option>
<option value="All">All</option>
{% for row in genre %}
<option value="{{row.genre}}">{{row.genre}}</option>
{% endfor %}
</select>
<select id="Rating" name="ratings" >
<option value="Select Rating">Sort by Rating</option>
<option value="Best">Best</option>
<option value="Rating_IMDB">IMDB</option>
<option value="Rating_RT">Rotten Tomatoes</option>
</select>
</section>
</form>
</body>
答案 0 :(得分:3)
问题的当前状态
目前,这个问题并没有为一个好的答案提供足够的信息,因为我们也不知道 1)表格提交的地方 2)提交时表格应该做什么
一旦添加了这些,那么这个答案可以进一步改进。
答案
如果您希望该表单执行某些操作,则需要为该表单添加操作。此外,我无法理解为什么要在用户输入任何内容之前提交表单。
目前表格毫无意义。它有效地作为重定向到您已经使用的页面,因为默认情况下action="#"
(我认为)。
AJAX
为了在没有此重新加载循环的情况下提交表单,您需要使用AJAX。这会将异步请求汇总到服务器,并且实际上并未在浏览器中加载页面。方法如下:
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("POST", "Where_you_are_submitting_form_to", true);
xhttp.send();
}
来源:w3学校
答案 1 :(得分:0)
您需要在表单中添加“操作”。
<body onload="document.getElementById('filters').submit();">
<form id="filters" method="post" action="path">
<section>
<select id="Genre" name="genres">
<option value="Select Genre">Select Genre</option>
<option value="All">All</option>
{% for row in genre %}
<option value="{{row.genre}}">{{row.genre}}</option>
{% endfor %}
</select>
<select id="Rating" name="ratings">
<option value="Select Rating">Sort by Rating</option>
<option value="Best">Best</option>
<option value="Rating_IMDB">IMDB</option>
<option value="Rating_RT">Rotten Tomatoes</option>
</select>
</section>
</form>
</body>