使用表单onsubmit不触发javascript，而是重新加载页面

我使用以下javascript获取一些应该显示在页面上的信息

function sendMessage(q,publicid,privateid,sessionid) {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtAnswer").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET", "result.php?q=" + q +"&publicid="+publicid+"&privateid="+privateid+"&sessionid="+sessionid+"&donotdisplayheaderfooter=1", true);
        xmlhttp.send();
        return false;
  }

我认为下面的javascript可以防止提交重新加载页面，只需执行上面的javascript即可

 function formSubmit(event) {
    event.preventDefault();
  }
  
  const form = document.getElementById('theform');
  form.addEventListener('submit',formSubmit);

下面的表单只是将q发送到表单并返回到页面，而不是执行onsubmit

<form id="theform" onsubmit="return sendMessage(document.getElementById("q").value,firstkey,secondkey,session);">
<input type="text" name="q" size="140">
<button type="submit" class="circularbutton">Submit</button>
</form>

提交

---

我在哪里忽略了覆盖默认行为，只允许javascript函数

sendMessage（）

处理submit？

我想您可以这样做

 function formSubmit(event) {
    event.preventDefault();
    sendMessage(document.getElementById("q").value,firstkey,secondkey,session)
  }

  const form = document.getElementById('theform');
  form.addEventListener('submit',formSubmit);

<form id="theform">
<input type="text" name="q" size="140">
<button type="submit" class="circularbutton">Submit</button>
</form>

函数表单提交（事件）{
event.preventDefault（）；
sendMessage（document.getElementById（“q”）.value、firstkey、secondkey、session）
}
const form=document.getElementById（'theform'）；
表格.附录列表（“提交”，表格提交）；
提交

我想你可以这样做

 function formSubmit(event) {
    event.preventDefault();
    sendMessage(document.getElementById("q").value,firstkey,secondkey,session)
  }

  const form = document.getElementById('theform');
  form.addEventListener('submit',formSubmit);

<form id="theform">
<input type="text" name="q" size="140">
<button type="submit" class="circularbutton">Submit</button>
</form>

函数表单提交（事件）{
event.preventDefault（）；
sendMessage（document.getElementById（“q”）.value、firstkey、secondkey、session）
}
const form=document.getElementById（'theform'）；
表格.附录列表（“提交”，表格提交）；
提交

您为preventDefault显示的内容应该可以正常工作

下面是一个工作示例

函数表单提交（事件）{
event.preventDefault（）；
console.log（'default prevented？'）；
}
const form=文档。
getElementById（“theform”）；
表格.附录列表（“提交”，表格提交）

做吧！！
您为preventDefault显示的内容应该可以正常工作

下面是一个工作示例


函数表单提交（事件）{
event.preventDefault（）；
console.log（'default prevented？'）；
}
const form=文档。
getElementById（“theform”）；
表格.附录列表（“提交”，表格提交）

做吧！！
通常使用
event.preventDefault（）
；或者在
的submit属性中插入return false

<form id="theform" onsubmit="return false"> <!-- The page does not reload -->
<input type="text" name="q" size="140">
<button type="submit" class="circularbutton">Submit</button>
</form>

我希望这对你有帮助
 通常使用
event.preventDefault（）
；或者在
的submit属性中插入return false

<form id="theform" onsubmit="return false"> <!-- The page does not reload -->
<input type="text" name="q" size="140">
<button type="submit" class="circularbutton">Submit</button>
</form>

我希望这对你有帮助
 解决所有问题的答案是将求q移到函数中，并移出形式

function sendMessage(publicid,privateid,sessionid) {
        var q = document.getElementById('q').value
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtAnswer").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET", "result.php?q=" + q +"&publicid="+publicid+"&privateid="+privateid+"&sessionid="+sessionid+"&donotdisplayheaderfooter=1", true);
        xmlhttp.send();
        return false;
  }

确保以下javascript位于
标签的底部

确保输入有id，并且我的文本在引号中

<form id="theform" onsubmit='return sendMessage("firstkey","secondkey","session")'>
<input type="text" name="q" id="q" size="140">
<button type="submit" class="circularbutton">Submit</button>
</form>


提交
解决所有问题的答案是将查找q移到函数中，并移出表单

function sendMessage(publicid,privateid,sessionid) {
        var q = document.getElementById('q').value
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtAnswer").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET", "result.php?q=" + q +"&publicid="+publicid+"&privateid="+privateid+"&sessionid="+sessionid+"&donotdisplayheaderfooter=1", true);
        xmlhttp.send();
        return false;
  }

确保以下javascript位于
标签的底部

确保输入有id，并且我的文本在引号中

<form id="theform" onsubmit='return sendMessage("firstkey","secondkey","session")'>
<input type="text" name="q" id="q" size="140">
<button type="submit" class="circularbutton">Submit</button>
</form>


提交
您通常需要对事件执行一次重新加载，以防止表单自动提交（这将导致重新加载）。使用JavaScript注册的事件比使用属性更容易做到这一点。@David784您能用我上面的内容来演示一个示例吗？我的preventDefault（）函数是否不起作用？我在控制台“Uncaught TypeError:无法读取行表单上null的属性'addEventListener'”。addEventListener（'submit'，formSubmit'）上收到此错误；确保脚本在HTML之后运行，通常用于与DOM交互的脚本放在结束正文标记的前面。
…。
@Keith将其放在底部修复了大部分问题。现在，我只在
上得到一个错误，即输入的意外结束通常需要在事件上执行一次更改，以防止表单自动提交（这将导致重新加载）。使用JavaScript注册的事件比使用属性更容易做到这一点。@David784您能用我上面的内容来演示一个示例吗？我的preventDefault（）函数是否不起作用？我在控制台“Uncaught TypeError:无法读取行表单上null的属性'addEventListener'”。addEventListener（'submit'，formSubmit'）上收到此错误；确保脚本在HTML之后运行，通常用于与DOM交互的脚本放在结束正文标记的前面。
…。
@Keith将其放在底部修复了大部分问题。现在我只在
上得到一个错误，说输入意外结束