js表單提交詳解

一、js表單提交代碼

在前端開發中，表單提交是最常見的操作之一。在js中，表單提交可以通過以下代碼實現：

function submitForm(){
  var form = document.getElementById("myForm");
  form.submit();
}

其中，myForm是表單元素的id，通過form.submit()實現提交表單的操作。如果需要在表單提交前進行一些檢查或其他的操作，也可以使用form.submit()之前進行相應的處理。

二、js表單提交的方式有幾種

在html中，表單可以通過post和get方法提交，在js中其實也可以通過這兩種方式進行提交：

//post提交
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("POST","submit.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=John&age=25");

//get提交
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","submit.php?name=John&age=25",true);
xmlhttp.send();

可以看到，在以上代碼中，分別使用了post和get方式提交表單。無論是使用哪種方式，都需要創建一個XMLHttpRequest對象，並且設置相應的參數。不同的是，在post方式中，還需要設置請求頭的Content-type，並且將要提交的數據通過send()方法進行發送。而在get方式中，則直接將要提交的數據拼接在url中即可。

三、js表單提交數組

在實際開發中，我們有時需要提交一組數據，而不是單個數據。在這種情況下，我們可以使用數組來提交表單：

var fruits = ["apple", "banana", "orange"];
var form = document.createElement("form");

for (var i = 0; i < fruits.length; i++) {
  var input = document.createElement("input");
  input.type = "hidden";
  input.name = "fruits[]";
  input.value = fruits[i];
  form.appendChild(input);
}

document.body.appendChild(form);
form.submit();

以上代碼中，我們創建了一個包含3個水果的數組，然後通過for循環來將每個水果作為表單元素的value值，並將元素添加到一個新創建的form元素中。最後，將form元素添加到body中，並submit()即可。

四、js表單提交form

除了創建表單元素和設置表單元素的value值之外，我們還可以通過form對象來進行表單提交操作：

var form = document.getElementById("myForm");
var formData = new FormData(form);

//將表單數據轉為json字符串
var jsonData = JSON.stringify(Object.fromEntries(formData));

//發送ajax請求
var xhr = new XMLHttpRequest();
xhr.open('POST', 'submit.php', true);
xhr.setRequestHeader('Content-type', 'application/json');
xhr.send(jsonData);

以上代碼中，我們先通過document.getElementById()獲取表單元素對象，然後創建一個FormData對象，並將表單元素傳入其中。由於發送的數據需要為json格式，所以需要將formData對象轉換為json字符串。最後，創建一個XMLHttpRequest對象發送ajax請求即可。

五、js表單提交驗證跳轉

表單提交之前，我們需要進行一些驗證操作，以確保用戶填寫的數據的正確性。而在驗證成功後，我們需要將用戶跳轉到另一個頁面。在js中，可以通過以下代碼實現：

var form = document.getElementById("myForm");

form.addEventListener("submit", function(event){
  event.preventDefault(); //阻止默認的表單提交操作

  //驗證表單內容
  if(驗證成功){
    //跳轉到另一個頁面
    window.location.href = "success.html";
  }
});

以上代碼中，我們通過給form綁定submit事件，在提交事件觸發後，首先阻止默認的表單提交操作。然後再進行表單內容的驗證操作，如果驗證成功，則通過window.location.href跳轉到另一個頁面。

六、js表單提交成功彈出框顯示信息

除了跳轉到另一個頁面之外，我們還可以通過彈出框的方式，將提交成功的信息顯示給用戶：

var form = document.getElementById("myForm");

form.addEventListener("submit", function(event){
  event.preventDefault(); //阻止默認的表單提交操作

  //驗證表單內容
  if(驗證成功){
    alert("提交成功！");
    form.reset(); //重置表單內容
  }
});

以上代碼中，我們仍然通過阻止默認的表單提交操作和表單內容的驗證操作來確保用戶提交的數據可靠性。如果驗證成功，則通過alert()方法彈出提交成功的提示框，並通過form.reset()方法清空表單內容，以方便用戶繼續填寫其他表單。

七、js表單提交內容輸出

在表單提交之前，我們可能需要將表單中的數據輸出到控制台以便進行調試操作。在js中，可以通過以下代碼實現：

var form = document.getElementById("myForm");

form.addEventListener("submit", function(event){
  event.preventDefault(); //阻止默認的表單提交操作

  //輸出表單內容
  console.log(form.elements);
});

以上代碼中，我們通過console.log()方法將表單元素對象(form.elements)輸出到控制台，以方便我們在提交表單之前查看錶單中的內容。

八、js表單提交事件

在表單提交的過程中，我們可能需要在某些時刻進行一些操作，例如在表單提交完成後，需要重新加載頁面。在這種情況下，可以使用表單提交的事件來進行監聽和處理操作：

var form = document.getElementById("myForm");

form.addEventListener("submit", function(event){
  event.preventDefault(); //阻止默認的表單提交操作

  //在表單提交完成後，重新加載頁面
  window.addEventListener("load", function(){
    window.location.reload();
  });
});

以上代碼中，我們通過給window對象添加load事件來監聽頁面是否已經重新加載，當頁面完成重新加載操作之後，則通過window.location.reload()方法重新加載頁面。

九、js表單提交數據

在表單提交的過程中，有時我們需要添加一些額外的數據，例如一個token或用戶id等。在js中，可以通過以下代碼向表單添加數據：

var form = document.getElementById("myForm");

//創建數據對象
var data = {
  token: "xxxxx",
  userId: "12345"
};

//將數據添加到表單中
for(var key in data){
  var input = document.createElement("input");
  input.type = "hidden";
  input.name = key;
  input.value = data[key];
  form.appendChild(input);
}

//提交表單
form.submit();

以上代碼中，我們先創建了一個數據對象(data)，然後通過for循環來將數據添加到表單中。最後，提交表單即可。

十、js表單提交結合onclick選取

有時，我們需要在某些操作之後才進行表單提交操作，例如用戶選擇了一個選項之後才能進行提交。在這種情況下，可以結合onclick事件來實現：

var form = document.getElementById("myForm");
var btn = document.getElementById("submitBtn");

btn.addEventListener("click", function(event){
  event.preventDefault(); //阻止默認的submit事件

  //驗證是否選擇了選項
  var option = document.getElementById("option");
  if(option.checked){
    //提交表單
    form.submit();
  }else{
    alert("請選擇一個選項！");
  }
});

以上代碼中，我們用button元素代替了submit元素來進行表單提交。然後給button元素綁定了click事件，其中通過阻止默認的submit事件和驗證是否選擇了選項來實現表單提交的操作。