通常使用PHP要提交表單送出資料後，會自動重新整理網頁，但是有時因功能或流程設計的需求不適合刷新整個頁面，該如何讓Form Submit POST後不跳轉呢？教學幾個步驟就可以簡單無重整畫面了。
先建立出主要的網頁。
<html>
<title>PHP送出表單不用重新整理頁面 - TechMarks劃重點</title>
<head>
// 因會使用到jquery處理表單，因故而要引用到。
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form id="myForm" method="post">
Name: <input name="name" id="name" type="text" /><br />
Phone:<input name="phone" id="phone" type="text" /><br />
Address: <input name="address" id="address" type="text" /><br />
Delivery Time: <input name="dely_time" type="radio" value="morning">Morning(9-12)
<input name="dely_time" type="radio" value="afternoon">Afternoon(12-18)
<input name="dely_time" type="radio" value="night">Night(18-20)<br />
<input type="button" id="submitData" >
STEP2 寫一段Javascript，裡面是使用jQuery處理post資料傳遞。
<script>
function SubmitFormData() {
var name = $("#name").val();
var phone = $("#phone").val();
var address = $("#address").val();
var dely_time = $("input[type=radio]:checked").val();
$.post("submit.php", { name: name, phone: phone, address: address, dely_time: dely_time },
function(data) {
$('#results').html(data);
$('#myForm')[0].reset();
});
}
</script>
STEP3 新增一個新頁面submit.php，來轉送表單的內容。
<?php
echo $_POST['name'] ."<br />";
echo $_POST['phone'] ."<br />";
echo $_POST['address'] ."<br />";
echo $_POST['dely_time'] ."<br />";
echo "==============================<br />";
echo "已成功將資料POST過來，且不用刷新頁面！";
?>
STEP4 主頁面完整程式碼範例。這樣就完成了PHP提交資料不用刷新整個網頁了。
<html>
<title>PHP送出表單不用重新整理頁面 - TechMarks劃重點</title>
<head>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
function SubmitFormData() {
var name = $("#name").val();
var phone = $("#phone").val();
var address = $("#address").val();
var dely_time = $("input[type=radio]:checked").val();
$.post("submit.php", { name: name, phone: phone, address: address, dely_time: dely_time },
function(data) {
$('#results').html(data);
$('#myForm')[0].reset();
});
}
</script>
</head>
<body>
<form id="myForm" method="post">
Name: <input name="name" id="name" type="text" /><br />
Phone:<input name="phone" id="phone" type="text" /><br />
Address: <input name="address" id="address" type="text" /><br />
Delivery Time: <input name="dely_time" type="radio" value="morning">Morning(9-12)
<input name="dely_time" type="radio" value="afternoon">Afternoon(12-18)
<input name="dely_time" type="radio" value="night">Night(18-20)<br />
<input type="button" id="submitData" >
延伸閱讀：