Question

我正在尝试创建发布/评论系统。它完成了我想要的大部分工作。现在，我想重置文本框，而不是整个页面。 Skeleton代码由CodePen预设。（代码示例的更多解释）

HTML：

Invoke

JS：

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

像这样，保留帖子但文本框已重置。如果我删除/注释掉第二个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; }整个页面重置。

Answer 1

您只需从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>

Answer 2

单击提交按钮时，表单的默认操作是发出请求。如果<form action=""></form>中未指定目的地，则默认位置为"/"（当前页面）。这将重新加载页面。

当您说return false时，您向呼叫者（表单）返回错误值。这会拒绝表单正确提交，从而阻止重新加载。

将return false;留在那里以获得结果。

Answer 3

为什么要编写冗长的JavaScript或JQuery

您可以输入清除按钮，类型为＆＃39; reset＆＃39;。它将清除您的所有表单字段而无需重新加载网页。

例如

 <html>
        <body>
               <form>
                        <input type="text" name="demo">
                        <button type="reset">Clear</button>
                         <button type="submit">Submit</button>
                 </form>
         </body>
  </html>

如何重置texbox，而不是整个页面？

3 个答案: