Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 420
  • Last Modified:

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

0
IndustrialInfo
Asked:
IndustrialInfo
2 Solutions
 
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
 
Vel EousResearch & Development ManagerCommented:
Try:

$("#element").show("slow");
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now