Solved

PHP using jQuery to validate MySQL data

Posted on 2013-02-03
6
282 Views
Last Modified: 2013-02-03
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
Comment
Question by:kkbenj
  • 3
  • 3
6 Comments
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 38848629
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
 

Author Comment

by:kkbenj
ID: 38848677
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
 
LVL 108

Accepted Solution

by:
Ray Paseur earned 500 total points
ID: 38848776
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:kkbenj
ID: 38849221
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
 

Author Closing Comment

by:kkbenj
ID: 38849224
Thanks for such quick assistance!
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 38849253
Excellent news!  Thank you for the points and thanks for using EE, ~Ray
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article discusses four methods for overlaying images in a container on a web page
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now