重置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不重新加载页面

回答

相关问题