iT邦幫忙

0

ajaxSubmit 如何避免跳轉網頁

我想用ajaxSumbit實現提交表單但不跳轉頁面的功能,但怎麼調整頁面還是會跳轉,beforeSumbit、success也都沒有正常顯示,請各位提供指導,謝謝。

demo1.php

<html>
    <head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
		<script src="http://malsup.github.com/jquery.form.js"></script>
		<script lanaguage='javascript'>
        $(document).ready(function() {
            var options = {
	            target: '#output1', // 用伺服器返回的資料 更新 id為output1的內容.
	            beforeSubmit: showRequest, // 提交前
	            success: showResponse, // 提交後
	            //Other:
	            //url: url // 預設是form的action,如果寫的話,會覆蓋from的action.
	            //type: type // 預設是form的method,如果寫的話,會覆蓋from的method.('get' or 'post').
	            //dataType: null // 'xml', 'script', or 'json' (接受服務端返回的型別.)
	            //clearForm: true // 成功提交後,清除所有的表單元素的值.
	            resetForm: true // 成功提交後,重置所有的表單元素的值.
	            //由於某種原因,提交陷入無限等待之中,timeout引數就是用來限制請求的時間,
	            //當請求大於3秒後,跳出請求.
	            //timeout: 3000
            };
            
            $('#myForm').submit(function() {
	            $(this).ajaxSubmit(options);
	            return false; //來阻止瀏覽器提交.
	            });
        });
        // 提交前
        function showRequest() {
            alert("beforeSubmit");
        }
        // 提交後
        function showResponse() {
            alert("success");
        }
        </script>
    </head>
    <body>

        <form id="myForm" action="ajax.php" method="post">
            名稱: <input type="text" name="name" /> <br />
            地址: <input type="text" name="address" /><br />
            自我介紹: <textarea name="comment"></textarea> <br />
            <input type="submit" id="test" value="提交" /> <br />
            <div id="output1"></div>
        </form>
    </body>
</html>

ajax.php

<?php
if(isset($_POST["name"])){
	$vName = $_POST["name"];
}
echo $vName;

if(isset($_POST["address"])){
	$vAddress = $_POST["address"];
}
echo $vAddress;

if(isset($_POST["comment"])){
	$vComment = $_POST["comment"];
}
echo $vComment;

?>
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

0
淺水員
iT邦大師 6 級 ‧ 2021-05-03 12:56:24
最佳解答

preventDefault 阻止預設行為

原生 javascript

document.querySelector('#myForm').addEventListener('submit', (e)=>{
    e.preventDefault();
    console.log('submit');
});

jquery

$('#myForm').submit((e)=>{
    e.preventDefault();
    console.log('submit');
})
看更多先前的回應...收起先前的回應...
eric1223 iT邦新手 5 級 ‧ 2021-05-03 14:14:29 檢舉

Submit沒回應,使用方式有錯?

<html>
    <head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
		<script src="http://malsup.github.com/jquery.form.js"></script>
		<script lanaguage='javascript'>
        $(document).ready(function() {
            var options = {
	            target: '#output1', // 用伺服器返回的資料 更新 id為output1的內容.
	            beforeSubmit: showRequest, // 提交前
	            success: showResponse, // 提交後
	            //Other:
	            //url: url // 預設是form的action,如果寫的話,會覆蓋from的action.
	            //type: type // 預設是form的method,如果寫的話,會覆蓋from的method.('get' or 'post').
	            //dataType: null // 'xml', 'script', or 'json' (接受服務端返回的型別.)
	            //clearForm: true // 成功提交後,清除所有的表單元素的值.
	            resetForm: true // 成功提交後,重置所有的表單元素的值.
	            //由於某種原因,提交陷入無限等待之中,timeout引數就是用來限制請求的時間,
	            //當請求大於3秒後,跳出請求.
	            //timeout: 3000
            };
            
            // $('#myForm').submit(function() {
	           //  $(this).ajaxSubmit(options);
	           //  return false; //來阻止瀏覽器提交.
	           //  });


	           $('#myForm').submit((e)=>{
				    e.preventDefault();
				    console.log('submit');
				    $(this).ajaxSubmit(options);
	            	return false; //來阻止瀏覽器提交.
				})
        });
        // 提交前
        function showRequest() {
            alert("beforeSubmit");
        }
        // 提交後
        function showResponse() {
            alert("success");
        }
        </script>
    </head>
    <body>

        <form id="myForm" action="b.php" method="post">
            名稱: <input type="text" name="name" /> <br />
            地址: <input type="text" name="address" /><br />
            自我介紹: <textarea name="comment"></textarea> <br />
            <input type="submit" id="test" value="提交" /> <br />
            <div id="output1"></div>
        </form>
    </body>
