在提交时停止表单刷新页面

Question

如果在没有字段中的任何数据的情况下按下发送按钮,我将如何防止页面刷新？

验证设置正常,所有字段都变为红色,然后页面立即刷新.我对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>

JS

$(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
    /////////////////
});

Answer 1

您可以阻止表单提交

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

当然,在函数中,您可以检查空字段,如果看起来不正确,e.preventDefault()将停止提交.

Answer 2

将按钮类型替换为button:

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

Answer 3

添加这个onsubmit ="return false"代码:

<form name="formname" onsubmit="return false">

这为我解决了这个问题.它仍将运行您指定的onClick函数

Answer 4

使用表单提交时防止重新加载页面的一种好方法是添加return falseonsubmit 属性。

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

Answer 5

您可以使用此代码进行表单提交,而无需刷新页面.我在我的项目中完成了这个.

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

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

Answer 6

当您为用户提供2种提交表单的可能性时,此问题会变得更加复杂:

1. 通过单击ad hoc按钮
2. 按Enter键

在这种情况下,如果按下Enter键,您将需要一个功能来检测您将在其中提交表单的按键.

IE现在出现问题(无论如何都是版本11)备注:Chrome和FireFox都不存在此问题!

• 单击"提交"按钮时,表单将提交一次; 精细.
• 当您按Enter键时,表单将被提交两次...并且您的servlet将被执行两次.如果您没有PRG(post redirect get)体系结构服务器,则结果可能是意外的.

虽然解决方案看起来微不足道,但我花了很多时间来解决这个问题,所以我希望它对其他人来说可能是有用的.此解决方案已成功通过IE(v 11.0.9600.18426),FF(v 40.03)和Chrome(v 53.02785.143 m 64 bit)进行测试

源代码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>

Answer 7

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

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

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

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

Answer 8

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

e.preventDefault() 用于jquery，但可用于javascript。

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

  //some code

  e.preventDefault();
})

Answer 9

最好的解决方案是 onsubmit 调用任何你想要的函数并在它之后返回 false。

onsubmit="xxx_xxx(); return false;"

Answer 10

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