重置innerHTML不重新加載頁面

我寫了一個小小的個性測驗。一旦你選擇從下拉菜單的答案並提交表單（id="quizgenerator），窗體本身被結果替換爲下面的代碼行的幫助：重置innerHTML不重新加載頁面

document.getElementById('quizgenerator').innerHTML = "<p id='result' 
align='center'><b>" + result + "</b></p>";

到目前爲止，一切都很好。現在到我無法弄清的棘手部分：我希望人們能夠「回到」表單並再次參加測驗，更改答案並重新提交，以查看可能會導致什麼結果，然後不重新加載頁面。

我不能添加一個復位按鈕的形式，如表格由結果置換。所以現在我在窗體外面添加了一個重置按鈕：

<input type="reset" value="Reset" id="submit" onClick="history.go(0);">

這有效，但它重新加載頁面。有沒有辦法重置innerHTML部分而無需重新加載？

我已經尋找答案的網站，但在所有這些情況下，復位按鈕總是形式的一部分。

來源

2013-04-15 Croco2511

而不是替換html，只是隱藏/顯示兩個不同的div。一個包含表單，另一個包含結果。 – smerny

你只是想擦除表單域中的內容，然後再次顯示錶單，或者你想要一個「粘性」表單，它保留已經在表單域中輸入的內容，然後再次顯示錶單？ – orb

不能恢復到以前的狀態HTML無需重新加載。然而，你可以做的是你在替換表單時所做的同樣的事情。只有這次你用原始形式替換結果。您可以選擇在代碼的該部分再次添加相同的表單代碼，或者可以保存quizgenerator元素的innerHTML，將其保存在變量中，並在需要「重置」時將其放回。

來源

2013-04-15 18:38:38

下面是一些簡單的代碼，說明我的評論。

http://jsfiddle.net/Bk8rH/

$("#formsubmit").click(function() { 
    $("#myform").hide(); 
    $("#myresults").text($("#mytext").val()); 
    $("#myresultsWrap").show(); 
}); 
$("#toform").click(function() { 
    $("#myresultsWrap").hide(); 
    $("#myform").show(); 
});

當然，你可以把它票友，加入你自己的數據，也許清除表單如果用戶回去吧，等但這應該給你的想法。

來源

2013-04-15 18:55:17 smerny

感謝您的幫助。這對我有意義。但是，我一定在做錯事，因爲它對我不起作用。我看到jQuery 1.9.1被用於你的例子工作。所以我加' '到文件頭部。但沒有運氣。你能否在這裏給我另一個提示。非常感激。謝謝！ – Croco2511

很難說，不知道你的上下文......你有代碼文件就緒塊嗎？ – smerny

重置innerHTML不重新加載頁面

回答

相關問題