전체 페이지가 아닌 texbox를 재설정하는 방법은 무엇입니까?

게시/댓글 달기 시스템을 만들려고합니다. 그것은 내가 원하는 것 대부분을합니다. 이제 전체 페이지가 아닌 텍스트 상자 만 재설정하려고합니다. 스켈레톤 코드는 CodePen에 의해 미리 설정됩니다. (코드 샘플 자세히 설명)전체 페이지가 아닌 texbox를 재설정하는 방법은 무엇입니까?

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

는 포스트가 유지되지만 텍스트 박스가 리셋된다. 두 번째 메시지를 제거/주석 처리하면 return false; 전체 페이지가 재설정됩니다.

출처

2016-12-15 user147219

당신이 할 수있는 일은 긴 자바 스크립트 또는 JQuery와

를 작성하는 이유를 '리셋'유형 지우기 버튼을 넣을 수 있습니다 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>

출처

2016-12-15 21:25:52 Slonski

단추를 클릭하면 양식의 기본 동작이 요청하는 것입니다. <form action=""></form>에 지정된 대상이 없으면 기본 위치는 "/" (현재 페이지)입니다. 그러면 페이지가 다시로드됩니다.

return false이라고 말하면 발신자 (양식)에 잘못된 값이 표시됩니다. 이렇게하면 양식이 제대로 제출되지 않으므로 다시로드 할 수 없습니다.

결과를 얻으려면 return false;을 그대로 두십시오.

출처

2016-12-15 19:37:05

에서 호출 resetText()입니다. 웹 페이지를 다시로드하지 않고도 모든 양식 필드를 지울 수 있습니다.

예 :

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

출처

2016-12-16 06:35:42 Hanumant

전체 페이지가 아닌 texbox를 재설정하는 방법은 무엇입니까?

답변

관련 문제