How to have form slide up after submitted?

**spookymix** · 11-30-2010, 06:39 AM

I'm stuck and don't know how to make a form on my site slide up after submitted.

Here's my site below:

site...

If you click on join our newsletter on the upper right corner a menu would slide down. I want to have the menu slide up as soon as the require fields are filled out and you click on the submit button.

How would I go about doing this?

Please any help would be much appreciated. Thanks

Mike

**jscheuer1** · 11-30-2010, 09:02 AM

This gets a little tangled up with the form validation:

Code:

<input name="submit" type="submit" class="newslettersubmitbtn" id="submit" onclick="MM_validateForm('email','','RisEmail');return document.MM_returnValue" value="SUBMIT" />

specifically:

Code:

onclick="MM_validateForm('email','','RisEmail');return document.MM_returnValue"

What we'd like to inject in there somewhere is:

Code:

$("#nlcontact-toggle").click();

But only if the form validates.

It looks like we can do that like so:

Code:

onclick="MM_validateForm('email','','RisEmail');if(document.MM_returnValue){$("#nlcontact-toggle").click();}return document.MM_returnValue"

Notes:

If there is other form validation going on that I'm not seeing, that probably will need to be taken into account.
Form validation should generally be performed upon the onsubmit event of the form tag, not the onclick event of the submit button.
Events like onclick or onsubmit should generally be attached by javascript, not hard coded to the element.

**Beverleyh** · 11-30-2010, 09:06 AM

I see you already have jQuery installed so just use something like this;

Code:

	$('.submit-button).click(
      		function () {
			$('.news-panel').slideUp(500);
      		}
    	);

Just substitute in your own element classes

EDIT - *Ah, John got to you while I was typing

*

**spookymix** · 12-03-2010, 09:37 PM

Thanks John and Beverleyh for the responses. I'll try the fixes and let you know how it goes. Thanks again

Mike

**jscheuer1** · 12-23-2010, 08:59 AM

OK, it has come to my attention that this hasn't resolved the situation. This, though it might need some tweaking, should:

Get rid of the highlighted here:

Code:

<input name="submit" type="submit" class="newslettersubmitbtn" id="submit" onclick="MM_validateForm('email','','RisEmail');return document.MM_returnValue" value="SUBMIT" />

Place the following highlighted code where shown:

Code:

<script type='text/javascript' src='java/1.4.2.js'></script>
<script type='text/javascript' src='java/main.js'></script>
<script type='text/javascript' src='js/queryLoader.js'></script>
<LINK REL="SHORTCUT ICON" HREF="Images/favicon.ico"> 


<script type="text/javascript">
$(document).ready(function(){$("#nlcontact-toggle").click(function(){$("#newsletterpanel").slideToggle("slow");$(this).toggleClass("nlcontact-active");return false;});});
jQuery(function($){
	$('#form1').submit(function(e){
		MM_validateForm('email','','RisEmail');
		if(document.MM_returnValue){
			var page = this.action, pdata = {}, els = this.elements;
			$.each(els, function(i, el){
				if(el.name === 'email' || el.checked && el.name === 'subscribe'){
					pdata[el.name] = el.value;
				}
			});
			$.post(page, pdata);
			$("#nlcontact-toggle").click();
		}
		e.preventDefault();
	});
});
//fade

$(document).ready(function(){$('#page_effect').fadeIn(2000);});function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});}


</script>

</head>
<body>

<div style="visibili . . .

The code has been fairly thoroughly tested. But with AJAX it's hard to know exactly for sure what will happen on your host.

One thing I'm concerned about is the newsletter.php file. Since it probably has code on it to return to the calico9.com/site/ page, it may try to do so. This could cause problems. It depends though. Could I see the code on the newsletter.php page?

Thread: How to have form slide up after submitted?

Thread Tools

Search Thread

How to have form slide up after submitted?

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to Beverleyh For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions