www.webdeveloper.com
Results 1 to 8 of 8

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

  1. #1
    Join Date
    May 2010
    Posts
    77

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

    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:
    Code:
    <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:
    Code:
    $(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

  2. #2
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    Inseatd of

    Code:
              success: function() {
               $("#contact").submit();
              }
    try something simple like returning true ( havent tested this, jsut a theory)

    Code:
              success: function() {
               return true;
              }
    another possibility is

    Code:
              success: function() {
               self.submit();
              }
    Last edited by DanInMA; 03-28-2012 at 11:43 AM.

  3. #3
    Join Date
    May 2010
    Posts
    77
    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
    Code:
    $('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?

    Code:
    $(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();
              }
             }); 
      }     
      });
    });

  4. #4
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    did you try self.submit() instead of return true

  5. #5
    Join Date
    May 2010
    Posts
    77
    Quote Originally Posted by DanInMA View Post
    did you try self.submit() instead of return true
    I get "self.submit is not a function" from firebug.

  6. #6
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    hrmmm. ok perhaps this.submit() ( ive seen ti done in a similar fashion before)

  7. #7
    Join Date
    May 2010
    Posts
    77
    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.

  8. #8
    Join Date
    May 2010
    Posts
    77
    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:
    Code:
    $(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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles