在jquery中返回false后,表单没有再次提交


form not submitting again after returning false in jquery

我有一个小问题。

当表单提交且表单返回false时,它将不会再次提交。

例如。如果用户漏掉了他们的名字,它将返回false,并显示一条消息,声明输入他们的名字。

但是,如果不刷新页面,用户就无法重新提交表单,这意味着所有数据都将丢失。

我该如何阻止这一切?

这是html端:

<form action="javascript:parseResponse();" method="post" name="ajaxcontactform" id="ajaxcontactform">
                <div class="contacttextarea">
                    <input name="contactform" type="hidden" value="1" />
                    <fieldset>
                        <textarea name="comment" cols="5" rows="5" class="contacttextarea"onfocus="if (this.value == 'Please Leave A Message') {this.value = '';}">Please Leave A Message</textarea>
                    </fieldset>
                </div>
                <div class="contacttextboxes">
                    <fieldset>
                        <input id="name" name="name" type="text" class="contacttextform" onfocus="if (this.value == 'Please Insert Your Name') {this.value = '';}"value="Please Insert Your Name">
                    </fieldset>
                    <fieldset>
                        <input id="phone" name="phone" type="text" class="contacttextform" onfocus="if (this.value == 'Please Insert Your Phone Number') {this.value = '';}"value="Please Insert Your Phone Number">
                    </fieldset>
                    <fieldset>
                        <input id="email" name="email" type="text" class="contacttextform" onfocus="if (this.value == 'Please Insert Your Email') {this.value = '';}"value="Please Insert Your Email">
                    </fieldset>
                    <fieldset>
                        <input name="send" type="submit" class="contactformbutton" value="Send">
                    </fieldset>
                </div>
            </form>

这是jquery端的

$(document).ready(function() {
//// Start Contact Form ////
    $('#ajaxcontactform').submit(function(){$('input[type=submit]', this).attr('disabled', 'disabled');});

    $('#ajaxcontactform').submit(
        function parseResponse() {
            var usersname = $("#name");
            var usersemail = $("#email");
            var usersphonenumber = $("#phone");
            var usersmessage = $("#comment");
            var url = "contact.php";
                var emailReg = new RegExp(/^(("['w-'s]+")|(['w-]+(?:'.['w-]+)*)|("['w-'s]+")(['w-]+(?:'.['w-]+)*))(@((?:['w-]+'.)*'w['w-]{0,66})'.([a-z]{2,6}(?:'.[a-z]{2})?)$)|(@'[?((25[0-5]'.|2[0-4][0-9]'.|1[0-9]{2}'.|[0-9]{1,2}'.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})'.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})']?$)/i);
                var valid = emailReg.test(usersemail);
                if(!valid) {
                    $("#contactwarning").html('<p>Your email is not valid!</p>').slideDown().delay(3000).slideUp();
                    return false;
                }
              if (usersname.val() == "" || usersname.val() == "Please Insert Your Name") {                
                   $("#contactwarning").html('<p>Please Insert Your Name!</p>').slideDown().delay(3000).slideUp();
                   return false;                   
              }
              if (usersemail.val() == "" || usersemail.val() == "Please Insert Your Email") {
                   $("#contactwarning").html('<p>Please Insert Your Email!</p>').slideDown().delay(3000).slideUp();
                   return false;
              }
              if (usersphonenumber.val() == "" || usersphonenumber.val() == "Please Insert Your Phone Number") {
                   $("#contactwarning").html('<p>Please Insert Your Phone Number!</p>').slideDown().delay(3000).slideUp();
                   return false;
              }
              if (usersmessage.val() == "") {
                   $("#contactwarning").html('<p>You forgot to leave a message!</p>').slideDown().delay(3000).slideUp();
                   return false;
              }

                    $.post(url,{ usersname: usersname.val(), usersemail: usersemail.val(), usersphonenumber: usersphonenumber.val(), usersmessage: usersmessage.val() } , function(data) {
                        $('#contactajax').html(data);
                        $("#ajaxcontactform").fadeOut(100).delay(12000).fadeIn(3000);
                        $('#contactajax').fadeIn(3000).delay(3000).fadeOut(3000);
                    });
          }
      );
//// End Contact Form ////
 });

以下是php部分:

<?php
if(isset($_REQUEST['contactform']) && $_REQUEST['contactform'] == 1){
    echo '<p>Success!</p>';
} else {
    echo '<p>Form could not be sent, please try again!</p>';
}

除了显示错误时不会重新提交外,所有操作都正常。

尝试用一些URL代替JavaScript方法替换表单的动作属性值。还要在Form.submit()事件中直接执行parseResponse()方法体。

编辑:

在每个if条件下,在return false之前添加以下代码行。它会起作用的。

 $('input[type=submit]', $("#ajaxcontactform")).removeAttr('disabled');

当用户单击提交时,看起来像是在禁用提交按钮(我想是为了防止双重提交)。

当返回false时,您永远不会重新启用提交按钮。在返回false之前,您需要确保已从提交按钮中删除禁用的属性。

在任何情况下,您都希望返回false,因为您希望在不重新加载页面的情况下提交表单
只需在$.post()之后添加return false;以防止页面重新加载

如果您想在提交后禁用提交按钮,请在$.post 的回调函数中执行此操作