提交时停止表单刷新页面

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

验证设置工作正常，所有字段都变红，但随后页面立即刷新。我对JS的了解比较基础。

特别是，我认为底部的processForm()函数是“坏”的。

HTML

<form id="prospects_form" method="post">
    <input id="form_name" tabindex="1" class="boxsize" type="text" name="name" placeholder="Full name*" maxlength="80" value="" />
    <input id="form_email" tabindex="2" class="boxsize" type="text" name="email" placeholder="Email*" maxlength="100" value="" />
    <input id="form_subject" class="boxsize" type="text" name="subject" placeholder="Subject*" maxlength="50" value="FORM: Row for OUBC" />
    <textarea id="form_message" class="boxsize" name="message" placeholder="Message*" tabindex="3" rows="6" cols="5" maxlength="500"></textarea>
        
    <button id="form_send" tabindex="5" class="btn" type="submit" onclick="return processForm()">Send</button>
    <div id="form_validation">
        <span class="form_captcha_code"></span>
        <input id="form_captcha" class="boxsize" type="text" name="form_captcha" placeholder="Enter code" tabindex="4" value="" />
    </div>
    <div class="clearfix"></div>
</form>

$(document).ready(function() { 

// Add active class to inputs
$("#prospects_form .boxsize").focus(function() { $(this).addClass("hasText"); });
$("#form_validation .boxsize").focus(function() { $(this).parent().addClass("hasText"); });
// Remove active class from inputs (if empty)
$("#prospects_form .boxsize").blur(function() { if ( this.value === "") { $(this).removeClass("hasText"); } });
$("#form_validation .boxsize").blur(function() { if ( this.value === "") { $(this).parent().removeClass("hasText"); } });


 
///////////////////
// START VALIDATION
$("#prospects_form").ready(function() {
    
    // DEFINE GLOBAL VARIABLES
    var valName = $('#form_name'),
        valEmail = $("#form_email"),
        valEmailFormat = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
        valMsg = $('#form_message'),
        valCaptcha = $('#form_captcha'),
        valCaptchaCode = $('.form_captcha_code');
        


    // Generate captcha
    function randomgen() {
        var rannumber = "";
        // Iterate through 1 to 9, 4 times
        for(ranNum=1; ranNum<=4; ranNum++){ rannumber+=Math.floor(Math.random()*10).toString(); }
        // Apply captcha to element
        valCaptchaCode.html(rannumber);
    }
    randomgen();
    
    
    // CAPTCHA VALIDATION
    valCaptcha.blur(function() {
        function formCaptcha() {
            if ( valCaptcha.val() == valCaptchaCode.html() ) {
                // Incorrect
                valCaptcha.parent().addClass("invalid");
                return false;
            } else {
                // Correct
                valCaptcha.parent().removeClass("invalid");
                return true;
            }
        }
        formCaptcha();
    });
    
    // Remove invalid class from captcha if typing
    valCaptcha.keypress(function() {
        valCaptcha.parent().removeClass("invalid");
    });
    
    
    // EMAIL VALIDATION (BLUR)
    valEmail.blur(function() {
        function formEmail() {
            if (!valEmailFormat.test(valEmail.val()) && valEmail.val() !== "" ) {
                // Incorrect
                valEmail.addClass("invalid");
            } else {
                // Correct
                valEmail.removeClass("invalid");
            }
        }
        formEmail();
    });
    
    // Remove invalid class from email if typing
    valEmail.keypress(function() {
        valEmail.removeClass("invalid");
    });
    
    
    // VALIDATION ON SUBMIT
    $('#prospects_form').submit(function() {
        console.log('user hit send button');

        // EMAIL VALIDATION (SUBMIT)
        function formEmailSubmit() {
            if (!valEmailFormat.test(valEmail.val())) {
                // Incorrect
                valEmail.addClass("invalid");
            } else {
                // Correct
                valEmail.removeClass("invalid");
            }
        }
        formEmailSubmit();

        // Validate captcha
        function formCaptchaSubmit() {
            if( valCaptcha.val() === valCaptchaCode.html() ) {
                // Captcha is correct
            } else {
                // Captcha is incorrect
                valCaptcha.parent().addClass("invalid");
                randomgen();
            }
        }
        formCaptchaSubmit();
        
        
        // If NAME field is empty
        function formNameSubmit() {
            if ( valName.val() === "" ) {
                // Name is empty
                valName.addClass("invalid");
            } else {
                valName.removeClass("invalid");
            }
        }
        formNameSubmit();
        
        
        // If MESSAGE field is empty
        function formMessageSubmit() {
            if ( valMsg.val() === "" ) {
                // Name is empty
                valMsg.addClass("invalid");
            } else {
                valMsg.removeClass("invalid");
            }
        }
        formMessageSubmit();
    
    
        // Submit form (if all good)
        function processForm() {
            if ( formEmailSubmit() && formCaptchaSubmit() && formNameSubmit() && formMessageSubmit() ) {
                $("#prospects_form").attr("action", "/clients/oubc/row-for-oubc-send.php");
                $("#form_send").attr("type", "submit");
                return true;
            } else if( !formEmailSubmit() ) {
                valEmail.addClass("invalid");
                return false;
            } else if ( !formCaptchaSubmit() ) {
                valCaptcha.parent().addClass("invalid");
                return false;
            } else if ( !formNameSubmit() ) {
                valName.addClass("invalid");
                    return false;
                } else if ( !formMessageSubmit() ) {
                    valMsg.addClass("invalid");
                    return false;
                } else {
                    return false;
                }
            }
        });
    });
    // END VALIDATION
    /////////////////
});

可以阻止表单提交

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

当然，在函数中，您可以检查是否有空字段，如果有任何地方看起来不正确，e.f preventdefault()将停止提交。

没有jQuery:

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

2013-10-18 16:16:54

将按钮类型替换为按钮:

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

2013-10-18 16:18:48

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

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

    var error;

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

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

});

http://jsfiddle.net/dfyXY/

2013-10-18 16:27:59

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

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

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

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

2013-10-18 16:48:13

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

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

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

2014-01-11 05:48:02

添加onsubmit="return false"代码:

<form onsubmit="return false">

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

2014-03-31 21:27:12

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

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

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

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

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

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

源代码HTML和js在代码片段中。这里描述了原理。警告:

您不能在代码片段中测试它，因为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>

2016-10-11 20:06:40

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

假设:

HTML:

<!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>

希望它对你有用!!

2018-01-11 05:44:45

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

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

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

  //some code

  e.preventDefault();
})

2018-03-01 18:10:57

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();

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

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

2018-07-31 08:46:00

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

2018-09-05 08:17:23

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

2019-06-08 12:36:19

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

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

2019-07-26 20:43:16

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

onsubmit="xxx_xxx(); return false;"

2019-11-06 08:56:19

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

第一个代码有时可以工作

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

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

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

2019-11-20 12:41:24

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

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

. preventdefault()确实不会刷新页面。但我认为，对想要填充数据的字段的简单要求将解决您的问题。

<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>

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

2020-05-22 08:36:46

我希望这是最后一个答案




$('#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>

2020-06-05 13:07:42

用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
}

2020-11-11 17:09:03

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

2020-12-02 00:17:22

您可以通过清除状态来做到这一点，如下所示。将此添加到文档的最开始。准备功能。

if ( window.history.replaceState ) {
    window.history.replaceState( null, null, window.location.href );
}

2022-05-23 09:40:11

提交时停止表单刷新页面

推荐文章

最新文章

标签