I think this belongs here, but my $_POST won't grab the gender that was submitted through a form.

I am using AJAX so the page doesn't have to reload so it can go in a smooth transition, but the AJAX is grabbing the value perfectly fine.
I have a feeling the $_POST isn't grabbing the value because the page isn't reloading.. but I don't want to reload it.
These codes are all on the same page.

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()
				{
					alert("You have chosen to be a " + gender); //It's grabbing it perfectly fine!
					$("#submitgender").hide(); //It hides the gender table so they can't choose a gender since they already have chosen one.
					$("#rest").fadeIn(); //Shows the other table that's labeled "rest" as it's ID so they can choose what base, eyes, etc for that specific gender they've chosen.
				}
			});
		}
		else
		{
			alert('Select a gender.');
		}
	}
	</script>

But here is the PHP inside the #rest table:

<?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."\">";
							}
							?>

And this is what I'm getting for the print_r:

SELECT * FROM habases WHERE gender=''

its not an input, its not posted

its not an input, its not posted

What do you mean?
How would I get this to work then?

But it is submitting because there is a submit button in a form using the POST method.

the code sample is not complete, unless there is an <input name='gender'> of some kind , radio button etc in the code that you have not thought to display...
"a submit button in a form" don't mean, much
post the code, without the indenting, complete
code posted between [code] tags is highlighted, indenting is useless, counter-productive,
a code highlighting editor often shows up the code errors that cause these difficult to find, (cross fingers) easy to fix, problems
if you dont use an editor that code highlights and completes, get one :P

Do you recommend any specific one?

Here is my entire code:

<?php
session_start();
include("/home1/elvonica/public_html/includes.php");
?>
<?php include("/home1/elvonica/public_html/header.php"); ?>
<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()
{
alert("You have chosen to be a " + gender);
$("#submitgender").hide();
$("#rest").fadeIn();
selectGender.innerHTML = "Gender: "+ gender +"";
}
});
}
else
{
alert('Select a gender.');
}
}	
$(function tabs()
{
$( "#tabs" ).tabs();
});
</script>
<?php
echo $eventdisplay; ?>
<h1>Human Avatar</h1>
<?php
echo $error;
$sql = "SELECT * FROM userhas WHERE userid='".$_SESSION['userid']."'";
$result = mysqli_query($cxn, $sql);
$num = mysqli_num_rows($result);
if ($num > 0)
{}
else
{
?>
<form id="submitgender" method="post" action="<?php echo $_SERVER['SCRIPT_NAME']; ?>">
<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" class="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" class="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; text-align:right;">
<button type="button" onclick="chooseGender()">Next</button>
</td>
</tr>
</table>
</form>
<table cellspacing="0" class="news" align="center" id="rest" style="display: none;">
<tr>
<td colspan="2" style="border-bottom:1px solid #000; text-align: center;">
<?php echo "<h1 id=\"selectGender\"></h1>"; ?>
</td>
</tr>
<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>
<?php
}
?>		
<?php include("/home1/elvonica/public_html/footer.php"); ?>

thank you, indented code is very difficult to read

<?php session_start();
include("/home1/elvonica/public_html/includes.php");
include("/home1/elvonica/public_html/header.php"); ?>
<script type='text/javascript'>
function chooseGender() {
var gender = $('input[name=gender]:checked', '#submitgender').val();
if(gender) { 
$.ajax(
{
type: "POST",
url: window.location.pathname,
data: "gender='" + gender,
success: function()
{
alert("You have chosen to be a " + gender);
/* javascript to mark document.getelementbyID('gender'+ gender).checked='checked'; */
$("#submitgender").hide();
$("#rest").fadeIn();
selectGender.innerHTML = "Gender: "+ gender +"";
} }); }
else { alert('Select a gender.'); }
}	
$(function tabs() {
$( "#tabs" ).tabs();
});
</script>
<!-- snipped for convenience-->
<form id="submitgender" method="post" action="<?php echo $_SERVER['SCRIPT_NAME']; ?>">
<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" id='genderMale' class="gender" value="Male"><label for='gendermale'><b>Male</b></label></center>
</td>
<td style="border-right:1px solid #000; border-bottom:1px solid #000;" width="300">
<center><input type="radio" name="gender" class="gender" id='genderFemale' value="Female"><label for='genderfem'><b>Female</b></label></center>
</td>
</tr>
<!-- snipped for convenience-->

/* javascript to mark document.getelementbyID('gender'+ gender).checked='checked'; */ the line above, my javascript is lousy, there is nothing to ensure the value in the hidden input is retained after the update is made, id added to radio buttons
have added label tags to the male/female radio buttons, so the name is clickable
not sure,

Ok so sorry. Edited my post.
Thank you so much for helping me! You're the only one who has been willing to try.

been playing with the code, I missed the very obvious
when the php sql select executes, the javascript has not,
the page is not reloaded, that php does not execute again, the field is not populated with a gender
you have to modify the javascript to execute an ajax select from the database
my prior code answer is absolutely wrong, I focused on MY biggest problem, javascript, when it is an ajax issue

this question would likely get an intelligent, rapid answer, from the gurus in the AJAX forum

So there is no possible way to do it the way I'm doing it?
You have to reload the page to get stuff from the database?
So they have to chose their gender and insert into the database and then go from there?..
I don't get the point of AJAX then since I wanted it to load into a smooth transition.

that is the point of ajax
those in the AJAX forum mostly know enough to seamlessly make ajax update the sql select statement and populate the fields without reloading the page,
an extension of what you have begun
& because you have begun, there will be no smart-alec replies, telling you to go away and 'read the effing manual'

( be amazed how many posters expect "paid" programming support from the posters here, without making any attempt )
( or the number who just want their school homework done )

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.