每次提交表单时都会重新加载网页

Webpage reloading in every form submit

本文关键字：新加载 加载 网页 提交 表单      更新时间：2023-09-26

我有一个页面重新加载的问题。

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

我的问题是，当我提交页面时，它正在重新加载，而不是复制文本
请帮我一下。

试试这个。我将按钮从提交输入更改为按钮输入，以便它只运行脚本。您不希望表单提交，这需要重新加载页面才能将表单"提交"到服务器。此外，您还需要从文本输入中获得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>

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。

相关文章：