PHP with Jquery

Question

Tenaciousmug 0 Junior Poster in Training

15 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="" /></center>
			</td>
			<td style="border-right:1px solid #000;" width="300" height="400">
			<center><img src="" /></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 15 Years Ago by Tenaciousmug because: n/a

2 Contributors
3 Replies
107 Views
1 Day Discussion Span
Latest Post 15 Years Ago Latest Post by vibhaJ

Dani AI

Generated 10 Months Ago

The printout shown by (SELECT ... WHERE gender='') is the key clue: the PHP inside the hidden #rest table ran when the page was first rendered, so $_POST was empty then. An AJAX POST sent later does not re-run PHP that already produced HTML in the browser. That is why the visible DOM never reflects the posted gender even though the AJAX call succeeds.

Two simple patterns fix this:

Request the content for #rest from the server after the radio is chosen, and inject the server-generated fragment into the page. The server-side script should accept gender and return only the HTML needed for #rest.
Have the server return JSON (rows) and build the DOM on the client side from that JSON. This keeps logic explicit and avoids embedding server output into the page at load time.

A minimal client-side example using the Fetch API (returns server-rendered HTML and inserts it into #rest):

fetch('/ajax.php', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: 'gender=' + encodeURIComponent(gender)
})
.then(r => r.text())
.then(html => {
  document.getElementById('rest').innerHTML = html;
  document.getElementById('submitgender').style.display = 'none';
});

Practical checks: use the browser Network tab to confirm the POST body and the server response, and log the AJAX response to the console. Ensure the AJAX URL actually points at the handler that produces the fragment (posting to the same page works only if that page is written to detect XHR and return the fragment). When reading radio buttons with plain DOM, remember document.getElementsByName returns a NodeList — pick the checked element or use querySelector('input[name=gender]:checked').

Security note: never interpolate raw $_POST into SQL. Use prepared statements/bound parameters (see mysqli_prepare) or PDO to prevent SQL injection. For details on $_POST and prepared statements see the PHP manual: $_POST and mysqli_prepare. Finally, ’s debugging suggestion to inspect POST data (via server-side logging or DevTools) is a good first step when response contents are unexpected.

All 3 Replies

vibhaJ 126 Master Poster

15 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="" /></center>
			</td>
			<td style="border-right:1px solid #000;" width="300" height="400">
			<center><img src="" /></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 15 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=\"".$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;
?>

PHP with Jquery

Dani AI

Recommended Answers Collapse Answers

All 3 Replies

Recommended Answers