通常使用PHP要提交表單送出資料後,會自動重新整理網頁,但是有時因功能或流程設計的需求不適合刷新整個頁面,該如何讓Form Submit POST後不跳轉呢?教學幾個步驟就可以簡單無重整畫面了。
PHP送出表單不用重新整理頁面
STEP1
先建立出主要的網頁。
<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" onclick="SubmitFormData();" value="Submit" /> </form> </body> </html>
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" onclick="SubmitFormData();" value="Submit" /> </form> <br/> 傳送的資料將顯示下邊..... <br /> ==============================<br /> <div id="results"> <!-- 填入表單內容會秀在這 --> </div> </body> </html>