jQuery submit(）-用于覆盖表单操作的事件

jQuery submit()-event to override form action

本文关键字：表单 操作 事件 覆盖 用于 submit jQuery      更新时间：2023-09-26

我有一个表单，我有一些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>

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

代替：

 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>

您可以在此处查看或

<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>
相关文章：