一、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如何处理表单提交。使用这些代码，您可以控制和更改表单提交行为，以适应您的特定应用程序需求。希望能够帮助到大家。
