Redirect to any page and submit form details

Question

I'm looking to submit form details using method="POST" to an external URL, then redirect the user to a 'Thank you' page after successfully completing the form.

My sample HTML/Javascript is as follows, however the page is not redirecting to Google.com as intended. Any help on fixing this would be much appreciated!

HTML:

<form action="externalURLhere" method="post" name="theForm"    
id="theForm" style="margin-bottom:0px;padding:2px;background-color:#e0e0e0;" onSubmit="return 
MM_validateForm(); return redirect();">

JavaScript:

function MM_validateForm() {
    if ( !jQuery('#theForm #FirstName').val() ) {
        alert('Please input your first name.');
        jQuery('#theForm #FirstName').focus();
        return false;
    }
    if ( !jQuery('#theForm #LastName').val() ) {
        alert('Please input your last name.');
        jQuery('#theForm #LastName').focus();
        return false;
    }
    if ( !jQuery('#theForm #daytimephone').val() ) {
        alert('Please input your phone number.');
        jQuery('#theForm #daytimephone').focus();
        return false;
     }
    if ( !jQuery('#theForm #Email').val() ) {
        alert('Please input your email.');
        jQuery('#theForm #Email').focus();
        return false;
    }
    if ( !jQuery('#theForm #BID').val() ) {
        alert('Please select your preferred campus.');
        jQuery('#theForm #BID').focus();
    return false;
    }
    if ( !jQuery('#theForm #programs').val() ) {
        alert('Please select your preferred program.');
        jQuery('#theForm #programs').focus();
        return false;
    }
    if ( !jQuery('#theForm #How_Heard').val() ) {
        alert('Please select how you heard about us.');
        jQuery('#theForm #How_Heard').focus();
    return false;
    }
return true;
}
// ]]></script>

<script type="text/javascript">
function redirect() {
    window.location = "www.google.com";
    return false;
}
</script>

Answer 1

When the user clicks the submit button, onsubmit event occures, and, depending on the return value of the function binded to the event, the form submits (return true) or does not submit (return false); The function may be binded to the event using HTML:

• <form onSubmit="if(/*some validation here*/){return true;} else {return false;}"></form>

or in javascript script itself:

• form1.onsubmit=function(){if(/*some validation here*/){return true;} else {return false;}}

Generally, it does not matter;
You know, the function's body is executed until the "return" occures. Then it immediatly stops and the return value is passed to the function invoker. So, what you have wrote in the onSubmit="" HTML tag attribute is the equivalent of the following JS code:

form1.onsubmit=function(){
    testPassed=validate();
    return testPassed;

    someValueRedirectFunctionReturns=redirect();
    return someValueRedirectFunctionReturns;
}

So, you can see, that no matter if the form data test is passed or not, because your validate() function's return value (true if form is okay and false if user has entered bad data) is immediatly then returned in the event function. So, your redirect() function cannot occur, because the onsubmit event handler function is stopped and the value is returned;

To make this work, you should modify the code:

form1.onsubmit=function(){
    if(!validate())
        return false; //test failed, form is not passed, no need to redirect to "thank you page".
    else
        redirect();
}

So, the redirect function will be called if the form validation test is passed. Right here we ran in an another problem.
The only way, if the onsubmit event handler function is defined, to submit the form is to return true; -- return from the function, means stop it and proceed executing from the where it was called. When you change the window.location propterty of the page in the function, redirection occurs immediatly, so the function even do not return; -- JavaScript execution immediatly interrupts, and the new page starts loading -- of course, no data can be passed via form submition;

So, you have to

1. Submit form (if the data is valid) -- return true;
2. Somehow redirect (this means, to continue execute your JS code at another page) from the page where the form is submitted.

And... that is not possible.
You can't continue executing the JS code after the form is sent because:

• The event handler function has returned. That means it is stopped.
• The form is sent, and an another page is now loading. The JS code of the previous page is lost, and cannot be executed anymore.
• This means, that you can't affect the behaviour of the page that you are loading (in synchronous mode) from the page, that has started the loading. And you can't make the new page redirect to the page you want ("thank you" one). Usual form sending is just loading a new page with additional parameters. E. g. you can't modify the page that a link on your page is following to;
  
  

Anyway, there are still several ways to acheive what you want:

• If YOU own the page, where the form is submitted, you may just receive the data of the form and immediatly send the redirection header. E. g., via PHP on the server side.
• If the page IS NOT YOURS (you can't modify neither the server, nor the page, nor anything on the server side), then you have to work with the form in slightly different way(s):
  • Use frames or floating frames, either loading the data into the frame(s) by the javascript code itself, or by loading another page (from the same server on which the form page is located), that you have permission to modify, and modify it. E. g.:
    1. In one frame, make a form where the user actually enters data;
    2. In another frame, make another form which contains the same fields that the first does, but hidden ones;
    3. Do not submit the first form, but pass the data from to the second form, and submit() the second one;
    4. Redirect the first frame (or the whole page) to the "thank you" page;
    5. The first frame may be even hidden (CSS: display:none) -- that won't affect the functionality.
  • Use AJAX. That is a special technology of making HTTP request (submitting form!) from the javascript code without reloading the actual page. There may be some problems, if you try to send data to the externalURLHere page, if it is not yours. If so, you may create a "router" page on your server, which will receive the data sent by the form and route it to the target, externalURLHere page. Then you may even...
  • Don't use AJAX. Just make the router page (when I say "page", I mostly mean a PHPscript, or another cgi technology), which will also display the "Thank you" HTML document.
  • And so on...

I've tryied to make as complete answer, as possible, I hope it has helped.

P. S. Sorry for my English.
P. P. S. My first answer on Stack Overflow -- I may be doing something wrong, sorry.