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

【问题标题】：Using form onsubmit not firing javascript and instead reloads page使用表单 onsubmit 不触发 javascript 而是重新加载页面
【发布时间】：2021-02-10 08:46:50
【问题描述】：

我有以下 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() 处理提交？

【问题讨论】：

您通常需要对事件执行preventDefault 以防止表单自动提交（这会导致重新加载）。使用在 JavaScript 中注册的事件比使用属性更容易做到这一点。
@David784 你能用我上面的例子展示一个例子吗？我的 preventDefault() 函数是否不起作用？
我在控制台“Uncaught TypeError: Cannot read property 'addEventListener' of null”上收到此错误 form.addEventListener('submit',formSubmit);
确保脚本在 HTML 之后运行，通常用于与 DOM 交互的脚本放在结束 body 标签之前 .....<script>......</script></body>
@Keith 把它放在底部解决了大部分问题。现在我在<form id="theform" onsubmit="return sendMessage(document.getElementById("q").value,firstkey,secondkey,session)"> 上只收到一个错误，说意外的输入结束

标签： javascript html onsubmit

【解决方案1】：

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

下面是一个工作示例。

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

<form id="theform">
  <button type="submit">Do It!!</button>
</form>

【讨论】：

【解决方案2】：

我认为你可以这样做

 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>

【讨论】：

【解决方案3】：

通常使用event.preventDefault()；或者在<form>的提交属性中，插入返回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>

// Executes within the submit form event
document.getElementById('theform').addEventListener('submit', function(event) {
    event.preventDefault(); // Dropping the return false within the onsubmit attribute of the form, use this way (optional)
    sendMessage(document.getElementById('q').value, firstkey, sencondkey, session);
});

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

希望对你有帮助！

【讨论】：

【解决方案4】：

解决所有问题的答案是将查找 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位于<body>底部的<script>标签中

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

确保输入有一个 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>

【讨论】：