Ajax won't show/hide tables

[Tenaciousmug]

Right now, it is showing the #gendersubmit AND #rest tables.

I only want it to show the #gendersubmit when the page first loads, but then once they click the button and have a gender selected, I want the page to not reload and hide the #gendersubmit form, then show the #rest table displaying the bases, eyes, etc for whatever gender they selected.

 

Here is my Javascript code:

 

<script>
$("#submitgender").submit(function()
{
	var gender = $('gender').attr('value');

	$.ajax(
	{
		type: "POST",
		url: window.location.pathname,
		data: "gender="+ Selectgender,
		success: function()
		{
			$("#submitgender").hide();
			$("#rest").show();
		}
	});

	return false;
});
</script>

 

And here is my HTML/PHP:

 

<form id="submitgender" method="post">
<table cellspacing="0" class="news" align="center" id="gender">
	<tr>
		<td colspan="2" style="border-bottom:1px solid #000;">
			<center>Click on your gender:<br>
		</td>
	</tr>
	<tr>
		<td style="border-right:1px solid #000; border-bottom:1px solid #000;" width="300">
			<center><input type="radio" name="gender" value="Male"><b>Male</b></center>
		</td>
		<td style="border-right:1px solid #000; border-bottom:1px solid #000;" width="300">
			<center><input type="radio" name="gender" value="Female"><b>Female</b></center>
		</td>
	</tr>
	<tr>
		<td style="border-right:1px solid #000;" width="300" height="400">
			<center><img src="http://www.elvonica.com/wardrobe/imgs/maleimage.png" /></center>
		</td>
		<td style="border-right:1px solid #000;" width="300" height="400">
			<center><img src="http://www.elvonica.com/wardrobe/imgs/femaleimage.png" /></center>
		</td>
	</tr>
	<tr>
		<td colspan="2" style="border-top:1px solid #000;">
			<button type="button">Next</button>
		</td>
	</tr>
</table>
</form>

<table cellspacing="0" class="news" align="center" id="rest">
Not showing the PHP yet since I want to find a solution for the AJAX first.
</table>

[Tenaciousmug]

Alright I got everything working now, but the PHP isn't grabbing the gender value.

 

Here is my Javascript:

<script>
function chooseGender()
{
	var gender = $('input[name=gender]:checked', '#submitgender').val();
 	if(gender)
	{
		$.ajax(
		{
			type: "POST",
			url: window.location.pathname,
			data: "gender="+ gender,
			success: function()
			{
				$("#submitgender").hide();
				$("#rest").show();
			}
		});
	}
	else
	{
		alert('Select a gender.');
	}
}
</script>

 

And here is the table that displays and pulls stuff from the MySQL database where the gender = what they selected:

<table cellspacing="0" class="news" align="center" id="rest" style="display: none;">
<tr>
	<td height="400px" width="300" style="border-right:1px solid #000;">
		<center><img src="#" alt="image"></center>
	</td>
	<td height="400px" width="300" valign="top">
		<div id="tabs">
			<ul>
				<li><a href="#bases">Base</a></li>
				<li><a href="#eyes">Eyes</a></li>
				<li><a href="#mouths">Mouth</a></li>
				<li><a href="#noses">Nose</a></li>
				<li><a href="#hairs">Hair</a></li>
			</ul>
			<div id="bases">
				<p>

				<?php
				$gender = $_POST['gender'];

				$sql = "SELECT * FROM habases WHERE gender='".$gender."'";
				$result = mysqli_query($cxn, $sql) or die(mysqli_error($cxn));
				print_r($sql);
				while ($row = mysqli_fetch_assoc($result))
				{
					$baseimage = $row['image'];
					$baseskin = $row['skin'];

					echo "<img src=\"http://www.elvonica.com/".$baseimage."\" value=\"".$baseskin."\">";
				}
				?>

				</p>
			</div>
			<div id="eyes">
				<p>Eyes here.</p>
			</div>
			<div id="mouths">
				<p>Mouths here.</p>
			</div>
			<div id="noses">
				<p>Noses here.</p>
			</div>
			<div id="hairs">
				<p>Hairs here.</p>
			</div>
		</div>
	</td>
</tr>
</table>