• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 339
  • Last Modified:

PHP using jQuery to validate MySQL data

This is just in design, and I know next to nothing regarding jQuery so I need help from the experts please.

I want the first page here:
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

<head>
  <meta charset='utf-8' />
	<script src='../../../js/libs/modernizr-1.6.min.js'></script>
	<script src='../../../js/libs/jquery-1.7.1.min.js'></script>

	<script type="text/javascript">
		
		$(document).ready(function(){  
			$(".NextButton").click(function(){  
				var searchString    = $("#Category").val();
		 
				if(searchString !== '') {
					$.get('search-data.php?cat='+searchString, function(returnData) {
						if (returnData == 'N') {
							// make fields in the div visible
						} else {
							// redirect to another page
						}
					});
				} else {
					$('#ShowIt').html('<p style="padding:5px;color:red;">Please select category.</p>');
				}
			});
		}

	</script>
</head>

<body>
<?php
	echo "<form id='cc-form' action='".$_SERVER["PHP_SELF"]."' method='POST'>";
?>
Select a category
<select name='Category' class='Category' >
<option value=''>Select</option>
<option value='ABC'>ABC</option>
<option value='DEF'>DEF</option>
<option value='GHI'>GHI</option>
</select>
<br>
<input class='pill-button' id='NextButton' type='button' value='Next -->'/>

<div id="ShowIt" name="ShowIt" style="display:none">
<input name='Wfname' type='text'/>
<input name='Wlname' type='text'/>
</div>					

</form>
</body>
</html>

Open in new window


When the Next button is clicked, I want to act on whether there is a data match or not, as commented in the jQuery attempt above.

here is the search page, that works correctly:
<?php
// for the database connection
require_once('./csp-common.php');
?>
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

<head>
  <meta charset='utf-8' />
	<script src='../../../js/libs/modernizr-1.6.min.js'></script>
	<script src='../../../js/libs/jquery-1.7.1.min.js'></script>
</head>

<body>
<?php
	$sql = "SELECT * FROM Csp WHERE Category = '".$_GET["cat"]."'";
			if (!$res = mysql_query($sql)) {
				$errmsg = mysql_errno() . ' ' . mysql_error();
				$_SESSION["IncompleteMsg"] = $errmsg;
				redirectit('./incomplete.php');
			}
			if ( mysql_num_rows($res) > 0 ) {
				return "Y";
			} else {
				return "N";
			}
?>
</body>
</html>

Open in new window


Currently, when I click the Next button, nothing happens.  Can someone please explain what I have done wrong?

Thanks in advance!
0
kkbenj
Asked:
kkbenj
  • 3
  • 3
1 Solution
 
Ray PaseurCommented:
I don't think I can debug your code, but I can show you a simple example of a jQuery AJAX script that completes the handshake.  Maybe you can follow the design pattern to a solution.
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/A_10712-The-Hello-World-Exercise-with-jQuery-and-PHP.html
0
 
kkbenjAuthor Commented:
I'm afraid I need a bit more help.  I understand your post and was able to correct my syntax error in the onclick:
	<script type="text/javascript">
		
		$(document).ready(function(){  
			$(".NextButton").click(function(){  
				var searchString    = $("#Category").val();
				if(searchString !== '') {
					$.get('search-data.php?cat='+searchString, function(returnData) {
						if (returnData == 'N') {
							// make fields in the div visible
						} else {
							// redirect to another page
						}
					});
				} else {
					$('#ShowIt').html('<p style="padding:5px;color:red;">Please select category.</p>');
				};
			});
		});

	</script>

Open in new window


The areas where I need help:
1. nothing happens when I click the button.
2. how do I redirect with jQuery>
3. how do I enable a div with jQuery?
0
 
Ray PaseurCommented:
Suggest you add some alert() functions into the JavaScript so you can follow the logic and data on the client side.  

On the server side, you might want to use PHP echo to send a data string back to the client browser.  I don't think return will send the data you need.  

Also, you might want to test the MySQL error handling in the PHP script.  Go into line 20 and deliberately damage the query to see if the error handler actually works the way you think it will.  These things often get overlooked in testing because it's difficult to get good code coverage for error handlers.

HTH, ~Ray
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
kkbenjAuthor Commented:
Ray - you were absolutely correct that the return wasn't the way to pass data back to the ajax call.  And for the pieces not working, I had my class and id references backwards.

Here is the complete correct code:
$(document).ready(function(){  
	$(".little-pill-button").click(function(){  
		var searchString = $("#Category").val();
		if(searchString !== '') {
			$.get('search-data.php?cat='+searchString, function(returnData) {
				if (returnData == 'N') {
					// make fields in the div visible and make button disappear
					document.getElementById('NextButton').style.display = 'none';	
					document.getElementById('ShowCC').style.display = 'block';
				} else {
					// redirect to another page
					window.location.href="./waitlist.php";
				}
			});
		} else {
			$('#results').html('<p style="padding:5px;color:red;">Please select category.</p>');
		};
	});
});

Open in new window


data-search.php - it is "echo" that returns the information:
<?php
	require_once('./csp-common.php');
	
	$sql = "SELECT * FROM Csp WHERE Category = '".$_GET["cat"]."'";
			if (!$res = mysql_query($sql)) {
				$errmsg = mysql_errno() . ' ' . mysql_error();
				$_SESSION["IncompleteMsg"] = $errmsg;
				redirectit('./incomplete.php');
			}
			if ( mysql_num_rows($res) > 0 ) {
				echo "Y";
			} else {
				echo "N";
			}
?>

Open in new window

0
 
kkbenjAuthor Commented:
Thanks for such quick assistance!
0
 
Ray PaseurCommented:
Excellent news!  Thank you for the points and thanks for using EE, ~Ray
0

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now