2011-11-21 2 views
0

ajax 요청을 실행하기 위해 submit() 핸들러를 양식에 첨부하려는 경우, 양식이 정상적으로 제출됩니다. 이것이 가능한가? $ ('# myForm'). submit()은 재귀 적으로 같은 함수를 호출합니다.jquery call 사용자 정의 양식 제출 후 일반

모든 사용자가 마우스로 양식을 제출하는 것이 아니기 때문에 제출 버튼 클릭에 이벤트 처리기를 첨부하지는 않을 것입니다. 많은 이들은 나 자신과 마찬가지로 리턴 키를 사용합니다.

답변

5

시도해보십시오. 아래 코드에서 양식 제출 아약스 성공 처리기에서 양식 제출 이벤트 처리기를 바인딩하고 양식을 제출합니다.

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

    //Do ajax call here 
    $.ajax({ 
     url: "url", 
     success: function(){ 
      //On success do what you want to do 
      //and then ubind the submit event handler and submit the form 

      $('form').unbind('submit').submit(); 
     } 
    }); 

    //Prevent default form submit 
    return false; 

}); 
+0

바인딩 해제! 이런! 고마워, 나는 그것을 시도 할 것이지만, 나는 그것이 작동한다는 것을 이미 알고있다. :) – UncleCheese

+0

@UncleCheese - 도움이된다면 대답으로 표시 할 수 있습니까? – ShankarSangoli

1

이 당신을 위해 작동합니다 :

$('form').submit(function(e) { 
    e.preventDefault(); 
    var that = this; 
    $.post('url', function() { 
     that.submit(); 
    }); 
}); 

e.preventDefault()는 기본 양식 제출 중지합니다. 그런 다음 dom 요소에 .submit()을 호출하여 jQuery 핸들러가 포착하지 않은 제출을 수행 할 수 있습니다.

+0

흥미 롭군요. 나는 이것을 시도 할 것이다. that.submit()이 preventDefault() 호출에 충돌하지 않는 이유는 무엇입니까? – UncleCheese

0

아약스 응답을 받았는지 여부를 나타내는 변수가있을 수 있습니다. 'submit'이벤트 핸들러의 바인딩을 해제하는 것보다 조금 덜 우아 할 수도 있지만 또 다른 아이디어입니다.

var ajaxResponse = false; 

$('form').submit(function() { 
    var form = $(this); 
    if(ajaxResponse == false){ 
     $.post('url', function() { 
      ajaxResponse = true; 
      // Do something 
      form.submit(); 
     }); 
     return false; 
    }else{ 
     return true; 
    } 
});