2012-03-27 2 views
1

작은 문제가 있습니다.jquery에서 false를 반환 한 후 양식이 다시 제출되지 않습니다.

양식이 제출되고 양식이 false를 반환하면 다시 제출하지 않습니다.

예를 들어. 사용자가 이름을 놓치면 false를 반환하고 이름을 입력하라는 메시지를 표시합니다.

하지만 사용자는 페이지를 새로 고침하지 않고 양식을 다시 제출할 수 없습니다. 즉, 페이지를 새로 고침하지 않아도 모든 데이터가 손실됩니다.

어떻게하면 되나요? PHP는 부 여기

<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 //// 

}); 

에게이다 : 여기서

은 HTML 쪽

<?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

답변

2

의 기능에 그것을 할 대신 일부 URL과 양식의 action 속성 값을 대체하십시오 JavaScript 메소드의. 또한 parseResponse() 메서드 본문을 Form.submit() 이벤트에서 직접 실행해야합니다.

편집 : 모든 if 상태 return false 전에 코드의 라인을 다음

추가. 그것은 트릭을 할 것입니다.

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

그러면 자바 스크립트가 작동하지 않습니다 – Robert

+0

양식 제출 이벤트에서 동일한 메소드를 호출 할 때 작동합니다. 이 모든 작업을 수행하기 전에 오류를 표시하는 즉시 "제출"버튼을 활성화하십시오. 그 트릭을 할 것입니다 – Epuri

+0

어떻게 false를 반환 한 후 제출 버튼을 다시 활성화합니까? – Robert

0

페이지를 다시로드하지 않고 양식을 제출하려는 경우 어떤 경우에도 false를 반환하고자 할 것입니다.
$ .post(); 뒤에 return false를 추가하기 만하면됩니다. 페이지를 다시로드에게

을 방지하고이 제출 한 후 버튼을 제출하지 않으려면, 다음 콜백 $ .post

1

사용자가 제출을 클릭하면 제출 버튼을 사용 중지 한 것처럼 보입니다 (중복 제출을 방지하기 위해).

false를 반환하면 제출 버튼을 다시 사용할 수 없습니다. false를 반환하기 전에 비활성화 된 속성이 제출 버튼에서 제거되었는지 확인해야합니다.

+0

나는 의도적으로 제출 버튼을 사용 중지하지 않았습니다. 어떻게 제출 버튼을 사용할 수 있습니까? – Robert

관련 문제