ajax 및 jQuery로 양식 제출

Question

하나의 선택 상자와 두 개의 옵션이있는 간단한 양식이 있습니다. 다음은 관련 jQuery 코드입니다.

$('.myCssClass').on('change', function() { 
     alert("This is executed"); 
     $(this).parent().submit(function(e) { 
     alert("This is NOT executed"); 
      $.ajax({ 
       type: "POST", 
       url: "script.php", 
       data: $(this).parent().serialize(), 
       success: function(data) 
       { 
        alert(data); 
       } 
       }); 
      e.preventDefault(); 
     }); 

양식은 선택 상자의 부모입니다. 따라서 첫 번째 경고는 선택 상자 옵션을 변경할 때 실행되지만 다음 옵션에는 도달하지 않습니다. 왜 그런가?

Answer 1

이렇게해야합니다. 제출 이벤트에 신경 쓰지 마세요. 선택 상자에서 트리거되지 않습니다.

$('.myCssClass').on('change', function() { 
     $.ajax({ 
      type: "POST", 
      url: "script.php", 
      data: $(this).parent().serialize(), 
      success: function(data) 
      { 
       alert(data); 
      } 
     }); 
    }); 

Answer 2

는 당신은 다른 이벤트 outide submit 이벤트 리스너를 만들 수 있습니다

$('.myCssClass').parent().submit(function(e) { 
    $.ajax({ 
     type: "POST", 
     url: "script.php", 
     data: $(this).serialize(), 
     success: function(data){ 
      alert(data); 
     } 
    }); 

    e.preventDefault(); 
}); 

$('.myCssClass').on('change', function() { 
    $(this).parent().submit(); 
}); 

또는 체인 등

:

$('.myCssClass').on('change', function() { 
    $(this).parent().submit(); 
}) 
.parent().submit(function(e) { 
    $.ajax({ 
     type: "POST", 
     url: "script.php", 
     data: $(this).serialize(), 
     success: function(data){ 
      alert(data); 
     } 
    }); 

    e.preventDefault(); 
}); 

왜 두 개의 이벤트? 그냥 변화에 데이터를 전송 :이 작품

$('.myCssClass').on('change', function() { 
    $.ajax({ 
     type: "POST", 
     url: "script.php", 
     data: $(this).parent().serialize(), 
     success: function(data){ 
      alert(data); 
     } 
    }); 
}); 

Answer 3

$('.myCssClass').on('change', function() { 
    alert("This is executed"); 
    $(this).parent('form#id').submit(); // improve performance by reducing the traversal 
}); 

$("#form-with-id").on('submit', function(e){ 
    e.preventDefault(); 
    var data = $(this).serialize(); 
    $.ajax({ 
     type: "POST", 
     url: "script.php", 
     data: data, 
     success: function(data){ 
     alert(data); 
     } 
    }); 
}); 

희망을.

Answer 4

는 다음을 시도해보십시오

핸들러가 제공된다

$('.myCssClass').on('change', function() { 
    alert("This is executed"); 
    $(".form-with-class").submit(); 
}); 

$(".form-with-class").on('submit', function(e){ 
    e.preventDefault(); 
    $.ajax({ 
     type: "POST", 
     url: "script.php", 
     data: $(".form-with-class").serialize(), 
     success: function(data){ 
     alert(data); 
     } 
    }); 
}); 

Answer 5

은 핸들러를 등록하지만 실제 제출 수행하지 않습니다.

당신은 전화를 걸 수 있습니다

$(this).parent().submit(); 

를 핸들러가 등록 된 후. 또한 핸들러 내에서 핸들러는 양식에 속하기 때문에 "$ (this)"가 아닌 "$ (this) .parent()"가 아닌 폼을 참조해야합니다.

하지만 submit을 명시 적으로 호출하기 때문에 호출 한 핸들러를 등록 할 필요가 없습니다. 직접 아약스 요청을 할 수 있습니다 :

$('.myCssClass').on('change', function() { 
    alert("This is executed"); 
     $.ajax({ 
      type: "POST", 
      url: "script.php", 
      data: $(this).parent().serialize(), 
      success: function(data) 
      { 
       alert(data); 
      } 
      }); 
    });