PHP with Jquery

Question

Tenaciousmug 0 Junior Poster in Training

13 Years Ago

I'm trying to SELECT * FROM table WHERE gender='whatever they clicked on';
WITHOUT refreshing the page. I am showing the gender table and then after the click a gender, I hide that table and then show the next, etc.
It's working fine, but whenever I start using the AJAX to grab the "POST" value of gender, it stops showing/hiding things..
BUT it IS grabbing the gender correctly. It just stops showing/hiding for some odd reason.

Here is my javascript code:

<script>
	function chooseGender()
	{
		// we want to store the values from the form input box, then send via ajax below
		var gender = document.getElementsByName("gender");
		
		if (gender.checked)
		{
			var selectGender = gender.value;
		}
		$("#submitgender").hide();
		$("#rest").show();
	}
	</script>

Then here is my Javascript code that won't work:

<script>
	function chooseGender()
	{
		// we want to store the values from the form input box, then send via ajax below
		var gender = document.getElementsByName("gender");
		
		if (gender.checked)
		{
			var selectGender = gender.value;
		}
		
		$.ajax(
		{
			type: "POST",
			url: "ajax.php",
			data: "gender="+ Selectgender,
			success: function()
			{
				$("#submitgender").hide();
				$("#rest").show();
			}
		});
	}
	</script>

Then 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" onclick="chooseGender()">Next</button>
			</td>
		</tr>
	</table>
</form>
		
	<table cellspacing="0" class="news" align="center" id="rest" style="display: none;">
CONTENT IS HERE, but the PHP works fine so I'm not going to bother showing it.
	</table>

javascript jquery php

Edited 13 Years Ago by Tenaciousmug because: n/a

2 Contributors
3 Replies
92 Views
1 Day Discussion Span
Latest Post 13 Years Ago Latest Post by vibhaJ

vibhaJ 126 Master Poster

13 Years Ago

Check this..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script>
	function chooseGender()
	{
		var selectGender = $('input[name=gender]:checked', '#submitgender').val();
	 	if(selectGender)
		{
			$.ajax(
			{
				type: "POST",
				url: "ajax.php",
				data: "gender="+ selectGender,
				success: function()
				{
					$("#submitgender").hide();
					$("#rest").show();
				}
			});
		}
		else
		{
			alert('Select Gender.');
		}
	}
	</script>
</head>

<body>
<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" onclick="chooseGender()">Next</button>
			</td>
		</tr>
	</table>
</form>
		
	<table cellspacing="0" class="news" align="center" id="rest" style="display: none;">
CONTENT IS HERE, but the PHP works fine so I'm not going to bother showing it.
	</table>
</body>
</html>

Edited 13 Years Ago by vibhaJ because: n/a

Reply to this topic

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.

Tenaciousmug 0 Junior Poster in Training · Answer 1 · 2011-06-01T20:47:53+00:00

Alright so now here is how my javascript looks:

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

It IS working. Thank you soooo much!
BUT now, my table that pops up won't read the gender they selected. Here is my table that holds that PHP:

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

This is what my print_r statement is coming up as:

SELECT * FROM habases WHERE gender=''

vibhaJ 126 Master Poster · Answer 2 · 2011-06-02T12:01:58+00:00

Add below code on top of your ajax page to see what variables are passing.

<?
	echo '<pre>';
	echo '<br />Post:<br />';
	print_r($_POST);
	
	echo '<br />Get:<br />';
	print_r($_GET);
	
	echo '<br />Request:<br />';
	print_r($_REQUEST);
	exit;
?>