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

Question

我有以下 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() 在提交时工作？

Answer 1

我认为你可以这样做

 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>

Answer 2

您为 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>

Answer 3

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

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

希望对你有所帮助！

Answer 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>

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

Using form onsubmit not firing javascript and instead reloads page

javascript

html

onsubmit