Javascript get previous form input

I have a nice fancy jQuery slide up form. Here's some code from the submit process:

    $('a.contact-submit').click(function(){
    var name = $('div.contact input.move').val();
    var email = $('div.contact input.locate').val();
    var phone = $('div.contact input.fone').val();
    var message = $('div.contact textarea.western').val();

    var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

    if(reg.test(email) == false) {
    $('div.contact').hide('slow', function() {
    $('div.contact').html('<h2>Contact Us</h2><p>Sorry, there seems to be a problem with your email address. Please <a href="#" class="contact-try-again">try again</a>.</p>');
    $('div.contact').show('slow');
    });//end of slide up

    }//end of if statement for checking email.

   //SO ON, SO ON. CHECKING REST OF CLIENT INPUT....
});

So when a client gets an error, like the above one for invalid email, they will click 'try again'. Now I want the the slide up action to happen and then back down with the contact form. But, there must be the users previous input there.

So I have had a go of doing this:

$('a.contact-try-again').live('click', function(){
  $('div.contact').hide('slow', function(){
   $('div.contact').html('<h2>Contact Us</h2><form class="tab"><label for="move">Your Name:</label><input type="text" name="move"  class="move" value="'+name+'" /><br /><label for="locate">Your Email:</label><input type="text" name="locate" class="locate" value="'+email+'" /><br /><label for="locate">Your Number:</label><input type="text" name="fone" class="fone" value="'+phone+'" /><br /><label for="western">Your Message:</label><textarea name="western" class="western">'+message+'</textarea><br /><label for="contact">&nbsp;</label><a href="#contact" class="contact-submit">Send!</a><a href="#" class="prepend-1 contact-close">Cancel</a><br /></form>');
   $('div.contact').show('slow');   
 });//end of hide
});//end of contact-try-again

But had no luck. It slides up and doesn't slide down. I have also tried to alert(name), but it doesn't pick it up.

So how can I get the values of the input and then reshow them? I'm not too experienced with Javascri开发者_如何学编程pt, no jQuery.

you should prevent the browser from posting the form when an error occurs by adding return false;

$('a.contact-submit').click(function(){

    if(reg.test(email) == false) {
         .....//your code
         return false;
    }

});

or event.preventDefault();

$('a.contact-submit').click(function(event){

    if(reg.test(email) == false) {
         .....//your code
         event.preventDefault();
    }

});

// Retrieves value of email input.    
var email = $('input:[name=email]').attr('value'); 

So after some hard research I came across global variables. So here's what I did within the submit action:

name = $('div.contact input.move').val();
email = $('div.contact input.locate').val();
phone = $('div.contact input.fone').val();
message = $('div.contact textarea.western').val();

So basically I have removed the var at the beginning of the variable. It sets it as a global variable.

So then after that I could then use this:

$('a.contact-try-again').live('click', function(){
 $('div.contact').hide('slow', function(){
  $('div.contact').html('<h2>Contact Us</h2><form class="tab"><label for="move">Your Name:</label><input type="text" name="move"  class="move" value="'+name+'" /><br /><label for="locate">Your Email:</label><input type="text" name="locate" class="locate" value="'+email+'" /><br /><label for="locate">Your Number:</label><input type="text" name="fone" class="fone" value="'+phone+'" /><br /><label for="western">Your Message:</label><textarea name="western" class="western">'+message+'</textarea><br /><label for="contact">&nbsp;</label><a href="#contact" class="contact-submit">Send!</a><a href="#" class="prepend-1 contact-close">Cancel</a><br /></form>');
  $('div.contact').show('slow');   
 });//end of hide   
});

The reason because .live has been used is because it's already been modified. See more on the .live handler here

So after that the submit has to be able to work, the submit action must also have the .live handler. Like this:

$('a.contact-submit').live('click', function(){
  //Code, code, code...
});

Hope this helps, it took me ages to figure this one out...