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

您提交表单的方式会绕过事件处理程序。

而不是：

 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>

jQuery submit（） - 覆盖表单操作的事件

2 个答案: