Submit form AND do ajax

tenants

Well-known member
Sounds simple right?

What I want to be able to do is send the ajax request, then once it has returned, send the normal form submission (which redirects)

The form submission is core functionality, so it has to form submit and redirect (the ajax on submit is something I am adding)

so...

I thought about doing this by first stopping the normal redirect on submit ( e.preventDefault() ) , doing the ajaxy thing, then getting the ajax to re-submit the form

Code:
<form action="endUpHere" method="post" class="xenForm AutoValidator">
<stuff> </stuff>
</form>

....


   $('.xenForm').submit(function(e) {
                   e.preventDefault();
                   doAjaxThing();
            }

But the problem is, if you try to submit (clicking a submit button) the form with doAjaxThing, then you'll hit the e.preventDefault();
- thats not good, since I want the form to redirect to "endUpHere" after the ajax has been sent...
so..

What I then did was to set a few parameters, and unbind this e.preventDefault() if we are sending from doAjaxThing

Code:
$('.xenForm').submit(function(e) {
   if(!hasAjaxed)
   {
      isGlobal = true;
      e.preventDefault();
      doAjaxThing();
    }
   else
  {
      $(this).unbind('submit').submit();
      isGlobal = true;
     return true;
   }
}

Code:
doAjaxThing(){
   var xenFormOb = $('.xenForm');

   $.ajax({
      type: "POST",
      url: "stuff/forajax",
      data: dataString,
      global: isGlobal,
      success: function(){}}).done(function(){hasAjaxed = 1; xenFormOb.submit();})
   });
}

Now this is starting to feel very hacky, and while it works in most broswers, I've seen issues in IE

So... I'm disgusted with this code, it's yucky and doesn't seem to work in all browsers (IE wants to submit twice it seems).

Am I thinking about this all the wrong way (I'm not really a front end thinker, I'm more PHP backend, so the script is giving me a bit of grief
 
Last edited:
I know I'm doing something horribly wrong, so even pointers in the right direction might be helpful (I've been messing around with this for a couple of weeks, and I'm not happy with it yet)
 
As far as I have read, it's just not a very standard thing to do, ajax...and then form submit

I have thought of a solution

using javascript, switch the submit button to a non submit button.... then on clicking, do my ajax then submit the form with javascript
Users that are non js will simply submit the form
Users that are js will have a new button that does not do the submit, but does the ajax which only submits the form on ajax complete, this will be much more compatible....

I don't even need to worry about e.preventDefault and unbinding, since the button will not be a submit button (it will just look like one). Thus I can retain core functionality and do my extra ajax things
 
Last edited:
bugger, this is still not good enough, not all bots click the button, some inject and js form submit....<sigh>, back to the drawing board

(clearly I have to use $('.xenForm').submit, not on button press in order to log all cases)

I have a feeling I will be talking to myself a lot in this thread

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.
 
Last edited:
arggg this was the issue with IE:

Code:
     $(this).unbind('submit').submit();
     isGlobal = true;
    return true;

by returning and using submit, IE tries to submit twice, this fixes it:
Code:
     $(this).unbind('submit');
     isGlobal = true;
    return true;


Problem solved
 
Top Bottom