提交时停止表单刷新页面

小开

最佳答案

可以阻止表单提交

$("#prospects_form").submit(function(e) {
e.preventDefault();
});

当然，在函数中，你可以检查空字段，如果有什么看起来不正确，e.preventDefault()将停止提交。

没有jQuery:

var form = document.getElementById("myForm");
function handleForm(event) { event.preventDefault(); }
form.addEventListener('submit', handleForm);

小开

将按钮类型替换为button:

<button type="button">My Cool Button</button>

小开

就我个人而言，我喜欢在提交时验证表单，如果有错误，就返回false。

$('form').submit(function() {


var error;


if ( !$('input').val() ) {
error = true
}


if (error) {
alert('there are errors')
return false
}


});

http://jsfiddle.net/dfyXY/

小开

大多数人会通过调用event.preventDefault()函数来阻止表单提交。

另一种方法是删除按钮的onclick属性，并将processForm()中的代码取出到.submit(function() {中，因为return false;会导致表单无法提交。另外，让formBlaSubmit()函数根据有效性返回布尔值，以便在processForm();中使用

katsh的答案是一样的，只是更容易消化。

(顺便说一下，我是stackoverflow的新手，请给我指导。)

小开

您可以使用此代码进行表单提交，而不需要刷新页面。我在我的项目中做过这个。

$(function () {
$('#myFormName').on('submit',function (e) {


$.ajax({
type: 'post',
url: 'myPageName.php',
data: $('#myFormName').serialize(),
success: function () {
alert("Email has been sent!");
}
});
e.preventDefault();
});
});

小开

添加以下onsubmit="return false"代码:

<form onsubmit="return false">

这为我解决了问题。它仍然会运行您指定的onClick函数。

小开

当你给用户两种提交表单的可能性时，这个问题变得更加复杂:

通过单击一个AD hoc按钮
按回车键

在这种情况下，您将需要一个函数来检测按下的键，如果按下Enter键，您将提交表单。

现在IE的问题来了(在任何情况下版本11) 备注: Chrome和FireFox不存在此问题!

当你点击提交按钮时，表单被提交一次;很好。
当你点击回车键时，表单被提交了两次…您的servlet将被执行两次。如果服务器端没有PRG (post redirect get)体系结构，结果可能会出乎意料。

虽然解决方案看起来微不足道，但我花了好几个小时来解决这个问题，所以我希望它可能对其他人有用。该解决方案已成功测试，除其他外，在IE (v 11.0.9600.18426)， FF (v 40.03)和amp;Chrome (v 53.02785.143 m 64位)

源代码HTML &Js在代码片段中。这里描述了原理。警告:< / p >

你不能在代码片段中测试它，因为post动作不是
.定义并按下Enter键可能会干扰stackoverflow

如果你遇到了这个问题，那么只需复制/粘贴js代码到你的环境中，并使其适应你的上下文。

/*
* inForm points to the form
*/
var inForm = document.getElementById('idGetUserFrm');
/*
* IE submits the form twice
* To avoid this the boolean isSumbitted is:
*  1) initialized to false when the form is displayed 4 the first time
* Remark: it is not the same event as "body load"
*/
var isSumbitted = false;


function checkEnter(e) {
if (e && e.keyCode == 13) {
inForm.submit();
/*
* 2) set to true after the form submission was invoked
*/
isSumbitted = true;
}
}
function onSubmit () {
if (isSumbitted) {
/*
* 3) reset to false after the form submission executed
*/
isSumbitted = false;
return false;
}
}

<!DOCTYPE html>
<html>
<body>


<form id="idGetUserFrm" method="post" action="servletOrSomePhp" onsubmit="return onSubmit()">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<input type="submit" value="Submit">
</form>


</body>
</html>

小开

如果你想使用纯Javascript，那么下面的代码段将是最好的。

假设:

超文本标记语言:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form Without Submiting With Pure JS</title>
<script type="text/javascript">
window.onload = function(){
/**
* Just Make sure to return false so that your request will not go the server script
*/
document.getElementById('simple_form').onsubmit = function(){
// After doing your logic that you want to do


return false
}
}
</script>
</head>
<body>


</body>
</html>
<form id="simple_form" method="post">
<!-- Your Inputs will go here  -->
<input type="submit" value="Submit Me!!" />
</form>

希望它对你有用!!

小开

在纯Javascript中，使用:e.preventDefault()

e.preventDefault()在jquery中使用，但在javascript中工作。

document.querySelector(".buttonclick").addEventListener("click",
function(e){


//some code


e.preventDefault();
})

小开

function ajax_form(selector, obj)
{


var form = document.querySelectorAll(selector);


if(obj)
{


var before = obj.before ? obj.before : function(){return true;};


var $success = obj.success ? obj.success: function(){return true;};


for (var i = 0; i < form.length; i++)
{


var url = form[i].hasAttribute('action') ? form[i].getAttribute('action') : window.location;


var $form = form[i];


form[i].submit = function()
{


var xhttp = new XMLHttpRequest();


xhttp.open("POST", url, true);


var FD = new FormData($form);


/** prevent submiting twice */
if($form.disable === true)


return this;


$form.disable = true;


if(before() === false)


return;


xhttp.addEventListener('load', function()
{


$form.disable = false;


return $success(JSON.parse(this.response));


});


xhttp.send(FD);


}
}
}


return form;
}

没有检查它是如何工作的。你也可以绑定(this)，这样它就会像jquery ajaxForm一样工作

像这样使用它:

ajax_form('form',
{
before: function()
{
alert('submiting form');
// if return false form shouldn't be submitted
},
success:function(data)
{
console.log(data)
}
}
)[0].submit();

它返回节点，所以你可以像上面的例子那样提交

到目前为止，它还不是完美的，但它应该工作，你应该添加错误处理或删除禁用条件

小开

 $("#buttonID").click(function (e) {
e.preventDefault();
//some logic here
}

小开

如果不使用action，只需在action属性中使用"javascript:"即可。

小开

在使用表单提交时防止重新加载页面的一个好方法是在onsubmit属性中添加return false。

<form onsubmit="yourJsFunction();return false">
<input type="text"/>
<input type="submit"/>
</form>

小开

最好的解决方案是onsubmit调用任何你想调用的函数，然后返回false。

onsubmit="xxx_xxx(); return false;"

小开

有时e.preventDefault ();工作，然后开发人员很高兴，但有时不工作，然后开发人员很伤心，然后我找到解决方案，为什么有时不工作

第一个代码有时可以工作

$("#prospects_form").submit(function(e) {
e.preventDefault();
});

第二个选择为什么不工作? 这是行不通的，因为jquery或其他javascript库没有正确加载，你可以在控制台检查它，所有的jquery和javascript文件是否正确加载

这解决了我的问题。我希望这对你有帮助。

小开

在我看来，大多数答案都是试图解决你的问题所提出的问题，但我不认为这是适合你的情况的最佳方法。

在字段中没有任何数据的情况下，按下发送按钮时，如何防止页面刷新?

.preventDefault()确实不会刷新页面。但我认为一个简单的require字段你想要填充数据，将解决你的问题。

<form id="prospects_form" method="post">
<input id="form_name" tabindex="1" class="boxsize" type="text" name="name" placeholder="Full name*" maxlength="80" value="" required/>
<input id="form_email" tabindex="2" class="boxsize" type="text" name="email" placeholder="Email*" maxlength="100" value="" required/>
<input id="form_subject" class="boxsize" type="text" name="subject" placeholder="Subject*" maxlength="50" value="FORM: Row for OUBC" required/>
<textarea id="form_message" class="boxsize" name="message" placeholder="Message*" tabindex="3" rows="6" cols="5" maxlength="500"></textarea>
</form>

注意在每个input后面添加的require标记。结果将是相同的:如果字段中没有任何数据，则不刷新页面。

小开

我希望这是最后一个答案




$('#the_form').submit(function(e){
e.preventDefault()
alert($(this).serialize())
// var values = $(this).serialize()
// logic....
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<form id="the_form">
Label-A <input type="text" name='a'required><br>
Label-B <input type="text" name="b" required><br>
Label-C <input type="password" name="c" required><br>
Label-D <input type="number" name="d" required><br>
<input type="submit" value="Save without refresh">
</form>






< /代码> < / >之前


                                                
                            
                                
                                    
                                
                            
                            
                                
                                    
                                        小开
                                        
                                    
                                
                                
                                                                        
                                                                                    JS的最佳方法是使用preventDefault()函数。
考虑下面的代码作为参考:
function loadForm(){
var loginForm = document.querySelector('form'); //Selecting the form
loginForm.addEventListener('submit', login);    //looking for submit
}


function login(e){
e.preventDefault(); //to stop form action i.e. submit
}

                                                                            
                                
                            
                        
                                                
                            
                                
                                    
                                
                            
                            
                                
                                    
                                        小开
                                        
                                    
                                
                                
                                                                        
                                                                                    <form onsubmit="myFunction(event)">
Name : <input type="text"/>
<input class="submit" type="submit">
</form>
<script>
function myFunction(event){
event.preventDefault();
//code here
}
</script>

                                                                            
                                
                            
                        
                                                
                            
                                
                                    
                                
                            
                            
                                
                                    
                                        小开
                                        
                                    
                                
                                
                                                                        
                                                                                    您可以通过清除状态来做到这一点，如下所示。将此添加到文档的最开始。准备功能。
if ( window.history.replaceState ) {
window.history.replaceState( null, null, window.location.href );
}