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如何處理表單提交。使用這些代碼，您可以控制和更改表單提交行為，以適應您的特定應用程序需求。希望能夠幫助到大家。