Is it possible to pass event to an OnBegin function of an Ajax form?

Question

I have an Ajax form in my application.I want to pass the event to OnBegin function and then use event.preventdefault() which will stop the form from submitting and then on checking some conditions I'm trying to submit the form manually.But it's not working and I'm not able to make out why.

Ajax.BeginFrom:

   @using (Ajax.BeginForm("Update", "Project", false, new AjaxOptions { InsertionMode = InsertionMode.Replace,
                                                                         HttpMethod = "Post",
                                                                         OnBegin = "return OnBeginForm(event);",
                                                                         OnSuccess = "OnSuccessArtwork(data);", 
                                                                         OnFailure = "OnFailureArtwork(data);" }, 
                                                                         new { id = "Ajax_form" }))
{
   // Here I have all the form elements //
  <input type="submit" id="btnUpdate" class="btn02 pull-left" value="Update"/> 
}

OnBegin function:

function OnBeginForm(e) {
   e.preventDefault();
   if(some condition){
     $('#Ajax_form').submit();
   }
   else{
     return false;
   }
}

Shaiju T · Answer 1 · 2018-01-11T10:19:14.060

2

event.preventdefault() which will stop the form from submitting

You can also use return false; stop the form from submitting, it basically does the effect of event.preventdefault(). Check this.

Below script should work for you:

function OnBeginForm() {

    if (some condition) {
      return false;
    }

}

Hope helps :)

Reference

edited Jan 11 '18 at 10:19

answered Jan 11 '18 at 09:00

Shaiju T

6,201
20
104
196

1

We can't trigger the submit. It will result in an infinite loop instead we will have to manually submit the form using `on('submit')`. Anyways thanks and +1 from my side. – Jibin Balachandran Jan 11 '18 at 09:59
@JibinBalachandran , did you came across infinite loop while debugging ? – Shaiju T Jan 11 '18 at 10:04
1

This creates an infinite loop because `$('Ajax_form').trigger('submit');` triggers the submit event which in turn calls `OnBeginForm()` which triggers the submit event which calls `OnBeginForm()` which triggers ..... – Jan 11 '18 at 10:09
@StephenMuecke So the fix would be just `return false;` instead of a trigger, I have edited the post. – Shaiju T Jan 11 '18 at 10:20
@StephenMuecke Why `e.preventDefault` is not stopping the form submission? – Jibin Balachandran Jan 11 '18 at 10:33
1

If the `return false;` line of code is executed, then the submit will be cancelled. (But having said that, I can never understand why users want to use `AjaxBegin()` (which is not even supported anymore) when you get more flexibility and better performance using the `$.ajax()` methods) – Jan 11 '18 at 10:33
1

@JibinBalachandran, Because `e` is not the submit event (in fact its already been cancelled by the plugin) – Jan 11 '18 at 10:36

score 0 · Answer 2 · answered Sep 28 '16 at 09:46

My be i found a better solution....

    $('input[type=submit]').on('click', function (e) {
        e.preventDefault();
        var buttonid = $(this).attr('id');
        if (buttonid == "btnUpdate") {
            //Do what ever you want it fires before Ajax Submit
             //Finaly ajax submit manually trigger submit event
             $(this).trigger('submit');
        }


    });

Is it possible to pass event to an OnBegin function of an Ajax form?

2 Answers2

Linked