<?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>
<!doctype html>
<html>
<head>
<title>Booking</title>
<meta charset="UTF-8">
<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>
<table style="margin: auto;">
<tr>
<td style="text-align:center">Booking</td>
</tr>
</table>
<br><br>
<div id="result">Error Messages</div>
<form>
<table style="margin:auto;">
<tr>
<td style="text-align:right">Enter Booking Nbr:
<input type="text" id="txtbookingid" name="txtbookingid" />
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td style="text-align:right">UserName:
<input type="text" id="txtuser" name="txtuser" />
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td style="text-align:right">Password:
<input type="password" name="txtpass" id="txtpass" />
</td>
</tr>
</table>
<br><br>
<table style="margin: auto;">
<tr>
<td><input type="submit" id="search" name="search" value="Search" /></td>
<td><input type="submit" id="cancel" name="cancel" value="Cancel"/></td>
<td><input type="reset" id="reset" name="reset" value="Reset"/></td>
</tr>
</table>
</form>
<!-- INCLUDE "getbookvalidate.php:PHP" -->
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$("#retreive").click(function(e) {
e.preventDefault();
$.ajax({
url: 'getbookvalidate.php',
type: 'POST',
data:{
'txtbookingid' : $('#txtbookingid').val(),
'txtuser' : $('#txtuser').val(),
'txtpass' : $('#txtpass').val(),
}
}).done(function(data, status) {
$('#result').html(data);
});
});
</script>
</body>
</html>
<?php
{
error_reporting(E_ERROR | E_WARNING | E_PARSE | E_NOTICE);
/*getbookvalidate - validates user input */
$errmsg= '';
$result = '';
$txtbookid = isset($_POST['txtbookingid']) ? $_POST['txtbookingid'] : 'No Booking Nbr passed through<br>';
$txtusername = isset($_POST['txtuser']) ? $_POST['txtuser'] : 'No Username passed through<br>';
$txtpassname = isset($_POST['txtpass']) ? $_POST['txtpass'] : 'No Password passed through<br>';;
if (strlen($txtbookid) ==0)
{
$errmsg = 'Booking Nbr Required.<br>';
}
if (!is_int($txtbookid))
{
$errmsg = 'Booking Nbr Must be Numeric.<br>';
}
if (strlen($txtusername) ==0)
{
$errmsg = $errmsg . 'Username Required.<br>';
}
if (strlen($txtpassname) ==0)
{
$errmsg = $errmsg . 'Password Required.<br>';
}
if (strlen($errmsg) >0)
{
$result = 'ERRORS<br>' . $errmsg;
}
$result = $errmsg . 'Booking Nbr:' . $txtbookid . ' User: ' . $txtusername . ' Password<br>' . $txtpassword;
// echo $errmsg;
var_dump($errmsg);
var_dump($result);
echo $result;
}
?>
<div id="dialog" title="Form Submit" style="display:none;">
<p id="dText">The Form was submited Sucessfully, thanks</p>
</div>
function showDia(error1, html1) {
var en = "<b style='color:blue;'>Submited Sucessfully</b><br />";
var title1 = 'New Entry successfull';
if (error1 > 0) {
en = "<b style='color:red;'>ERROR</b><br />";
title1 = 'New Entry Unsuccessfull';
}
$( "#dialog" ).dialog({ title: title1 });
$('#dText').html(en+html1);//"<b style='color:'>"+
}
<script>
$(function() {
// use the submit( ) method to fire when you click the form submit button
$( "#frm1" ).submit(function( event ) {
event.preventDefault(); //you MUST prevent submission here
// Use the $.post( ) for ajax
$.post( "getbookvalidate.php", $( "#frm1" ).serialize() ) // serialize() will get ALL inputs in the form
.done(function( server ) {
// show the server TEXT return in result div
$('#result').html(server);
})
.fail(function() {
// always have a .fail( ) to catch errors
alert( "Ajax error" );
});
});
});
<script>
place the above <script> in the <head> BELOW, it has to be below the -var error = resp.error[i];
replacing the coding I have there with it? I think I know but what I have tried does not work.<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Booking</title>
<link href="Styles/OldTheme.css" rel="stylesheet" type="text/css" >
</head>
<body>
<header>
</header>
<div id="result"></div>
<form class="form">
<div>
<input placeholder="bookingid" id="txtbookingid" name="txtbookingid" />
</div>
<div>
<input placeholder="username" id="txtuser" name="txtuser" />
</div>
<div >
<input placeholder="password" id="txtpass" name="txtpass" />
</div>
<input type="submit" class="btn btn-primary"/>
</form>
<footer>
</footer>
<!-- INCLUDE "getbookval-2:PHP" -->
<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(function() {
$('form').submit(function(e) {
e.preventDefault();
var form = $(this);
$('.alert').remove();
$.ajax({
url: 'getbookval-2.php',
data: form.serialize(),
type: 'POST',
dataType: 'JSON'
}).done(function(resp) {
if (!resp.success) {
for(var i = 0; i < resp.error.length; i++) {
var error = resp.error[i];
var alert = $('<div/>', {class: 'alert alert-danger'}).html(error.msg);
$('#' + error.id).after(alert);
}
}
else {
alert('All good - redirect will happen here');
}
});
});
});
</script>
</body>
</html>
When I am done, I will re-post it...