17

I'm creating a registration form for a client for an event they're hosting. The basic user details are submitted to a third-party system (ie name, email etc.) but the rest of the fields need to be sent via email to the client.

I need something like this to happen :

  1. List item
  2. user fills out form
  3. jquery bvalidator checks the form for required fields
  4. form is submitted (via ajax) to a seperate page where an email is sent to client
  5. form is then submitted (regular POST method) to third-party system
  6. on success user is passed back to a 'thank you' url.

Here is the code I've tried using, but it gets caught in a loop repeatedly submitting itself to the 'email' page, and never submits to the external url.

If I replace the $('#form1').submit(); with an alert it submits only once to the email page and then displays the alert correctly.

var myvalidator = $('#form1').bValidator(optionsGrey);

$('#form1').submit(function() {
  if (myvalidator.isValid()) {

    $.ajax({
      data: $('#form1').serialize(),
      type: "POST",
      url: "email_send.asp",
      success: function() {
        $('#form1').submit();
      }
    });
  }
  return false;
});

Any suggestions as to how I can fix this?

0

8 Answers 8

41

Try:


$('#form1').unbind('submit').submit();
0
4

try unbinding submit event on your success: method of your ajax call by calling unbind

$('#form1').unbind('submit'); 
$('#form1')[0].submit(); // call native submit

http://api.jquery.com/unbind/

1
  • unbind was certainly the way to go :)
    – Dog
    Mar 19, 2012 at 13:39
2

You can use unbind() to revert to the default behaviour.

var myvalidator = $('#form1').bValidator(optionsGrey);

$('#form1').submit(function() {

    if(myvalidator.isValid()) {

        $.ajax({
            data: $('#form1').serialize(),
            type: "POST",
            url: "email_send.asp",
            success: function(){
                $('#form1').unbind('submit');
                $('#form1').submit();
            }
        });

    }

    return false;

});
1

Hm I'm not sure I understand. You are always submitting to email_send.asp so and on every success it does so, therefore it seems pretty clear why you get stuck in a loop.

If I understand you right, the second submit should be to another url with a different success handler, right?

So, instead of submitting the form again you could just write a basic ajax function:

$('#form1').submit(function () {
  if (myvalidator.isValid()) {
    $.ajax({
      data: $('#form1').serialize(),
      type: "POST",
      url: "email_send.asp",
      success: function(){
        $.ajax({
          data: $('#form1').serialize(),
          type: 'POST',
          url: 'third_party.asp',
          success: function () {
            //display thank you message
          }            
        });
      }
    });
  }    
});

EDIT Here's a updated answer according to your comment:

var myvalidator = $('#form1').bValidator(optionsGrey);

$('#form1').submit(function(){      
  if(myvalidator.isValid()){
    $.ajax({
      data: $('#form1').serialize(),
      type: "POST",
      url: "email_send.asp",
      success: function(){
        $('#form1').unbind('submit').submit();
      }
    });
  }
  return false;
});
3
  • yes, that is what i originally tried to do (2 seperate ajax posts), but submitting the data to the third-party system didn't work for me... it may have submitted the data but was not returning a 'success'... this is why i decided to submit the form once via ajax to send out an email, and then the submit the form the conventional way the second time...
    – Dog
    Mar 19, 2012 at 13:19
  • Oh ok, but you do realize that the second submit will be the exakt same as before? I will update my answer for you!
    – tbleckert
    Mar 19, 2012 at 13:21
  • thanks for the update... the 'unbind' function was the key :)
    – Dog
    Mar 20, 2012 at 7:10
0

You can use jquery.form plugin for submitting form via ajax. Checkout following url: http://jquery.malsup.com/form/

Then in your js script try something like this

var myvalidator = $('#form1').bValidator(optionsGrey);

$('#form1').submit(function(){
    if(myvalidator.isValid()){
      $(this).unbind('submit').submit();

});
0

Do you have a reason to have to utilize the submit-method? The reason it enter an infinite loop is because it invokes the same submit event listener again.

If not, you can just queue two ajax-submits, one to the e-mail page, and again to the client.

Finally, you can unbind the event listener. A little known way to unbind an event listener is to pass in the event object to the unbind-call. This will unbind only the current event listener:

$('#form1').submit(function(e){
    if(myvalidator.isValid()){
$form = $('#form1');
$.ajax({
    data: $form.serialize(),
               type: "POST",
               url: "email_send.asp",
               success: function(){
                 $form.unbind(e).submit();
               }
             });
    }
    return false;
});
0

Here is an example code of submitting form twice to different URLs without redirection. Click on "Test" button twice.

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="ISO-8859-1">
    <title>Insert title here</title>
    <script type="text/javascript" src="jQuery.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $("#testBtn").click(function() {
            $("#form").submit();
            $("#form").submit(function() {
                $("#form").attr("action", "download");
            });
        });
    });
    </script>
    </head>
    <body>
        <form id="form" enctype="multipart/form-data" method="post"
            action="upload" target="myIFrame">
            <input type="hidden" name="FileName" />
            <input type="file" name="FileDialog" size="100" />
            <input type="submit" /> <input name="txt" type="text" />
        </form>
        <input id="testBtn" type="button" value="Test" />

        <iframe style="display: none;" src="javascript:''" id="myIFrame">
            <html>
                <head></head>
                <body></body>
            </html>
        </iframe>
    </body>
    </html>
-1

I was facing the same problem. Then I noticed that I had accidentally linked my custom javascript file twice so the form was being submitted twice by two scripts. The problem was solved by removing one script link form footer of the page.

<script src="<?php echo base_path; ?>/js/custom.js"></script>
<script src="<?php echo base_path; ?>/js/custom.js"></script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.