Question

I have been reading through lots of Q&A everywhere and these stackoverflow posts seem to be most related to what I am trying to do:
1) How we can save data on two servers using one sumit form?
2) How to call server side action method just before submitting form to 3rd party url?

Basically, I am working with Aweber autoresponder service and I have been having some technical trouble where the leads don’t seem to record in Aweber even though I see on my analytics software people are filling in the forms with emails and hitting the submit button.

So, I was hoping I can and capture the form data on my server first in a TXT file, before the form data gets submitted to Aweber.

(from my research I need ajax, jquery to achieve this)

Following different posts and tutorials, I have come up with the following but unfortunately is still not working…

Please let me know how to fix this code if possible. THANK YOU so MUCH!!!

Head with jquery:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

$(document).ready(function() {

    //if submit button is clicked
    $('#submit').submit(function () {       

        //Get the data from all the fields
        var email = $('input[name=email]');
        var custom_sub1 = $('input[name=custom sub1]');
        var custom_sub2 = $('input[name=custom sub2]');
        var custom_sub3 = $('input[name=custom sub3]');

        //organize the data properly
        var data = 'email=' + email.val() + '&custom_sub1=' + custom_sub1.val() + '&custom_sub2='
        + custom_sub2.val() + '&custom_sub3='  + custom_sub3.val();

        //start the ajax
        $.ajax({
            //this is the php file that processes the data and send mail
            url: "http://mydomain.com/form_plus_email.php",

            //method
            type: 'POST',

            //pass the data        
            data: data,    

            //Do not cache the page
            cache: false,

        success: function() {
            }
        });



        //cancel the submit button default behaviours
        return false;
    });
}); 


</script>
</head>

The above, I don’t know if “return false;” is causing the problems

Body with form:

<form method="post" action="http://www.aweber.com/scripts/addlead.pl">

<input type="text" name="email" value="Enter email" id="email">

<input value="xxxxxxxxxxxx" name="meta_web_form_id" type="hidden">
<input value="" name="meta_split_id" type="hidden">
<input value="xxxxxxxxxxxxx" name="listname" type="hidden">
<input value="http://domain.com/thankyoupage" name="redirect" type="hidden">
<input value="http://domain.com/thankyoupage" name="meta_redirect_onlist" type="hidden">
<input value="xxxxxxxxxxxxx" name="meta_adtracking" type="hidden">
<input value="1" name="meta_message" type="hidden">
<input value="email" name="meta_required" type="hidden">
<input value="1" name="meta_forward_vars" type="hidden">
<input value="" name="meta_tooltip" type="hidden">
<script type="text/javascript">
{
document.write('<input type="hidden" name="custom sub1" value="'+sub1+'">')
document.write('<input type="hidden" name="custom sub2" value="'+sub2+'">')
document.write('<input type="hidden" name="custom sub3" value="'+sub3+'">')
}
</script>

<input type="image" value="Submit Button" name="submit" src="image.png" id="submit" class="button1">
        </form>



</body>

For Aweber, it is important all the fields listed both hidden and not hidden to be passed on to the action=”http://www.aweber.com/scripts/addlead.pl”.

However, for myself, as I am only interested in 4 fields, I have specify all that I need in the jquery section in the head tag.

I don’t know why the code isn’t working… So, how do I make sure it will save to my server first with ajax before the form data is submitted to 3rd party url? Right now…

<form method="post" action="http://www.aweber.com/scripts/addlead.pl">

is executing and working properly… but the ajax does not save the data at all from what i can tell

Thank you so much!

Answer 1

First change the event on the submit button you use. So instead of

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

use

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

as the submit event is for the form, not the button. Once you’ve changed that, then as Ramengo mentioned, use your success function to submit the form.

Better would be though be to use the Aweber API which allows you to add users to an account since November 2011.