Jquery not intercepting a form submition - Asp.net Mvc & Fancybox

Question

Hello guys, I'm developing an application that uses Jquery to intercept my form submissions to make instead an Ajax Submission. So far so good! Everything works great.. If the client doesn't have JS enabled, the app keeps working flawless.

Well, today I created a new form but JQuery doesn't intercept the submission. It's true that I changed a little bit but still. It should be working.

I have a simple PartialView with the form, a span and two buttons (NO (button) & YES (submit)). I use RenderPartial("MyPartial") into a DIV and the plugin FancyBox to display it as a modal. Depending on which link a click to show the modal, I change the action (report spam or delete item) of the form and the span with a certain msg. Like a "fancy" confirmation message!!

Again, so far so good. I change the form action and it works (using alert(form.attr(action)), I change the span with the right message and it works, but when I click on the button to submit the form (YES), it goes straight and I make a normal request, and not a Ajax request and I wanted.

This is the form:

<form id="dialogForm" action="" method="post">
  <div class="form_item_button">
     <span id="dialogQuestion" style="color: Black;"></span>
     <button id="btDialogNo" type="button" value="button" class="btn">No</button>
     <button id="btDialogYes" type="submit" value="Submit" class="btn">Yes</button>
  </div>
</form>

And this is the script to intercept the form submission:

    $(document).ready(function() {
         var theForm = $("#dialogForm");

         // I CHECK IF THE ACTION WAS SET PROPERLY
         // MY TESTS SHOW ME THAT THE ACTION IS OK!
         alert(alert(theForm).attr("action")); 

         theForm.submit(function(e) {
             e.preventDefault();

             $.ajax({
                 type: "POST",
                 data: theForm.serialize(),
                 url: theForm.attr("action"),
                 dataType: "json",
                 success: function(json) {
                     alert(json.Status);
                 },
                 error: function() {
                     alert('An error occurred while processing your request. Please try again.');
                 }
             });
         });

Any idea guys??? I lost my entire day trying to fix it!! :(

Thanks

Answer 1

preventDefault() appears to be obsolete. I'm not sure from the documentation if it was removed, but this is the new way to get the same effect with a submit() event handler:

 theForm.submit(function(e) {
  blah blah blah
  .............
  return false;
  }

Let me know if that works. I'm definitely curious.

Answer 2

I notice you are using a <button> instead of an <input> for your submit button.

As far as I know, this should be okay, but create an alert right after the event handler function is called, like:

    alert(e.attr("id"));

If it doesn't return anything, then the problem is that clicking the submit button is triggering the event listened for, ie the form is being submitted.

However, if it returns the id of the button, not the form, then the problem is probably that you are using preventDefault on the button, instead of on the form (or vice versa). This could probably be fixed by simply using the return false and getting rid of the e.preventDefault() completely.

However, if neither of the above is true, and you ARE getting an alert when you hit submit, then the problem is probably with the timing of the script (where you are doing the preventDefault).

Is the ajax happening at all, by the way, but you also get a form submit, or is the whole function being ignored?

I had a form that would submit no matter what unless I added something else for the validate function to do besides validate. Ultimately it had to do with the wrong event being triggered. The extra bit of work I added somehow made it so that the event I was listening for eventually caught up.

Answer 3

Two issues.

1. The line you are using to alert.
2. You are missing some closing braces in your ajax call.

Here is the code...

$(document).ready(function() {
         var theForm = $("#dialogForm");

         // I CHECK IF THE ACTION WAS SET PROPERLY
         // MY TESTS SHOW ME THAT THE ACTION IS OK!
         alert(theForm.attr("action")); 

         theForm.submit(function(e) {
             e.preventDefault();
            alert('here');
             $.ajax({
                 type: "POST",
                 data: theForm.serialize(),
                 url: theForm.attr("action"),
                 dataType: "json",
                 success: function(json) {
                     alert(json.Status);
                 },
                 error: function() {
                     alert('An error occurred while processing your request. Please try again.');
                 }
             });
         });
});​​​​

Enjoy.