PHP提交表單時不用刷新頁面！簡單幾個步驟，送出資料就免重新整理網頁。

通常使用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>

相關文章: