Solved

PHP using jQuery to validate MySQL data

Posted on 2013-02-03
6
312 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
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!

 

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

More Than Just A Video Library

Train for your certification. Learn the latest DevOps tools. Grow your skillset to do better work.

At Linux Academy, we release new training modules every week so you'll always be up to date on the latest tech.

Question has a verified solution.

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

These days socially coordinated efforts have turned into a critical requirement for enterprises.
This article discusses how to implement server side field validation and display customized error messages to the client.
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…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…

627 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