如何仅重置texbox，而不重置整个页面？
[英]How to reset just texbox, not the entire page?
问题描述
I am trying to create a posting/commenting system. 
我正在尝试创建一个发布/评论系统。 It does most of what I want. 它可以满足我的大部分需求。 Now, I want to have just the textbox reset, not the whole page. 现在，我只想重置文本框，而不是整个页面。 Skeleton code is preset by CodePen. 骨架代码由CodePen预设。 (More explanation with the code sample) （有关代码示例的更多说明）
HTML: HTML：
<form id="frmPost" name="write">
<div class="textbox">
<input class="postwriter" name="post" type="text" placeholder="What's on your mind?" id="txtPost">
<button id="btnPost" onclick= "return write_below(this); resetText();" value="submit" >Post</button>
</div>
</form>
<div class="posts" id="postDisplay">
<p class="para"><span id='display'></span></p>
</div>
JS: JS：
function resetText() {
document.getElementById('txtPost').value="";
//return false;
}
function write_below(form){
var input = document.forms.write.post.value;
//document.getElementById('display').innerHTML += input + "<br/>" + "<br/>";
document.getElementById('display').innerHTML += "<p>" + Math.floor(Math.random()*20) + ": " + input + "</p>" + "<br/>";
return false;
}
Like this, the post is kept but the textbox is reset. 这样，帖子将保留，但文本框将重置。 If I get rid of/comment out the second return false; 如果我放弃/注释掉第二个，则return false; the entire page resets. 整个页面重置。
3 个解决方案
解决方案1
2 已采纳 2016-12-15 21:25:52
All you have to do is call resetText() from write_below() 所有你需要做的就是调用resetText()从write_below()
function resetText() { document.getElementById('txtPost').value=""; } function write_below(form){ var input = document.forms.write.post.value; document.getElementById('display').innerHTML += "<p>" + Math.floor(Math.random()*20) + ": " + input + "</p>" + "<br/>"; resetText(); return false; }
<form id="frmPost" name="write"> <div class="textbox"> <input class="postwriter" name="post" type="text" placeholder="What's on your mind?" id="txtPost"> <button id="btnPost" onclick= "return write_below(this);" value="submit" >Post</button> </div> </form> <div class="posts" id="postDisplay"> <p class="para"><span id='display'></span></p> </div>
解决方案2
0 2016-12-15 19:37:05
When you click a submit button, the default action of a form is to make a request. 单击提交按钮时，表单的默认操作是发出请求。 If there is no destination specified in your <form action=""></form> , the default location is "/" (the current page). 如果在<form action=""></form>未指定目的地，则默认位置为"/" （当前页面）。 This will reload the page. 这将重新加载页面。
When you say return false you are returning a false value to the caller (the form). 当您说return false您将向调用方（窗体）返回一个false值。 This refuses the form to submit properly, thus preventing a reload. 这会拒绝正确提交表单，从而阻止重新加载。
Leave the return false; 保留return false; in there to achieve your result. 在那里实现您的结果。
解决方案3
0 2016-12-16 06:35:42
Why to write a lengthy JavaScript or JQuery 为什么要编写冗长的JavaScript或JQuery
You can put clear button with type 'reset'. 您可以将清除按钮的类型设置为“重置”。 It will clear your all form field without reloading the webpage. 它将清除您的所有表单字段，而无需重新加载网页。
Eg. 例如。
<html>
<body>
<form>
<input type="text" name="demo">
<button type="reset">Clear</button>
<button type="submit">Submit</button>
</form>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.