jquery 提交表单并停留在同一页面不起作用
[英]jquery submit form and stay on same page not working
问题描述
The code below is supposed to submit the form and stay on the current page.
下面的代码应该提交表单并停留在当前页面上。 It does submit the form, but it doesn't stay on the same page as it redirects to the form processing page.它确实提交了表单，但它不会在重定向到表单处理页面时停留在同一页面上。 I have tried using event.preventDefault();我试过使用event.preventDefault(); and return false;并return false; but neither are stopping the redirect.但两者都没有停止重定向。 I tried them one at a time and then later added both at the same time and at different locations in the function, but the redirect still happens.我一次尝试了一个，然后在 function 的不同位置同时添加了它们，但重定向仍然发生。
function submitForm() {
var $subForm = $('#signupForm')[0] ;
if (!$subForm.checkValidity()) {
$subForm.find(':submit').click() ;
return ;
}
$subForm.submit(function(event){
event.preventDefault(); // not working here
$.post($(this).attr('action'), $(this).serialize(), function(response){
// do something here on success
console.log(response) ;
},'json');
return false; // not working here
});
return false ; // not working here
}
My form is defined as:我的表格定义为：
<form method="POST" id="signupForm" action="submitSignup.php" enctype="multipart/form-data" validate>
....
<button type="button" onclick='submitForm();' id="ccInfoButton" style="" class="btn btn-primary buttonSignup" disabled >CREATE ACCOUNT NOW<i class="iconRequired icon-chevron-right"></i></button>
</form>
2 个解决方案
解决方案1
0 2021-12-06 05:36:10
The issue is because of where you are trying to handle the submit event.问题在于您尝试处理提交事件的位置。 The code below achieves the goal of submitting the form and staying on the same page.下面的代码实现了提交表单并保持在同一页面上的目标。 You can see it work with the code snippet below.您可以看到它与下面的代码片段一起使用。
function submitForm() { console.log("SUBMIT BUTTON CLICKED"); var subForm = $('#signupForm')[0]; if (.subForm.checkValidity()) { console;log("INVALID FORM SUBMISSION"). $('#signupForm'):find('.submit');click(); return. } $("#signupForm");submit(). } $("#signupForm").submit(function(event){ console;log("FORM SUBMITTED AND PAGE DOES NOT REDIRECT"). event;preventDefault(). // not working here $.post($(this),attr('action'). $(this),serialize(). function(response){ // do something here on success console;log(response), };'json'); return false; // not working here }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <form method="POST" id="signupForm" action="submitSignup.php" enctype="multipart/form-data" validate> <input type="text" name="eee" required/> <input type="submit" style="display: none;" required/> <button type="button" onclick='submitForm();' id="ccInfoButton" class="btn btn-primary buttonSignup" >CREATE ACCOUNT NOW<i class="iconRequired icon-chevron-right"></i></button> </form>
<!DOCTYPE html>
<html>
<body>
<form method="POST" id="signupForm" action="submitSignup.php" enctype="multipart/form-data" validate>
<input type="text" name="eee" required/>
<input type="submit" style="display: none;" required/>
<button type="button" onclick='submitForm();' id="ccInfoButton" class="btn btn-primary buttonSignup" >CREATE ACCOUNT NOW<i class="iconRequired icon-chevron-right"></i></button>
</form>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
function submitForm() {
console.log("SUBMIT BUTTON CLICKED");
var subForm = $('#signupForm')[0] ;
if (!subForm.checkValidity()) {
console.log("INVALID FORM SUBMISSION");
$('#signupForm').find(':submit').click() ;
return ;
}
$("#signupForm").submit();
}
$("#signupForm").submit(function(event){
console.log("FORM SUBMITTED AND PAGE DOES NOT REDIRECT");
event.preventDefault(); // now working
$.post($(this).attr('action'), $(this).serialize(), function(response){
// do something here on success
console.log(response) ;
},'json');
return false; // not working here
});
</script>
</html>
解决方案2
0 已采纳 2021-12-07 16:19:34
@DankyiAnnoKwaku - kudos to Dankyi for getting me on the right track, but his solution didn't work for me, I had to adapt it a bit more: @DankyiAnnoKwaku - 感谢 Dankyi 让我走上正轨，但他的解决方案对我不起作用，我不得不对其进行更多调整：
<script type="text/javascript">
function submitForm() {
console.log("SUBMIT BUTTON CLICKED");
var subForm = $('#signupForm')[0] ;
if (!subForm.checkValidity()) {
console.log("INVALID FORM SUBMISSION");
$('#signupForm').find(':submit').click() ;
return ;
}
$("#signupForm").submit();
}
// Had to wrap the `submit(function(event)` in the root `$(document).ready ....`
$(document).ready(function(event) {
$("#signupForm").submit(function(event){
console.log("FORM SUBMITTED AND PAGE DOES NOT REDIRECT");
event.preventDefault(); // now working
$.post($(this).attr('action'), $(this).serialize(), function(response){
// do something here on success
console.log(response) ;
},'json');
return false; // not working here
});
}) ;
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.