我想用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;
?>
已邀請的邦友 {{ invite_list.length }}/5
用 preventDefault 阻止預設行為
原生 javascript
document.querySelector('#myForm').addEventListener('submit', (e)=>{
e.preventDefault();
console.log('submit');
});
jquery
$('#myForm').submit((e)=>{
e.preventDefault();
console.log('submit');
})
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>
這個JS檔案我這邊讀取不到：<script src="http://malsup.github.com/jquery.form.js"></script>
由於上述理由，我不知道 $(this).ajSubmit(options); 會不會有問題
提交表單後，你的 console 有顯示 submit 字串嗎？
如果有的話，問題不在 submit 的事件處理
而是 ajSubmit 這個 method 可能有問題
（因為讀不到檔案，沒法幫你看）
我猜你想用的是這個
https://github.com/jquery-form/form
console沒顯示任何文字，看F12的網路也沒有任何一筆http request
https://github.com/jquery-form/form 有提到ajaxSubmit(option)，但請問它的用法? 如果是替代找不到的js，那我該用哪個路徑下的js?
用 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 就是可以引用的連結了
JS換過去後，功能正常，不會發生跳轉，非常感謝
請教一下，您是怎麼根據我的需求找到對應的JS/jQuery-form ?
就算知道JS路徑失效，我要怎麼知道哪一個JS可以用?
我只是搜尋「jQuery-form」，判斷這是 jQuery 的 plugin
所以再搜尋「jquery form plugin」就看到了
至於判斷能用是因為我點進去
他提供的格式跟你貼的程式碼滿符合的
如果是不同的專案提供的介面不會那麼類似
其實這種簡單的需求應該比較少人會特別找 plugin 來用
jQuery 本身就有提供 ajax 的功能
用 ajax 拿到資料後看要做什麼自己寫一下就好了
其實~~~~
將
<input type="submit" id="test" value="提交" />
改成
<input type="button" id="test" value="提交" />
就好。
再去綁定這個click事件。會比較快。
因為有些瀏覽器。用submit就是會先發送而導致轉頁(還來不及RETURN)。
所以一般最好還是交由button來幫你處理submit。會比較直接點。
iThome鐵人賽
看影片追技術