如何只重置文本框,而不是整个页面?
How to reset just texbox, not the entire page?
我正在尝试创建一个 posting/commenting 系统。它完成了我想要的大部分工作。现在,我只想重置文本框,而不是整个页面。骨架代码由CodePen预设。 (更多解释代码示例)
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:
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;
}
像这样,post 被保留但文本框被重置。如果我摆脱 of/comment 第二个 return false;
整个页面重置。
当您单击 提交 按钮时,表单的默认操作是提出请求。如果您的 <form action=""></form>
中没有指定目的地,则默认位置为 "/"
(当前页面)。这将重新加载页面。
当您说 return false
时,您将向调用者(表单)返回一个假值。这会拒绝正确提交表单,从而阻止重新加载。
将 return false;
留在此处以获得您的结果。
您只需从 write_below()
呼叫 resetText()
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>
为什么要写冗长的JavaScript或JQuery
您可以放置 'reset' 类型的清除按钮。它会在不重新加载网页的情况下清除所有表单字段。
例如
<html>
<body>
<form>
<input type="text" name="demo">
<button type="reset">Clear</button>
<button type="submit">Submit</button>
</form>
</body>
</html>
我正在尝试创建一个 posting/commenting 系统。它完成了我想要的大部分工作。现在,我只想重置文本框,而不是整个页面。骨架代码由CodePen预设。 (更多解释代码示例)
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:
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;
}
像这样,post 被保留但文本框被重置。如果我摆脱 of/comment 第二个 return false;
整个页面重置。
当您单击 提交 按钮时,表单的默认操作是提出请求。如果您的 <form action=""></form>
中没有指定目的地,则默认位置为 "/"
(当前页面)。这将重新加载页面。
当您说 return false
时,您将向调用者(表单)返回一个假值。这会拒绝正确提交表单,从而阻止重新加载。
将 return false;
留在此处以获得您的结果。
您只需从 write_below()
resetText()
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>
为什么要写冗长的JavaScript或JQuery
您可以放置 'reset' 类型的清除按钮。它会在不重新加载网页的情况下清除所有表单字段。
例如
<html>
<body>
<form>
<input type="text" name="demo">
<button type="reset">Clear</button>
<button type="submit">Submit</button>
</form>
</body>
</html>