Question

I have a form, and I have some jquery code to override the submit process. But it’s not working and there are no errors. I have simplified the sample code, hope I made no typos.

Does anyone know what is wrong with the code? It doesn’t come to the point where I get the alert(). The click() event works fine.

I tried setting an id to the form. still nothing.

Using 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

The way you’re submitting the form bypasses the event handelers.

Instead of:

 document.checkout_shipping.submit();

Use

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

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

Full code:

<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>