以各種形式提交網頁重新提交

Question

我有頁面重新加載的問題。

HTML

<form onsubmit="return commentForm()"> 
    <input type="text" id="text"> 
    <input type="checkbox" id="check" name="check"> 
    <input type="submit" value="Comment" class="txt2"> 
</form> 
<p id="demo"></p> 

的Javascript

function commentForm() { 
    var x = document.getElementById('check').checked; 
    var y = document.getElementById('text').value; 
    if (y == null || y == "") { 
      alert('please enter some value'); 
      return false; 
    } 
    if (x == false) { 
      alert('Please check the checkbox') 
      return false; 
    } 
    else { 
      document.getElementById('demo').innerHTML += document.getELementById('text').value + "<br>"; 
      return true; 
    } 
} 

我的問題是，當我提出它，而不是重裝複製文本的網頁。
請幫助我。

Answer 1

function commentForm() { 
 
    var checkbox = document.getElementById('check').checked; 
 
    var text = document.getElementById('text').value; 
 
    if (!text) { 
 
     alert('please enter some value'); 
 
     return false; 
 
    } 
 
    if (!checkbox) { 
 
     alert('Please check the checkbox'); 
 
     return false; 
 
    } 
 
    else { 
 
     document.getElementById('demo').innerHTML += text + "<br>"; 
 
     return false; 
 
    } 
 
}

<form onsubmit="return commentForm()"> 
 
    <input type="text" id="text"> 
 
    <input type="checkbox" id="check" name="check"> 
 
    <input type="submit" value="Comment" class="txt2"> 
 
</form> 
 
<p id="demo"></p>

如果你想在頁面不被重定向可以在else語句中使用return false。

Answer 2

試試這個。我將提交輸入中的按鈕更改爲按鈕輸入，以便它只運行腳本。您不希望表單提交，這需要重新加載頁面以將表單「提交」給服務器。你也需要從文本輸入得到value：

document.getElementById('demo').innerHTML += document.getElementById('text').value + "<br>

但既然你已經把那個價值爲var text你可以重用該變量。此外，您不檢查複選框是否被選中，因爲它正在查看兩個輸入的變量x。嘗試運行此：

function commentForm() { 
 
    var checkBox = document.getElementById('check').checked; 
 
    var text = document.getElementById('text').value; 
 
    if (!text) { 
 
     alert('please enter some value'); 
 
     return false; 
 
    } 
 
    if (!checkBox) { 
 
     alert('Please check the checkbox') 
 
     return false; 
 
    } else { 
 
     document.getElementById('demo').innerHTML += text + "<br>"; 
 
     return true; 
 
    } 
 
}

<form> 
 
    <input type="text" id="text"> 
 
    <input type="checkbox" id="check" name="check"> 
 
    <input type="button" value="Comment" class="txt2" onclick="return commentForm()"> 
 
</form> 
 
<p id="demo"></p>