troubleshooting Question

Returning errors to display in a dialog box - Ajax, Json, Php

Avatar of Overthere
Overthere asked on
PHPAJAX
16 Comments1 Solution358 ViewsLast Modified:
I am stuck. My goal is to return the errors to display in a dialog box to the user. I can not figure out how to do this.  Can someone show me the way?? All 3 input values are required and may or may not have values. If they don't have values, I want to display to user.
I have posted both my validate page and my html.
I understand the error routine but I have not quite been able to fix out how to pass the errors to my html and to the dialog box..
Here is my validate page:
<?php 
/*getbookvalidate - validates user input  */

	//  data 
		$bookingid = isset($_POST['txtbookingid']) ? $_POST['txtbookingid'] : '';
		$txtusername = isset($_POST['txtuser']) ? $_POST['txtuser'] : '';
		$txtpassword = isset($_POST['txtpass']) ? $_POST['txtpass'] : ' ';
		$resp = new stdClass;
               $resp->success = true;
		
			
        	//check to see if the bookingid is an integer 	
			if (!is_int($bookingid))  
			    {
				    $resp -> false;
					$error = new stdClass;
					$error->id = 'txtbookingid';
					$error->msg = 'Booking Nbr Required';
			              $resp->error[] = $error;
                }
				
			if (strlen($txtusername) ==0) 
			    {
				   	$resp -> false;
					$error = new stdClass;
					$error->id = 'txtuser';
					$error->msg = 'Username Required';
			               $resp->error[] = $error;
				}
		
    		if (strlen($txtpassword) ==0) 
			    {
				   	$resp -> false;
					$error = new stdClass;
					$error->id = 'txtpass';
					$error->msg = 'Password Required';
			              $resp->error[] = $error;
				}
				
			die(json_encode($resp));
?>				
Here is my html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Booking</title>
<link href="Styles/OldTheme.css" rel="stylesheet" type="text/css" >
<link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.min.css">
<script type="text/javascript" src="jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script>
<script type="text/javascript" src="jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
</head>
<body>
<br><br>
    <div>
        <form>
            <table style="margin: auto;">
                <tr>
                    <td style="text-align:center">Booking</td>
                </tr>
            </table>
            <br><br>
			<div id="result">Error Message here</div>
            <table style="margin:auto;">
				<tr>
				    <td style="text-align:right">Enter Booking Nbr: 
                        <input placeholder="Booking Nbr" type="number" id="txtbookingid" name="txtbookingid" >
					</td>
				</tr>
				<tr>
				    <td></td>
				</tr>
				<tr>
  				    <td style="text-align:right">UserName:
					<input placeholder="UserName" type="text" id="txtuser" name="txtuser">
					</td>
				</tr>
				<tr>
				     <td></td>
				</tr>
				<tr>
					<td style="text-align:right">Password:
				        <input placeholder="Password" type="password" name="txtpass" id="txtpass">
                    </td>
                </tr>				
			</table>
			<br><br>
	        <table style="margin: auto;">
                <tr>
                    <td><input type="submit" name="retreive" value="Retreive Booking" src="" alt="Retreive Booking" />
                    <td><input type="submit" name="cancel" value="Cancel" src="" alt="Cancel"></td>
                    <td><input type="reset" name="reset" value="Reset Form" src="" alt="Reset Form"></td>
			    </tr>
            </table>
        </form>
     </div>
<!-- INCLUDE "getbookvalidate.php:PHP" -->
<link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.min.css">
<script type="text/javascript" src="jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script>
<script type="text/javascript" src="jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script>
 $( function() {
    $( "#dialog" ).dialog();
  } );
  
$(function() {
  $('form').submit(function(e) {
    e.preventDefault();
    var form = $(this);
    $('.alert').remove();
    $.ajax({
      url: 'getbookvalidate.php',
      data: form.serialize(),
      dataType: 'JSON'
      }).done(function(resp) {
     if (!resp.success) {
        for(var i = 0; i < resp.error.length; i++) 
		{
          var error = resp.error[i];
		  // want to return the errors to display in a dialog box to user
        
       }
     
    });    
  });
});
</script>
</body>
</html> 
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 16 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 16 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros