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

如何解决使用表单提交不触发 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() 处理提交？

解决方法

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

我认为你可以这样做

 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()；或者在<form>的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>

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

希望对你有帮助！

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

function sendMessage(publicid,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",true);
        xmlhttp.send();
        return false;
  }

确保以下 javascript 位于 <script> 底部的 <body> 标签中

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>

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

如何解决使用表单提交不触发 javascript 而是重新加载页面

解决方法

相关推荐