2012-03-27 124 views
1

我有一個小問題。表單在jquery中返回false後不再提交

當表單提交併且表單返回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>'; 
} 

所有從當錯誤工作開顯示它不會重新提交。

+0

請勿使用內聯腳本和代碼。並再次測試。 – gdoron 2012-03-27 13:31:57

回答

2

功能試着用一些網址,而不是替換形式的行動屬性值的JavaScript方法。也有直接在Form.submit()事件中執行的parseResponse()方法體。

編輯:

添加下列每if條件return false之前的代碼行。它會做的伎倆。

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

然後javascript將不起作用 – Robert 2012-03-27 13:35:06

+0

它將工作,因爲你正在調用表單提交事件相同的方法。即使在這之前,只要我們顯示錯誤,請嘗試啓用「提交」按鈕。這將會訣竅 – Epuri 2012-03-27 13:46:06

+0

如何在返回false後再次啓用提交按鈕? – Robert 2012-03-27 13:47:47

0

由於您希望在不重新加載頁面的情況下提交表單,因此無論如何您都希望返回false。
只需在$ .post()後添加return false即可;防止頁面重載

,如果要禁用提交後提交按鈕,然後執行它回調的$。員額

1

當用戶點擊提交,它看起來像你禁用提交按鈕(以防止雙重提交,我假設)。

當返回false時,您永遠不會重新啓用提交按鈕。您需要確保在返回false之前從提交按鈕中刪除了disabled屬性。

+0

我沒有故意禁用提交按鈕,我將如何啓用提交按鈕? – Robert 2012-03-27 13:45:18

相關問題