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>