Jquery code help

JavaScript
1

hey every body i am using this code plus jquery with forms on my website and i jave two major problems. the first one is that i have three options at the top of my page and when the user picks an option a register form is displayed below it. however right know when i try and switch in between forms first form doesn’t close it just goes lower on the page. for example if i have option A and option B and i descide that i want option A but then midway through the process i change my mind and i want option B. when i go to click on option B, option a doesn’t close, and option B is displayed under it.

my second problem is that each form is self submitting. so whenever the user presses the register button the page reloads and evaluates the form. every time the user presses register i want the option that they picked to remain open. but right now every time the button is pressed they have to reselect the option they want

here is the code (don’t forget im using jquery)


```javascript
$(document).ready(function()
	{
		//put in p1's spot the id of the paragraph
		$('table#groupreg').hide();
		//replace group with the id of the anchor tag
		$('a#group').click(function()
		{
			//put in p1's spot the id of the paragraph
			$('table#groupreg').fadeIn('slow');
		});
	});





$(document).ready(function()
	{
		//put in p1's spot the id of the paragraph
		$('table#soloreg').hide();
		//replace group with the id of the anchor tag
		$('a#solo').click(function()
		{
			//put in p1's spot the id of the paragraph
			$('table#soloreg').fadeIn('slow');
		});
	});





$(document).ready(function()
	{
		//put in p1's spot the id of the paragraph
		$('table#fanreg').hide();
		//replace group with the id of the anchor tag
		$('a#fan').click(function()
		{
			//put in p1's spot the id of the paragraph
			$('table#fanreg').fadeIn('slow');
		});
	});



i realise that this is a little confusing but im really not that at javascript and i am not pretending to be. so it would be great if someone here could help me out a little

if you have any questions for me just ask

thanks in advance :)
2

do youhave some html code so that wel can test how things work and give ypoum advice on what do tyou? (is this the right dialect?)

3 
<?php
include("header.php");
require("connect.php");

echo"
<h1>Please select the type of membership you would like</h1>
<p>
<table width='90%' align='center' id='registermenu'>
	<tr>
		<td width='30%' align='center'>
		<a href='#' id='group'><h3>Group</h3></a>
		</td>
		<td width='30%' align='center'>
		<h3><a href='#' id='solo'>Solo</a></h3>
		</td>
		<td width='30%' align='center'>
		<h3><a href='#' id='fan'>Fan</a></h3>
		</td>
	</tr>
</table>
<table width='33.33%' id='groupreg'><form method='post' action='register.php'>
	<tr>
		<td>
			Username :
		</td>
		<td>
			<input type='text' name='username'>
		</td>
	</tr>
	<tr>
		<td>
			Password :
		</td>
		<td>
			<input type='password' name='password'>
		</td>
	</tr>
	<tr>
		<td>
			Repeat Password :
		</td>
		<td>
			<input type='password' name='repeatpassword'>
		</td>
	</tr>
	<tr>
		<td>
			Email :
		</td>
		<td>
			<input type='text' name='email'>
		</td>
	</tr>
	<tr>
		<td>
			Group/Band Name :
		</td>
		<td>
			<input type='text' name='groupname'>
		</td>
	</tr>
	<tr>
		<td>
			Genre :
		</td>
		<td>
			<input type='text' name='username'>
		</td>
	</tr>
	<tr>
		<td>
			members :
		</td>
		<td>
			<input type='text' name='name1'>
		</td>
	</tr>
	<tr>
		<td>
		</td>
		<td>
			<input type='text' name='name2'>
		</td>
	</tr>
	<tr>
		<td>
		</td>
		<td>
			<input type='text' name='name3'>
		</td>
	</tr>
	<tr>
		<td>
		</td>
		<td>
			<input type='text' name='name4'>
		</td>
	</tr>
	<tr>
		<td>
		</td>
		<td>
			<input type='text' name='name5'>
		</td>
	</tr>
	<tr>
		<td>
		</td>
		<td>
			<input type='text' name='name6'>
		</td>
	</tr>
	<tr>
		<td>
		</td>
		<td>
			<input type='text' name='name7'>
		</td>
	</tr>
	<tr>
		<td>
			Key Words : (these will be used to help people find your group using the search function. Seperate each word with a space.)
		</td>
		<td>
		<textarea name='keywords' rows='10'></textarea>
		</td>
	</tr>
	<tr>
		<td>
		</td>
		<td>
	<input type='submit' value='register' name='groupsubmit'>
		</td>
	</tr>
</form></table>

<table align='center' width='33.33%' id='soloreg'><form method='post' action='register.php'>
	<tr>
		<td>
			Username :
		</td>
		<td>
			<input type='text' name='username'>
		</td>
	</tr>
	<tr>
		<td>
			Password :
		</td>
		<td>
			<input type='password' name='password'>
		</td>
	</tr>
	<tr>
		<td>
			Repeat Password :
		</td>
		<td>
			<input type='password' name='repeatpassword'>
		</td>
	</tr>
	<tr>
		<td>
			Email :
		</td>
		<td>
			<input type='text' name='email'>
		</td>
	</tr>
	<tr>
		<td>
			Name/Stage name :
		</td>
		<td>
			<input type='text' name='name'>
		</td>
	</tr>
	<tr>
		<td>
			Genre :
		</td>
		<td>
			<input type='text' name='username'>
		</td>
	</tr>
	<tr>
		<td>
			Key Words : (these will be used to help people find your group using the search function. Seperate each word with a space.)
		</td>
		<td>
		<textarea name='keywords' rows='10'></textarea>
		</td>
	</tr>
	<tr>
		<td>
		</td>
		<td>
	<input type='submit' value='register' name='solosubmit'>
		</td>
	</tr>
</form></table>

<table align='right' width='33.33%' id='fanreg'><form method='post' action='register.php'>
	<tr>
		<td>
			Username :
		</td>
		<td>
			<input type='text' name='username'>
		</td>
	</tr>
	<tr>
		<td>
			Password :
		</td>
		<td>
			<input type='password' name='password'>
		</td>
	</tr>
	<tr>
		<td>
			Repeat Password :
		</td>
		<td>
			<input type='password' name='repeatpassword'>
		</td>
	</tr>
	<tr>
		<td>
			Email :
		</td>
		<td>
			<input type='text' name='email'>
		</td>
	</tr>
	<tr>
		<td>
			First name :
		</td>
		<td>
			<input type='text' name='firstname'>
		</td>
	</tr>
	<tr>
		<td>
			Last name :
		</td>
		<td>
			<input type='text' name='lastname'>
		</td>
	</tr>
	<tr>
		<td>
		</td>
		<td>
	<input type='submit' value='register' name='solosubmit'>
		</td>
	</tr>
</form></table>
";

include("footer.php");
?>

in my header.php i include all of javascript files that i had posted at first

4

It seems like you need to fade out the other ones first, before fading in the one that you want.

Typically a callback would be used, but in this case it’s different elements that are being animated so a timeout is more appropriate.

Something like this, for each of them, would do the trick.


$('a#solo').click(function() {
    $('table#groupreg, table#fanreg').fadeOut('slow');
    setTimeout(function () {
        $('table#soloreg').fadeIn('slow');
    }, 600);
});
5

works perfectly thanks alot!!! i appreciate it

6

anyone have any ideas for my other problem?

7

There are two differnt types of solutions for that.

One is to set a cookie that specifies which form is being used, so that on page reload you can show that same form again.

A second solution is to override the onsubmit event and submit the form via an ajax event instead.

8

ok well i was thinking of using sessions because im pretty sure there more secure. and i dont have the slightest clue aboput anything ajax. is it easy to do it or is it a complex? unless cookies are easier…

9

Sessions are managed from the server-side, and why is security of concern in this situation where you’re wanting the form type to be remembered?

It’s where you submit the form to a webpage, without reloading the page.

Even easier than cookies is to submit the form, and then redirect back to the multiple forms page with a fragment identifier, that determines which one is seen by default on loading the page.

For example:

page.php#groupreg

With which you can hide all the forms and then do:
$(location.hash).show();