Solved

PHP using jQuery to validate MySQL data

Posted on 2013-02-03
6
305 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 110

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 110

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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

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 110

Expert Comment

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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
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 the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

734 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