AJAX 성공 콜백은 첫 번째 기능 만 수행합니다.

Question

나는 간단한 양식 제출을 받았는데, 성공하면 알림을 받고 양식을 삭제하라는 전화가 왔습니다. 알림을 받으면 정보가 데이터베이스에 성공적으로 추가되지만 두 번째 호출 (양식을 지우려면 수행되지 않음). 나는 그것이 내가 잘못하고있는 것이 단순한 것이라고 확신한다. 그러나 나는 그것을 이해할 수 없다.

$('#contact_submit').click(function(e){ 
       if ($("#submit_form_contact").valid()) { 


        var post_data = { 
         "name" : $('#name').val(), 
         "email" : $('#email').val(), 
         "inquiry" : $('#inquiry_dropdown option:selected').text(), 
         "message" : $('#message').val() 
        }; 


        $.ajax({ 
         type: "POST", 
         url: "process-contact.php", 
         data: post_data, 
         success: function(data) { 
         alert("Thank you for contacting us."); 
         $('#submit_form_contact').reset(); 
         } 
        }); 

        e.preventDefault(); 

       } 

또한 제출 버튼은 제출 입력이 아닌 단지 버튼 일뿐입니다. Why()를 방지해야합니까? 나는 이것에 관해 새로운 사람이다.

Answer 1

jQuery에는 .reset() 메서드가 없습니다.

대신이 작업을 수행합니다 :

는

$('#submit_form_contact')[0].reset(); 

이 첫 번째 DOM 요소를 잡고, 그리고 네이티브 .reset()를 호출합니다. 양식이 발견되지 않을 경우 요소를 테스트하십시오.

var f = $('#submit_form_contact')[0]; 

if (f) 
    f.reset(); 

---

은 물론 당신은 정말 당신이 어떤 jQuery를 방법을 사용하지 않을거야 특히, ID에 의해 요소를 얻기 위해 jQuery를 필요가 없습니다.

var f = document.getElementbyId('submit_form_contact'); 

if (f) 
    f.reset(); 

---

또 다른 대안은, 아약스 호출의 context:로 제출 버튼을 설정된 form 속성을 사용하는 것입니다. 경고 및 리셋 사이에`;

   $.ajax({ 
        context: this, 
        type: "POST", 
        url: "process-contact.php", 
        data: post_data, 
        success: function(data) { 
        alert("Thank you for contacting us."); 
        this.form.reset(); 
        } 
       }); 

Answer 2

이 라인은`CONSOLE.LOG을 ($ ('#의 submit_form_contact'))를 추가 너무

$("#submit_form_contact").trigger('reset');