以各种形式提交网页重新提交

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>