How to get function to fire when buttonless form is submitted

Question

I have a page with many forms on it. could be 1..200. None of these forms have buttons and they are built programatically. I am using jquery to submit all the forms that are checked.

   function FakeName()
   {

        $("input:checked").parent("form").submit();

   }

My forms look like:

    <form name="FakeForm<%=i%>" action="javascript:void%200" onSubmit="processRow(<%=i%>)" method="post" style="margin:0px;">
      <input type="checkbox" name="FakeNameCheck" value="FakeNameCheck"/>
      <input type="hidden" name="FakeNum" value="<%= FakeNum%>"/>
      <input type="hidden" name="FakeId" value="<%=FakeIdr%>"/>
      <input type="hidden" name="FakeAmt" value="<%=FakeAmount%>"/>
      <input type="hidden" name="FakeTrans" value="FakeTrans"/>
    </form>

Note: action is set to "javascript:void%200" so that it posts to a fake page. I want to handle my own posting in processRow.

OnSubmit never gets called and therefore ProcessRow never gets called.

Obviously all the names of the functions and variables have been changed to protect their identity :D

How can I get a function in each form to fire when I call submit programmatically.

Answer 1

The onsubmit handler is deliberately not triggered when you programatically submit the form. This is to avoid infinite recursion if an event handler would cause the event to be triggered again (and therefore the event handler to be called again)

However, of course you can call the processRow() function yourself in place of the .submit() call.

You're allowed to have inputs outside of forms. One school of thought is that a <form> shouldn't be a <form> if it's not intended to be submitted to the server via HTML.

Answer 2

Look up dispatchEvent and it's equivalent fireEvent. It's not the easiest thing in the world to use, but I think that's what you are looking for.

I'm surprised that there's no library that helps with this easily. Prototype (the one I've used the most) comes closest with a .fire() method on elements.

Answer 3

Looks like I may be able to do this:

<form name="FakeForm<%=i%>" action="javascript:processRow(<%=i%>)" method="post" style="margin:0px;">
                                <input type="checkbox" name="FakeNameCheck" value="FakeNameCheck"/>
                                <input type="hidden" name="FakeNum" value="<%= FakeNum%>"/>
                                <input type="hidden" name="FakeId" value="<%=FakeIdr%>"/>
                                <input type="hidden" name="FakeAmt" value="<%=FakeAmount%>"/>
                                <input type="hidden" name="FakeTrans" value="FakeTrans"/>
                        </form>

Are there any drawbacks to this?