Trying to modify a Jquery form submittal

I need to have a form that submits without refreshing, so I used JQuery from a tutorial I found to submit email information that will refer a friend/contact to webcast on our site. Once it is submitted a Thank You message replaces the form. I want to make a button that allows the form to reappear and allow the user to submit another email without refreshing the page. I have attached the code below.
$(document).ready(function(){
	$("#submit").click(function(){
		$(".error").hide();
		var hasError = false;
		var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
		
		var emailToVal = $("#emailTo").val();
		if(emailToVal == '') {
			$("#emailTo").after('<span class="error">You forgot to enter the email address to send to.</span>');
			hasError = true;
		} else if(!emailReg.test(emailToVal)) {
			$("#emailTo").after('<span class="error">Enter a valid email address to send to.</span>');
			hasError = true;
		}
		
		var emailFromVal = $("#emailFrom").val();
		if(emailFromVal == '') {
			$("#emailFrom").after('<span class="error">You forgot to enter the email address to send from.</span>');
			hasError = true;
		} else if(!emailReg.test(emailFromVal)) {	
			$("#emailFrom").after('<span class="error">Enter a valid email address to send from.</span>');
			hasError = true;
		}
		
		var subjectVal = $("#subject").val();
		if(subjectVal == '') {
			$("#subject").after('<span class="error">You forgot to enter the subject.</span>');
			hasError = true;
		}
		
		var nameVal = $("#name").val();
		if(nameVal == '') {
			$("#name").after('<span class="error">You forgot to enter your name.</span>');
			hasError = true;
		}
		
		var messageVal = $("#message").val();
		if(messageVal == '') {
			messageVal = " ";
			hasError = true;
		}
		
		var showlinkVal = $("#showlink").val();
		if(showlinkVal == '') {
			$("#showlink").after('<span class="error">You forgot to enter the show link.</span>');
			hasError = true;
		}
		
		if(hasError == false) {
			$(this).hide();
			$("#sendEmail li.buttons").append('<img src="images/loading.gif" alt="Loading" id="loading" />');
			
			$.post("sendemail2.php",
   				{ emailTo: emailToVal, emailFrom: emailFromVal, subject: subjectVal, name: nameVal, message: messageVal, showlink: showlinkVal },
   					function(data){
						$("#sendEmail").slideUp("normal", function() {
							
							$("#sendEmail").before('<div id="message"><h2>Thank You!</h2><p>Thank you for refering this episode of Industry Today.</p><img id="checkmark" src="images/check.gif" height="48" width="48" /><form action="" method="post" id="referagain"><button type="submit" id="another">&laquo;Refer Another Friend</button></form></div>');
						});
   				}
			);
		}
		
		return false;
	});
	/* New code - This is where I need the help*/
	$("#another").click(function(){
		$("#message").slideUp("normal");
		$("#sendEmail").fadeIn(1500);
		
		return false;
	});
	/* End New Code*/
});

Open in new window

IndustrialInfoAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Albert Van HalenAnalyst developerCommented:
Your code is OK except that the 'another' button is not available yet. It only gets rendered when the first form is posted.
So in the callback function of the post method you should bind the click event (the same place where you render the message div), but once it's allready rendered and the event is bound, do you want to render it again ? You can make a check if the message div allready exists...

Another idea is to render the message div on forehand but hide it.
In that case you can bind the click event to the 'another' button, and the only thing left to do in the callback function of the post method is to show it.

The only thing left is to clear the form by using jquery's val method (either by looping through each element is the form or setting the value of each individual element) also in the callback function of the post method
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Vel EousResearch & Development ManagerCommented:
Try:

$("#element").show("slow");
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.