Jquery form get from field value

Question

I'm using a Jquery form on my website. The from is pretty much simple with the usual fields (name, email, dob etc.). After user presses register button, the form is submitted to the php file using Jquery from's 'ajaxForm' parameter. After that, the form slides out and the google map slides in asking customer to select his current location by dragging the marker on the map.

After the marker is put in the required place, customer can click "Submit" button and 2 values will be passed to another php file : latitude and longitude, ie coordinates. (please note that page does not refreshes at any time, this all happening on one page.)

What I want to do is to pass the email field value from the previous form together with latitude and longitude, but I can't really do that because I'm pretty much a noob at javascript.

Is there a way to declare a global variable from the field 'email' before submitting the form, so I could later use it to pass together with the latitude and longitude parameters. Or maybe there's even easier solution?

Thank you very much in advance!

here's the code of my jquery form

$(document).ready(function() {
var options = {
    target: '#total',
    clearForm: true,
    beforeSubmit: radio,
    success: social1
};
$("#perm").ajaxForm(options);

}); 
function radio(formData, jqForm, options) {

    if ($('input:radio').is(':checked')) {

} else {
    alert('choose gender!');
    return false;
}

var form = jqForm[0];

        if (form.year.value <= form.yob.value) { 
        alert('choose another year!'); 
        return false; 
    }

};




function social1() {  
            $("#map").delay(700).slideDown("slow");
            $("#accordion").slideUp("slow");
            };

And here's the button code

<form id='perm' action='add.php?stay=perm' method='post' onSubmit="return checkForm(this);">

Answer 1

You are already using the beforeSubmit method. Expand it a little bit. It is a fine location to catch the email address. So you end up with a situation like this (untested):

var email;
$(document).ready(function() {
var options = {
    target: '#total',
    clearForm: true,
    beforeSubmit: radio,
    success: social1
};
$("#perm").ajaxForm(options);

}); 
function radio(formData, jqForm, options) {
   email = $("#idOfEmailField").val();
   // ... rest of logic here
};
function social1() {  
   alert("Email address is "+email);
};

Answer 2

If you simply hide the form without refreshing the page, the email input from the previous form is still available (i.e you don't need to declare a global variable to store the email). For example,

<form id='perm' action='add.php?stay=perm' method='post'>
    ...
    <input type="text" id="name" />
    <input type="text" id="email" />
    <input type="submit" value="Submit" />
    ...
</form>

<button id='submitCoordinate_button' style='display:none'>Submit coordinate</button>

<script type="text/javascript">
    $('#perm').ajaxForm() {
        ...
        success: function() {
            $('#perm').hide(); // hide the perm form and pull the map in 
            $('#submitCoordinate_button').show();
        },
        ...
    }

    $('#submitCoordinate_button').click(function () {
        ...
        var email = $('#email').val(); // you still can get the email here
        ...
    });
</script>