Question

I have run into an issue with JQuery form submissions and have found no answers anywhere . If someone could shed some light on this, it would be highly appreciated.

The issue: The first time I submit the form, it works fine. But if I submit the same form a second time, it sends 2 requests, 3 requests the third time, and so forth.

Script:

    function postInvokeFunctionForm(functionId){
      var formId = "#"+functionId+"-form";
      var formUrl = "invokeFunction.html?functionId="+functionId
      $(formId).submit(
        function(){
            $.ajax({
                type: 'POST',
                url: formUrl,
                data: $(formId).serialize(),
                success: function (data){
                 alert('successfully invoked function!' + data);
                }
            });
            return false;
           }
        );
   }

Dynamically generated form:

<form action="" method="post" id="xxxxx-form" class="invokeFunctionForm">
<input name="functionId" value="xxxxx" readonly="readonly" style="visibility: hidden;" type="text">
<input value="Invoke" onclick="postInvokeFunctionForm(xxxxx);" type="submit">
</form>

This obviously is undesirable. The only solution I can think of, id to re-render the (dynamically generated) form after being submitted, but that would be an expensive operation.

Is this a known issue with JQuery ajax submissions or am I missing something obvious? Is there perhaps some form of recursion taking place?

Thanks.

Answer 1

Each time you click the button, the code is calling your function. In that function the line $(formId).submit(...); is binding the event to the form’s submit action. This happens every time you click, adding multiple “submit” events to the form. You need to unbind the action first. So you could call $(formId).unbind('submit').submit(...); instead.