2016-06-01 112 views
0

我希望這個表單在頁面加載後提交,並且我使用下面的代碼來完成它。問題在於頁面不斷重新加載並停留在該循環中。'Submit'onload進入循環

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> 
+1

您需要在您的形式 –

+1

設置一個動作你將永遠無法因爲這個不提交作出一些改變訪問此頁面。我們不知道這些確切的變化需要做什麼,因爲所有這些的預期流程沒有問題 – charlietfl

回答

3

現狀問題

目前的問題並沒有真正提供足夠的信息爲一個很好的答案,因爲我們不知道任何 1)凡形式提交到 2)提交時表單應該做什麼

一旦這些被添加,那麼這個答案可以進一步改善。

回答

你需要,如果你想讓它做什麼要補充的一個動作爲形式。此外,我不明白爲什麼你想提交一個表單之前,用戶可以輸入任何東西。

目前該表格沒有任何意義。它有效地作爲重定向到你已經在的頁面,因爲默認action="#"(我認爲)。

AJAX

爲了做到提交表單沒有這個重載循環的equivelant,要使用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學校

+0

它是一個顯示電影集合的網站。如果表單沒有提交,則只有表單提交後纔會出現電影。我希望在頁面根據select的值加載後立即顯示電影。我添加了一個動作,但仍然是相同的結果。 – 0248881

+0

然後,我認爲你想要AJAX。我會將其添加到我的答案中。 – thesecretmaster

+0

@ RQ14有沒有包含一些代碼?請包含所有相關的javascript,因爲目前提交表單不會改變網站上的任何內容,只會將表單提交到您已經在的頁面上,不做任何更改。首先請讓我們知道1)表單提交到哪裏,2)頁面提交的值是什麼。 – thesecretmaster

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