post form with ajax and then submit same form to other url?

[iansane6]

Hi,

I'm working with a 3rd party API which does not support ajax so I need to submit my form to them the normal html/php way. But before doing this, I need to use ajax to post the form data to another php script which does some processing and sends and email.

For a test I did the following.

form normally submits to test2.php:

<form id="contact" method="POST" action="test2.php">
    <input type="text" id="fname" name="fname"/>
    <input type="submit" id="send" name="send" value="submit"/>
</form>

ajax posts to test1.php:

$(document).ready(function(){
  
  $("#contact").submit(function(e){
  e.preventDefault();
  var fname = $('input#fname').val();
  var dataString = "fname=" + fname;


    $.ajax({
          type: "POST",
          url: "test1.php",
          data: dataString,
          success: function() {
           $("#contact").submit();
          }
         });      
  });
});

You can probably see, I don't know how to use preventDefault and then trigger the submit and that may be part of my problem.

Doing it this way, the ajax part works but it never follows through by triggering the submit.

I tried a regular ajax post and it just submits to the action="test2.php" as if it's ignoring my ajax post.

Can someone please show me how to make this test example do what I'm trying to do?

Thank you

[DanInMA]

Inseatd of

          success: function() {
           $("#contact").submit();
          }

try something simple like returning true ( havent tested this, jsut a theory)

          success: function() {
           return true;
          }

another possibility is

          success: function() {
           self.submit();
          }

[iansane6]

DanInMA,

Thanks for the suggestions.

I thought returning true would work since typically for javascript validation returning false keeps it from submitting twice but that's not working.

I did get it to trigger submit with

$('form').submit();

But that throws it into a loop.

I need to be able to add a class and then remove it I think to make it only run the javascript on the first run but removing the class doesn't seem to work for one that's hard coded in the html form. I tried adding 'contact' class and then do a if hasClass check before the ajax post but even after removing the class on success, it still is in a loop. You can see in the following code why it is still in a loop but maybe suggestions along the same line? A way to see if the form has already been submitted via ajax so it will ignore the ajax and submit normally?

$(document).ready(function(){
  

  $('form').submit(function(e){
  
  e.preventDefault();
  $('form').addClass('contact');
  if($('form').hasClass('contact')){

  
  var fname = $('input#fname').val();
  var dataString = "fname=" + fname;


    $.ajax({
          type: "POST",
          url: "test1.php",
          data: dataString,
          success: function() {
           //$("#contact").submit();
          console.log("ajax success");
           
          $('form').removeClass('contact');//remove the class
          $('form').submit();
          }
         }); 
  }     
  });
});

[DanInMA]

did you try self.submit() instead of return true

[iansane6]

did you try self.submit() instead of return true

I get "self.submit is not a function" from firebug.

[DanInMA]

hrmmm. ok perhaps this.submit() ( ive seen ti done in a similar fashion before)

[iansane6]

nope, tried this.submit() too and it's not a function.

As I said, $('form').submit() is working but because it's inside a $('form').submit function it keeps looping submitting with ajax every time.

I'm trying to work out the logic to add a hidden field on the first go around and then skip the whole jquery block and submit normally as if jquery wasn't there. I think I just figured it out in my head. I'll post back here if it works.

[iansane6]

Wow,

It's been working the whole time. Before I started trying to figure out how to double submit this way, it was working but I couldn't tell just by having the php script echo out a message.

I replaced the success message in test1.php with a simple email function and it's working just fine.

Ajax posts to the test1 email script which is what I wanted and then the form submits and redirects like a normal php form to test2. I checked it several times and even though it looks like it's just skipping straight to test2, it's sending the email from test1.

Can't believe it was as simple as this:

$(document).ready(function(){
  
 $('form').submit(function(){
  
 
  var fname = $('input#fname').val();
  var dataString = "fname=" + fname;


    $.ajax({
          type: "POST",
          url: "test1.php",
          data: dataString,
          success: function() {
           
          }
         }); 
  
  });

return false;
});

All I need to do is enforce the use of javascript so the user will be sure to get the email.

Thanks for your help