How to reset just texbox, not the entire page?

Question

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. (More explanation with the code sample)

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

Like this, the post is kept but the textbox is reset. If I get rid of/comment out the second return false; the entire page resets.

score 2 · Accepted Answer · answered Dec 15 '16 at 21:25

All you have to do is call resetText() from 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>

score 0 · Answer 2 · answered Dec 15 '16 at 19:37

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). This will reload the page.

When you say return false you are returning a false value to the caller (the form). This refuses the form to submit properly, thus preventing a reload.

Leave the return false;in there to achieve your result.

score 0 · Answer 3 · answered Dec 16 '16 at 06:35

Why to write a lengthy JavaScript or 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>

How to reset just texbox, not the entire page?

3 Answers3