Trying to modify a Jquery form submittal

Posted on 2008-11-04
Last Modified: 2012-05-05
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.



		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) {


			$("#sendEmail li.buttons").append('<img src="images/loading.gif" alt="Loading" id="loading" />');



   				{ emailTo: emailToVal, emailFrom: emailFromVal, subject: subjectVal, name: nameVal, message: messageVal, showlink: showlinkVal },


						$("#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*/





		return false;


	/* End New Code*/


Open in new window

Question by:IndustrialInfo
    LVL 19

    Accepted Solution

    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
    LVL 14

    Assisted Solution



    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
    Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
    Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
    The viewer will learn how to dynamically set the form action using jQuery.

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now