Submitting a form with JQuery Ajax results in multiple requests (and submissions)

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.

Answer 2

When you do this

$(formId).submit(function(){})

You are adding the function to the submit event. When you click in the submit button you are adding a this function and submitting through the default behavior of input type="submit". When you click again you add the same function to the submit event. So when you click one time you have one function in the submit event, when you click two times you have two functions.

That said you can do what you want like this:

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

})

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

Answer 3

Change

<input value="Invoke" onclick="postInvokeFunctionForm(xxxxx);" type="submit">

to

<input value="Invoke" onclick="postInvokeFunctionForm(xxxxx);" type="button">

The < input type="submit" > is what is causing the double submit.