Solved

PHP using jQuery to validate MySQL data

Posted on 2013-02-03
6
291 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 109

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 109

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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

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 109

Expert Comment

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

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to dynamically set the form action using jQuery.

809 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