'Submit'onload进入循环

时间:2016-06-01 00:06:50

标签: javascript jquery html

我想在页面加载后提交此表单,并且我已使用以下代码执行此操作。问题是页面继续重新加载并保持在该循环中。

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>

2 个答案:

答案 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>

Fiddle