JS提交Form表单详解

一、JS提交Form表单数据

在某些情况下，我们需要使用JavaScript代码提交表单数据，而不是通过提交按钮提交数据。可以使用以下代码提交数据：


document.getElementById("myForm").submit();

此代码将提交id为“myForm”的表单中的数据。

此外，还可以使用以下代码在提交表单数据之前验证表单数据：


if (document.getElementById("myForm").checkValidity()) {
  document.getElementById("myForm").submit();
}

此代码将检查id为“myForm”的表单是否有效，如果有效，则提交表单数据。

二、JS提交Form表单上传文件

在表单中包含文件上传时，需要使用特殊代码来提交表单数据。以下代码演示了如何使用JavaScript提交包含文件上传的表单数据：


var xhr = new XMLHttpRequest();
  
xhr.open("POST", "upload.php", true);
  
xhr.onload = function() {
  console.log(this.responseText);
};
  
var myForm = document.getElementById("myForm");
var formData = new FormData(myForm);
  
xhr.send(formData);

在这里，我们使用XMLHttpRequest对象来提交数据，而不是使用表单的默认提交方法。使用FormData对象来收集表单数据，并通过XHR对象将其提交到服务器。

三、JS提交Form表单action

在有些情况下，我们需要通过JavaScript代码来更改表单提交的URL。可以使用以下代码更改表单的action：


document.getElementById("myForm").action = "new_url";

此代码将把表单的action属性更改为“new_url”。

四、JS提交Form表单跳转

有时，我们需要在表单提交成功后重定向到另一个页面。以下代码演示了如何在表单提交成功后重定向到“new_page.html”：


document.getElementById("myForm").onsubmit = function() {
  window.location.href = "new_page.html";
};

使用该代码将设置表单提交事件监听器，并将其重定向到“new_page.html”。

五、JS提交Form表单后跳转

如果表单数据已经提交，并且您需要在跳转到另一个页面时执行操作，则可以使用以下代码：


window.onload = function() {
  if (window.location.href.includes("?submitted=true")) {
    // code to be executed after form submission
  }
};

此代码将检查当前页面的URL是否包含“?submitted=true”，如果有，则执行表单提交后的代码。

六、JS提交Form表单的Ajax

使用Ajax提交表单，无需重新加载页面即可更新数据。以下代码演示了使用jQuery提交表单数据的示例：


$("#myForm").submit(function(event) {
  event.preventDefault();
  $.ajax({
    url: "submit.php",
    type: "POST",
    data: new FormData(this),
    processData: false,
    contentType: false
  }).done(function(response) {
    console.log(response);
  });
});

此代码将设置表单的提交事件监听器，并使用jQuery库将表单数据提交到“submit.php”文件。在响应后，将在控制台中输出响应。

七、JS直接提交Form表单

可以使用以下代码直接提交表单数据，而无需单击提交按钮：


document.getElementById("myForm").submit();

此代码将自动提交id为“myForm”的表单中的数据。

八、JS获取Form表单提交的数据

以下代码演示了如何使用JavaScript获取表单提交的数据：


document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault();
  var formData = new FormData(event.target);
  for (var pair of formData.entries()) {
    console.log(pair[0]+ ', ' + pair[1]); 
  }
});

在这里，我们添加了一个事件监听器，以防止表单提交事件的默认行为。然后，我们创建一个FormData对象，并使用该对象来获取表单数据。最后，我们循环遍历FormData对象，并在控制台中输出每个表单输入的名称和值。

九、JS提交表单触发事件

以下代码演示了如何使用JavaScript在表单提交前触发自定义事件：


function beforeSubmit(event) {
  // custom code to be executed before form submission
}

document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault();
  
  var eventBeforeSubmit = new Event("beforeSubmit");
  document.dispatchEvent(eventBeforeSubmit);
  
  // code for form submission
});

在这里，我们添加了一个事件监听器来捕获表单提交事件，并在事件中创建了一个自定义事件。然后，我们使用document.dispatchEvent()方法触发该事件。在表单提交之前，将首先触发自定义事件。

结束语

本文从不同的角度阐述了JavaScript如何处理表单提交。使用这些代码，您可以控制和更改表单提交行为，以适应您的特定应用程序需求。希望能够帮助到大家。

原创文章，作者：XBPO，如若转载，请注明出处：https://www.506064.com/n/133233.html