jQuery submit() - 양식 동작을 재정의하는 이벤트

Question

양식이 있고 제출 프로세스를 재정의 할 jquery 코드가 있습니다. 그러나 작동하지 않으며 오류가 없습니다. 샘플 코드를 단순화했습니다. 오타를 만들지 않았 으면합니다.

코드에 어떤 문제가 있는지 알고 있습니까? 그것은 내가 경고()를받는 지점에 오지 않는다. click() 이벤트가 제대로 작동합니다.

ID를 양식에 설정하려고했습니다. 아직 아무것도.

사용 JQuery와-1.4.2.min.js

<form name="checkout_shipping" action="checkout.php" method="post"> 
    <div class="contentText"> 
     <table border="0" width="100%" cellspacing="0" cellpadding="2"> 
     <tr onmouseover="rowOverEffect(this)" onmouseout="rowOutEffect(this)" onclick="selectRowEffect(this, 0); document.checkout_shipping.submit();"> 
      <td width="75%" style="padding-left: 15px;">Flat price</td> 
      <td>$8.00</td> 
      <td align="right"><input type="radio" name="shipping" value="flat_flat" onclick="this.form.submit();" /></td> 
     </tr> 
     <tr onmouseover="rowOverEffect(this)" onmouseout="rowOutEffect(this)" onclick="selectRowEffect(this, 1); document.checkout_shipping.submit();"> 
      <td>Pick-up</td> 
      <td>$0.00</td> 
      <td align="right"><input type="radio" name="shipping" value="pickup_pickup" checked="checked" onclick="this.form.submit();" /></td> 
     </tr> 
     </table> 
    </div> 
    </form> 

    <script> 
    $('form[name=checkout_shipping]').submit(function(e) { 
     e.preventDefault(); 
     alert('Houston we have contact!'); 
     $.ajax({ 
     url: '/includes/checkout/payment.php', 
     data: false, // false for testing 
     type: 'POST', 
     cache: false, 
     async: false, 
     dataType: 'html', 
     error: function(jqXHR, textStatus, errorThrown) { 
      // ... 
     }, 
     success: function(data) { 
      // ... 
     } 
     }); 
    }); 
    </script> 

Answer 1

양식을 제출하고있는 방법은 이벤트 handelers를 무시 확인할 수 있습니다. 대신

:

document.checkout_shipping.submit(); 

사용

$(this).closest('form').submit(); 

는 http://jsfiddle.net/6uZuS/

전체 코드를 참조하십시오 :

<form name="checkout_shipping" action="checkout.php" method="post"> 
    <div class="contentText"> 
     <table border="0" cellspacing="0" cellpadding="2"> 
      <tr onmouseover="rowOverEffect(this)" onmouseout="rowOutEffect(this)" onclick="selectRowEffect(this, 0); $(this).closest('form').submit();"> 
        <td width="75%" style="padding-left: 15px;">Flat price</td> 
        <td>$8.00</td> 
        <td align="right"><input type="radio" name="shipping" value="flat_flat" onclick="$(this).closest('form').submit();" /></td> 
       </tr> 
       <tr onmouseover="rowOverEffect(this)" onmouseout="rowOutEffect(this)" onclick="selectRowEffect(this, 1); $(this).closest('form').submit();"> 
        <td>Pick-up</td> 
        <td>$0.00</td> 
        <td align="right"><input type="radio" name="shipping" value="pickup_pickup" checked="checked" onclick="$(this).closest('form').submit();" /></td> 
       </tr> 
      </table> 
     </div> 
</form> 


<script type="text/javascript"> 
     $(document).ready(function(){ 
      $('form[name=checkout_shipping]').submit(function(e) { 
       e.preventDefault(); 
       alert('Got you!'); 
      }); 
     }); 
</script> 

Answer 2

당신은 here또는

<form name="checkout_shipping" id="checkout_shipping" action="checkout.php" method="post"> 
    <div class="contentText"> 
     <table border="0" width="100%" cellspacing="0" cellpadding="2"> 
     <tr onmouseover="rowOverEffect(this)" onmouseout="rowOutEffect(this)" onclick="selectRowEffect(this, 0);"> 
      <td width="75%" style="padding-left: 15px;">Flat price</td> 
      <td>$8.00</td> 
      <td align="right"><input type="radio" name="shipping" value="flat_flat" onclick="$(this).parents('form').submit();" /></td> 
     </tr> 
     <tr onmouseover="rowOverEffect(this)" onmouseout="rowOutEffect(this)" onclick="selectRowEffect(this, 1);"> 
      <td>Pick-up</td> 
      <td>$0.00</td> 
      <td align="right"><input type="radio" name="shipping" value="pickup_pickup" checked="checked" onclick="$(this).parents('form').submit();" /></td> 
     </tr> 
     </table> 
    </div> 
    </form> 
<script> 
$(document).ready(function(){ 
$('#checkout_shipping').submit(function(e) { 
     e.preventDefault(); 
     alert('Houston we have contact!'); 
}); 
}) 
</script>