提交时停止表单刷新页面

当按下发送button而没有任何数据在字段中时,我将如何去防止刷新页面?

validation设置工作正常,所有字段都变红,但是页面立即刷新。 我对JS的知识是比较基础的。

特别是我认为最底层的processForm()函数是'bad'。

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

8 Solutions collect form web for “提交时停止表单刷新页面”

您可以防止表单提交

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

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

将buttontypesreplace为button

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

添加这个onsubmit =“返回false”代码:

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

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

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

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

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

另一种方法是删除button的onclick属性,并将processForm()的代码取出为.submit(function() { return false;导致表单不提交,并且使formBlaSubmit()函数返回Boolean基于有效性,用于processForm();

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

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

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

  1. 通过点击一个特别的button
  2. 按Enter键

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

现在问题与IE浏览器(无论如何版本11)备注:这个问题不存在与Chrome或FireFox!

  • 当你点击提交button表单提交一次; 精细。
  • 当你按Enter键时,表单被提交两次,你的servlet将被执行两次。 如果您没有PRG(postredirectget)架构serverside结果可能是意外的。

即使解决scheme看起来微不足道,但花了我好几个小时才能解决这个问题,所以我希望对其他人来说可能是有用的。 此解决scheme已成功通过IE(v 11.0.9600.18426),FF(v 40.03)和Chrome(v 53.02785.143 m 64位)testing,

源代码HTML&js位于代码片段中。 那里描述的原则。 警告:

你不能在代码片段中testing它,因为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> 

我个人喜欢validation提交表单,如果有错误,只是返回false。

 $('form').submit(function() { var error; if ( !$('input').val() ) { error = true } if (error) { alert('there are errors') return false } }); 

http://jsfiddle.net/dfyXY/

只要把这样的回报:

 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> 
  • 点击后如何清除input文字
  • 未捕获的SyntaxError:具有JSON.parse的意外标记
  • 使用jQuery数据表时禁用最后一列的sorting
  • 如何删除数据表中的分页
  • 任何人都可以用通俗的话来解释JSONP是什么?
  • 为什么这个jQuery点击function不起作用?
  • 在jquery mobile中dynamic添加<li />到<ul />
  • 如何在Safari中使用jQuery查找多背景的background-position / background-image等
  • 从jQuery对象获取基本元素
  • JSONstring到JS对象
  • 在AJAX风格的jQuery UI选项卡中加载的jQuery UI对话窗口