javascript - 提交时停止表单刷新页面

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

score 272 · Accepted Answer

您可以阻止表单提交

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

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

没有 jQuery：

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

score 121 · Accepted Answer

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

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

那为我修好了。它仍将运行您指定的 onClick 函数

score 87 · Accepted Answer

87

将按钮类型替换为button：

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

于 2013-10-18T16:18:48.360 回答

score 34 · Accepted Answer

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

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

score 21 · Accepted Answer

您可以使用此代码提交表单而无需刷新页面。我在我的项目中做到了这一点。

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

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

score 8 · Accepted Answer

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

通过单击临时按钮
通过按 Enter 键

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

现在出现了 IE 的问题（无论如何是 11 版）备注：Chrome 和 FireFox 都不存在这个问题！

当您单击提交按钮时，表单被提交一次；美好的。
当您点击 Enter 时，表单会提交两次……您的 servlet 将被执行两次。如果您没有 PRG（重定向后获取）架构服务器端，则结果可能出乎意料。

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

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

您无法在代码段中对其进行测试，因为未定义发布操作并且按 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>

score 6 · Accepted Answer

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

onsubmit="xxx_xxx(); return false;"

score 5 · Accepted Answer

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

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

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

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

score 5 · Accepted Answer

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

e.preventDefault()在 jquery 中使用，但在 javascript 中有效。

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

  //some code

  e.preventDefault();
})

score 4 · Accepted Answer

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

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

    var error;

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

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

});

http://jsfiddle.net/dfyXY/

score 4 · Accepted Answer

4

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

于 2018-09-05T08:17:23.530 回答

score 1 · Accepted Answer

1

如果您不使用操作，只需在表单的操作属性中使用“javascript:”。

于 2019-06-08T12:36:19.557 回答

score 1 · Accepted Answer

如果你想使用纯 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>

希望它对你有用！

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

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

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

请注意在require每个input. 结果将是相同的：在字段中没有任何数据的情况下不刷新页面。

score 1 · Accepted Answer

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

score 0 · Accepted Answer

Sometimes e.preventDefault(); works then developers are happy but sometimes not work then developers are sad then I found solution why sometimes not works

first code sometimes works

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

second option why not work? This doesn't work because jquery or other javascript library not loading properly you can check it in console that all jquery and javascript files are loaded properly or not.

This solves my problem. I hope this will be helpful for you.

score 0 · Accepted Answer

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

没有检查它是如何工作的。你也可以 bind(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();

它返回节点，所以你可以做一些类似提交我上面的例子

远非完美，但它应该可以工作，您应该添加错误处理或删除禁用条件

score 0 · Accepted Answer

我希望这将是最后一个答案




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

score -1 · Accepted Answer

对于纯 JavaScript，请改用 click 方法

<div id="loginForm">
    <ul class="sign-in-form">
        <li><input type="text" name="username"/></li>
        <li><input type="password" name="password"/></li>
        <li>
            <input type="submit" onclick="loginForm()" value="click" />
        </li>
    </ul>
</div>

<script>
function loginForm() {
    document.getElementById("loginForm").click();
}
</script>

score -1 · Accepted Answer

刚刚找到了一个非常简单但有效的解决方案，<form></form>从我想阻止发布和刷新的部分中删除。

<select id="youId" name="yourName">
<select> 
<option value="1</option>
<option value="2</option>
<option value="3</option>
</select>
<input id="formStockVal1" type="number"><br><br>
<form> 
<button type="reset" id="stockCancel">Cancel</button>
<button type="reset" id="stockConfirm">Add</button>
</form>

此处只有按钮按应有的方式提交。

score -2 · Accepted Answer

只需像这样返回：

function validate()
{

  var username=document.getElementById('username').value;
  
	  if(username=="")
	  {
		return false;	
	  }
	  if(username.length<5&&username.length<15)
	  {
	  	alert("Length should between 5 to 15 characters");
	  	return false;
	  }
	  
	  return true;
}

body{
	padding: 0px;
	margin:0px;
}

input{
	display: block;
	margin-bottom:10px;
	height:25px;
	width:200px;
}

input[type="submit"]{
	margin:auto;
}

label{
	display:block;
	margin-bottom:10px;
}

form{
		width:500px;
		height:500px;
		border:1px solid green;
		padding:10px;
		margin:auto;
		top:0;
		bottom:0;
		left:0;
		right:0;
		position:absolute;		
}

.labels{
	width: 35%;
	box-sizing:border-box;
	display: inline-block;
}

.inputs{
	width: 63%;
	box-sizing:border-box;
	padding:10px;
	display: inline-block;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>FORM VALIDATION</title>
	<link rel="stylesheet" type="text/css" href="style.css">

	<script type="text/javascript" src="script.js"></script>
</head>

<body>
	<form action="#">
		<div class="labels">
			<label>Name</label>
			<label>Email</label>
		</div>

		<div class="inputs">
			<input type="text" name="username" id="username" required>
			<input type="text" name="email" id="email" required>
		</div>
		
		<input type="submit" value="submit" onclick="return validate();">
	</form>
</body>

</html>

从 validate() 返回真假；按要求发挥作用

score -2 · Accepted Answer

<FORM NAME=frm1 ...>
Name: <input type=textbox name=txtName id=txtName>
<BR>
<input type=button value="Submit" onclick=Validate()>



<Script>
    function Validate() { 
        Msg = ""

// Check fields
        if(frm1.txtName.value fails this) {
            Msg += "\n    The Name Field is improper"
        }
// Do the same for the rest of the form

        if(Msg == "") {
            frm1.submit()
        } else {
            alert("Your form has errors\n" + Msg)
        }
    }
</SCRIPT>

javascript - 提交时停止表单刷新页面

23 回答 23

对于纯 JavaScript，请改用 click 方法

Related

Reference