資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 JavaScript 中提交表單時停止頁面重新整理？
在本教程中，我們將學習如何在 JavaScript 中提交表單時停止頁面重新整理。
讓我們來了解實現此目標的方法。
使用 event.preventDefault() 停止表單提交時的頁面重新整理
在本節中，我們將瞭解如何使用 event.preventDefault() 停止表單提交時的頁面重新整理。 event.preventDefault() 在表單提交期間限制了表單的預設頁面重新整理行為。
使用者可以按照以下語法嘗試此方法。
語法
<form id="formId"> <input type="text" value=="value"/> <input type="submit"/> </form>
語法定義了表單。
//Get form element
var form=document.getElementById("formId");
function submitForm(event){
//Preventing page refresh
event.preventDefault();
}
//Calling a function during form submission.
form.addEventListener('submit', submitForm);
語法為表單提交事件添加了一個事件監聽器。回撥函式呼叫 event.preventDefault() 方法來阻止頁面重新整理。
示例
在此示例中，表單包含兩個輸入欄位。當用戶單擊提交按鈕時，事件處理程式回撥函式開始執行。表單提交和阻止頁面重新整理會立即發生。
<html>
<body>
<h2>Program to stop form refreshing page on submit in JavaScript using <i>event.preventDefault()</i></h2>
<form id="formId">
Name: <input type="text" name="name" required/><br><br> Email: <input type="email" name="email" required/><br><br>
<input type="submit" value="Submit!" />
</form>
<p id="opTag"></p>
<script>
var form = document.getElementById("formId");
var opTag = document.getElementById("opTag");
function submitForm(event) {
event.preventDefault();
form.style.display = "none";
opTag.innerHTML = "<b>Form submit successful</b>";
}
form.addEventListener('submit', submitForm);
</script>
</body>
</html>
使用“return false”停止表單提交時的頁面重新整理
在本節中，我們將瞭解如何使用 "return false" 停止表單提交時的頁面重新整理。"return false" 會取消頁面重新整理。
使用者可以按照以下語法嘗試此方法。
語法
<form onsubmit="jsFunction();return false"> <input type="checkbox" value="value"> <input type="submit"/> </form>
語法在表單提交操作上呼叫一個 JavaScript 函式。"return false" 緊跟在函式呼叫之後。
示例
在此示例中，兩個複選框是表單輸入欄位。表單具有提交事件回撥函式和 "return false" 語句。
"return false" 語句刪除了表單提交時的頁面重新整理。提交按鈕會消失，並且在使用者請求時，頁面會顯示錶單提交成功。
<html>
<body>
<h2>Program to stop form refreshing page on submit in JavaScript using <i>return false</i></h2>
<form id="retForm" onsubmit="submitFormReturn();return false;">
<input type="checkbox" id="bike" name="bike" value="Bike">
<label for="bike">Egan likes bike</label><br>
<input type="checkbox" id="car" name="car" value="Car">
<label for="car">Egna likes car</label><br><br>
<input type="submit" value="Submit">
</form>
<p id="retOp"></p>
<script>
var retForm = document.getElementById("retForm");
var retOp = document.getElementById("retOp");
function submitFormReturn(event) {
retForm.style.display = "none";
retOp.innerHTML = "<b>Form submit successful</b>";
}
</script>
</body>
</html>
使用 Ajax 表單提交停止表單提交時的頁面重新整理
在本節中，我們將瞭解如何使用 ajax 表單提交停止表單提交時的頁面重新整理。ajax 表單提交是提交表單而無需頁面重新整理的另一種方法。
使用者可以按照以下語法嘗試此方法。
語法
<form id="ajxForm" onsubmit="submitFormAjax();"> <input type="text" value="value"> <input type="submit"/> </form>
語法定義了一個表單，其中包含執行表單提交的提交回調函式。
//Get the form data
var data=new FormData(document.getElementById("formId"));
//Create XMLHttpRequest
var xhr=new XMLHttpRequest();
//Open the connection and send the data to the server
xhr.open("POST", "SERVER-SCRIPT");
xhr.send(data);
//Avoids default form submit
return false;
語法讀取表單元素並開啟一個 xhr 連線。然後透過阻止預設表單提交操作將表單資料傳送到伺服器。
示例
在此示例中，提供了一個包含四個文字欄位的候選表單示例。表單提交事件函式讀取此表單，建立一個 XMLHttpRequest，並啟動一個連線以將資料傳送到伺服器。
函式定義末尾的 "return false" 語句停止了預設表單提交，並執行了 ajax 表單提交。
<html>
<body>
<h2>Program to stop form refreshing page on submit in JavaScript using <i>ajax form submit</i></h2>
<form id="ajxForm" onsubmit="submitFormAjax();">
<fieldset style="background: lightgrey; border: 5px solid #000;">
<legend>Candidate Data</legend>
<input type="text" name="firstname" placeholder="First name"><br/><br/>
<input type="text" name="lastname" placeholder="Last name"><br/><br/>
<input type="text" name="email" placeholder="Email"><br /><br/>
<input type="text" name="phone" placeholder="Phone"><br /><br/>
<input type="submit" value="Submit">
</fieldset>
</form>
<script>
function submitFormAjax(event) {
var ajxForm = document.getElementById("ajxForm");
var data = new FormData(ajxForm);
var xhr = new XMLHttpRequest();
xhr.open("POST", "");
xhr.send(data);
xhr.onload = function() {
alert("Submitted");
};
return false;
}
</script>
</body>
</html>
使用 fetch API 表單提交停止表單提交時的頁面重新整理
在本節中，我們將瞭解如何使用 fetch API 表單提交停止表單提交時的頁面重新整理。fetch API 表單提交是提交表單而無需頁面重新整理的另一種方法。ajax 表單提交後，頁面會重新渲染。
使用者可以按照以下語法嘗試此方法。
語法
<form id="fetchForm" onsubmit="submitFormFetch ();"> <select> <option value="value"></option> <input type="submit"/> </form>
語法包含一個表單，其中包含用於執行 fetch API 表單提交的提交函式呼叫。
//Get the form
var data=new FormData(document.getElementById("formId"));
//Use fetch syntax to submit the form data
fetch("SERVER-SCRIPT", { method: "post", body: data });
//Stop default form submit action
return false;
語法讀取表單資料並使用 fetch API 提交它，同時停止預設表單提交。
示例
在此示例中，嘗試使用選擇下拉選單作為輸入欄位。表單具有 fetch 表單資料並提交它的提交函式。函式末尾的 "return false" 語句預設停止了表單提交操作。請注意，fetch API 表單提交後，頁面會重新渲染。
<html>
<body>
<h2>Program to stop form refreshing page on submit in JavaScript using <i>fetch form submit</i></h2>
<form id="fetchForm" onsubmit="submitFormFetch();">
<label for="city">RaceCourse:</label>
<select name="racecourse" id="racecourse">
<option value="ascot">Ascot</option>
<option value="belmont">Belmont</option>
</select><br><br>
<input type="submit" value="Submit!" />
</form>
<script>
function submitFormFetch(event) {
var fetchForm = document.getElementById("fetchForm");
var data = new FormData(fetchForm);
fetch("", {
method: "post",
body: data
})
.then((res) => {
return res.text();
})
.then((txt) => {
alert("Submit Success");
})
.catch((err) => {
alert(err);
});
return false;
}
</script>
</body>
</html>
本教程教會了我們四種停止表單提交時頁面重新整理的方法。preventDefault() 和 "return false" 方法用於停止預設表單提交時的頁面重新整理。ajax 方法和 fetch API 方法是無需頁面重新整理即可提交表單的替代方法。
84K+ 瀏覽量
