jQuery.trigger weirdness

Earlier today, I was trying to use jQuery to trigger the submission of a form after a radio button was clicked. The form tag looked something like:

    <form action="" id="someForm" method="GET" onsubmit="saysomething(); return false">
   ...form..
   </form>

    <script type="text/javascript">
    
    function saysomething(){
      alert("Hello world from saysomething()");
    }

   </script>

So for a regular submit button:

  <input type="submit" value="Submit Form" />

Everything works fine, you’ll see the alert() and the form won’t submit because of the return false.

I ran into issues when I tried to trigger() the submit event with jQuery. I was trying to trigger the submit() event on the form via jQuery. The problem I ran into, was that the saysomething() function was getting called, but the “return false” seemed to have no effect.

The final form looked something like:

    <form action="" id="someForm" 
          method="GET" onsubmit="saysomething(); return false">
      <input type="text" name="someshit" />
      <input type="submit" value="Submit Form" />
      <input type="button" value="jQuery.submit()" id="clickIt" />
    </form>

    <script type="text/javascript">
    
    function saysomething(){
      alert("Hello world from saysomething()");
    }
    
    $(document).ready( function(){
      $("#clickIt").click( function(){ $("#someForm").submit(); });
    });
    
    </script>

For some reason, if you submit the form via a jQuery trigger the form submits even though saysomething() gets called. I’m not sure if this is the expected behavior but it was certainly something of a shock. Anyway, a live version of the form is running here.

Questions or comments about this? Email us at contact@setfive.com.

Read more