</html>
淺水員 iT邦大師 6 級 ‧ 2021-05-03 15:10:49 檢舉

這個JS檔案我這邊讀取不到:<script src="http://malsup.github.com/jquery.form.js"></script>

由於上述理由,我不知道 $(this).ajSubmit(options); 會不會有問題

提交表單後,你的 console 有顯示 submit 字串嗎?
如果有的話,問題不在 submit 的事件處理
而是 ajSubmit 這個 method 可能有問題
(因為讀不到檔案,沒法幫你看)

淺水員 iT邦大師 6 級 ‧ 2021-05-03 15:19:11 檢舉

我猜你想用的是這個
https://github.com/jquery-form/form

eric1223 iT邦新手 5 級 ‧ 2021-05-03 16:27:08 檢舉

console沒顯示任何文字,看F12的網路也沒有任何一筆http request

https://github.com/jquery-form/form 有提到ajaxSubmit(option),但請問它的用法? 如果是替代找不到的js,那我該用哪個路徑下的js?

淺水員 iT邦大師 6 級 ‧ 2021-05-03 19:10:48 檢舉

用 chrome、firefox、edge 測試你的程式碼
只是把

<script src="http://malsup.github.com/jquery.form.js"></script>

修正為

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js" integrity="sha384-qlmct0AOBiA2VPZkMY3+2WqkHtIQ9lSdAsAn5RUJD/3vA5MKDgSGcdmIv4ycVxyn" crossorigin="anonymous"></script>

都有出現 submit 並不會跳頁。

先前給的連結 https://github.com/jquery-form/form
裡面的 CDN 就是可以引用的連結了

eric1223 iT邦新手 5 級 ‧ 2021-05-04 10:15:04 檢舉

JS換過去後,功能正常,不會發生跳轉,非常感謝

請教一下,您是怎麼根據我的需求找到對應的JS/jQuery-form ?
就算知道JS路徑失效,我要怎麼知道哪一個JS可以用?

淺水員 iT邦大師 6 級 ‧ 2021-05-04 11:40:44 檢舉

我只是搜尋「jQuery-form」,判斷這是 jQuery 的 plugin
所以再搜尋「jquery form plugin」就看到了

至於判斷能用是因為我點進去
他提供的格式跟你貼的程式碼滿符合的
如果是不同的專案提供的介面不會那麼類似

其實這種簡單的需求應該比較少人會特別找 plugin 來用
jQuery 本身就有提供 ajax 的功能
用 ajax 拿到資料後看要做什麼自己寫一下就好了

1

其實~~~~

<input type="submit" id="test" value="提交" />

改成

<input type="button" id="test" value="提交" />

就好。
再去綁定這個click事件。會比較快。

因為有些瀏覽器。用submit就是會先發送而導致轉頁(還來不及RETURN)。
所以一般最好還是交由button來幫你處理submit。會比較直接點。

看更多先前的回應...收起先前的回應...
froce iT邦大師 1 級 ‧ 2021-05-04 10:03:40 檢舉

我記得有些瀏覽器的button在form裡預設就是submit...
建議是直接加 preventDefault。

淺水員 iT邦大師 6 級 ‧ 2021-05-04 11:31:42 檢舉

如果表單內只有一個按鈕元素(例如 <button>My button</button>)的話,瀏覽器會自動把它視為提交按鈕。

來源:MDN input submit

froce

你因該是記錯了。那是未宣告type的預設。IE預設是submit。其它的是button。
有宣告TYPE的情況下,會依其TYPE為主。

沒注意到 淺水員 已經說明了

froce iT邦大師 1 級 ‧ 2021-05-04 13:28:22 檢舉

應該是吧...反正我有踩過坑,應該是只有一個按鈕設定type=button結果還是一直submit。
後來是直接加preventDefault。

我要發表回答

立即登入回答