I'm developing a jquery mobile app that uses php to get information from the database ( e.g user login ). but I've this problem: I need to display specific information from the database depends on the user logged ( clients and proyects are related one each other by 'project' field in clients and 'id' in projects )
I was trying to add the field 'project' into the 'login' query but when I made this the app couldn't logged
Thanks in advance for your help
----------- index.html --------------
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
<link rel="stylesheet" href="theme/css/jquery.mobile.min.css" />
<link rel="stylesheet" href="theme/css/surinteractive.min.css" />
<link rel="stylesheet" href="theme/css/jquery.mobile.icons.min.css" />
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
<script src="js/json.js"></script>
</head>
<body>
<div data-role="page" id="login" data-theme="a">
<header data-role="header" data-position="fixed">
<h1>Sistema de gestión de Requerimientos</h1>
</header>
<div data-role="content">
<div id="fm">
<form id="form">
<label for="username">User:</label>
<input type="text" value="" name="username" id="username"/>
<label for="password">Pass:</label>
<input type="password" value="" name="password" id="password"/>
<a data-role="button" id="login-button" data-theme="a" class="ui-btn-icon-right ui-icon-plus ui-btn-b">
Sign in
</a>
</form>
</div>
</div>
<footer data-role="footer" data-position="fixed" id="footer">
<p>© Copyright 2014 </p>
</footer>
</div>
<div data-role="page" id="menu" data-theme="a">
<header data-role="header" data-position="fixed">
Back
<h3>Bugs List</h3>
</header>
<div data-role="content">
<h3>Welcome: </h3>
<ul data-role="listview" data-inset="true">
<li>Create a bug</li>
<li>Create an enhacement</li>
</ul>
</div>
<footer data-role="footer" data-position="fixed" id="footer">
<p>© Copyright 2014</p>
</footer>
</div>
</body>
</html>
------------------ json.js --------------------------
$(document).on('pagebeforeshow', '#login', function(){
$('#login-button').on('click', function(){
if($('#username').val().length > 0 && $('#password').val().length > 0){
userObject.username = $('#username').val();
userObject.password = $('#password').val();
var outputJSON = JSON.stringify(userObject);
ajax.sendRequest({action : 'login', outputJSON : outputJSON});
} else {
alert('Please fill all requested information');
}
});
});
var ajax = {
sendRequest:function(save_data){
var address = null;
//address = 'http://127.0.0.1/app/inc/userValidation.php?jsoncallback=?';
$.ajax({url: address,
crossDomain: true,
data: save_data,
async: true,
beforeSend: function() {
// This callback function will trigger before data is sent
$.mobile.loading('show', {theme:"a", text:"Initializing...", textonly:true, textVisible: true});
},
complete: function() {
// This callback function will trigger on data sent/received complete
$.mobile.loading('hide');
},
success: function (result) {
if(result == "true") {
$.mobile.changePage( "#menu", { transition: "slide"} );
} else {
alert('Invalid login. Please try again!'); // In case result is false throw an error
}
// This callback function will trigger on successful action
},
error: function (request,error) {
// This callback function will trigger on unsuccessful action
alert('Connection error, please try again');
}
});
}
}
// We will use this object to store username and password before we serialize it and send to server. This part can be done in numerous ways but I like this approach because it is simple
var userObject = {
username : "",
password : ""
}
------------ userValidation.php -------------------
<?php
$jsonObject = json_decode($_REQUEST['outputJSON']); // Decode JSON object into readable PHP object
$username = $jsonObject->{'username'}; // Get username from object
$password = $jsonObject->{'password'}; // Get password from object
$connection = null;
$connection = new mysqli('127.0.0.1', 'xxxx', 'xxxx', 'xxxx');
$query = "SELECT * FROM clients WHERE username = '".$username."' and password = '".$password."'";
$result = mysqli_query($connection,$query);
$num = mysqli_affected_rows($connection);
if($num != 0) {
echo "true";
} else {
echo "false";
}
?>
Database ( Structure & Relationship )
clients
id, name, username, password, projectid, status, creation_date
projects
id, project, description, technologies, status, creation_date
bugs
id name projectid, type, environment,description, status, creation_date
projectid.clients = id.projects
id.projects = projectid.bugs
Objective: Store the username in a global variable to be recovered in another page
Finally I've solved this issue creating a new schema called sessions, when the user signs it to the app, it will be store in that schema. After this, if the user wants to get the list of bugs created a new sql sentence will be called to join 'sessions' in that search
Related
I'm trying to send some Data to a MySQL Database that I have stored on a server. When I press the submit button, my PHP scripts let me know that the connection to the DB has been successful, but the insertion of data has not. I can't find any issue in the Error logs, or an obvious problem when I examine the code via Google Chrome's developer tools.
Below is the HTML File;
<html>
<head>
<title>Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://example.com/JS/functions.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
//CSS
<style>
.ui-page {
background: #4990E2;
}
p {
color: #ffffff;
}
</style>
</head>
div data-role="page" id="page1">
<div data-role="header" data-theme="a">
<h1>Welcome</h1>
</div>
<!-- Main page content goes under this line -->
<div data-role="main" class="ui-content">
<br>
<br>
<br>
<form id="myForm" method="post" action="include.php">
<label for="rating">How are you feeling?</label>
<input type="range" name="rating" id="rating" value="50" min="0" max="100" data-popup-enabled="true">
<input id="submit" type="submit" data-inline="true" value="Submit">
</form>
<br>
<br>
<span id="result"></span>
<br>
<p>Some text</p>
</div>
<div data-role="footer" data-position="fixed" data-theme="b">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
</div>
</div>
</div>
<!-- Page ends here -->
<!-- -->
Below is the PHP file (db.php);
<?php
//put your connection code here
$servername = 'localhost';
$username = 'user_admin';
$password = '12345-678';
$dbname = 'my_DB';
//create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
echo "Connected successfully, <br>";
?>
Below is the PHP file(include.php);
<?php
include 'db.php';
$rating = $_POST['rating'];
$sql="INSERT INTO user Values('$rating')";
if(mysqli_query($conn,$sql)){
echo "Successfully Inserted";
} else {
echo "Did NOT insert";
}
?>
Below is the Javascript file (functions.js);
// AJAX-ify the slider
$(document).on("pagecreate","#page1",function()
{
$("#submit").click( function() {
$.post( $("#myForm").attr("action"),
$("#myForm :input").serializeArray(),
function(info){ $("#result").html(info);
});
});
$("#myForm").submit( function() {
return false;
});
});
The MySQL table is called 'user' and the column is called 'rating'. The column is set as int(3) [this should match with the slider max value of 100?].
Can anyone pinpoint why the Data isn't being inserted into the DB?
change this
$sql="INSERT INTO user Values('$rating')";
to this
$sql="INSERT INTO user (`rating`) VALUES ('$rating')";
rating would be the column name for that field in the db, if the table has more than one column then the statement need to say in which column it need to be placed.
also to show errors of the statement use this
if(mysqli_query($conn,$sql) or die(msqli_error($conn))){
... your code here > it worked
}else{
... your code here > it failed
}
For the life of me I can't figure out why the following code is not working. I'm quite inexperienced so any assistance appreciated.
I want to get a simple connection working where an ajax call will return a username from a mySQL DB (this is a precursor to a much larger project). My HTML file is the following:
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="jquery/test-theme.min.css"/>
<link href="jquery/jquery.mobile.icons.min.css" rel="stylesheet" />
<link href="jquery/jquery.mobile.structure-1.4.5.min.css" rel="stylesheet" />
<link href="jquery/app.css" rel="stylesheet" />
<script src="jquery/jquery-2.1.4.min.js"></script>
<script src="jquery/jquery.mobile-1.4.5.min.js"></script>
<script> function login(){
$(document).ready(function(){
var user = $("#username")[0].value;
var email = $("#email")[0].value;
$.ajax({
type: "GET",
url: "http://localhost:8888/test/connection.php",
data: "username="+user+"&email="+email,
success: function(result){
if(result){
$("#message")[0].value = "Success" +result;
}
else{
$("#message")[0].value = "Fail :(";
}
},
error: function(result){
$("#message")[0].value = "Ajax error!"+result;
}
});
});
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="c">
<h1>Sign Up!</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<h3>Sign Up</h3>
<label for="txt-first-name">Username</label>
<input type="text" name="txt-first-name" id="username" value="" onkeyup="login()">
<label for="txt-email">Email Address</label>
<input type="text" name="txt-email" id="email" value="" onkeyup="login()">
<input type="text" id="message"></input>
<button id="submit" onclick="login()"> Submit</button>
<div data-role="popup" id="dlg-sign-up-sent" data-dismissible="false" style="max-width:400px;">
</div>
</div><!-- /content -->
</div>
</body>
</html>
And my PHP:
<?php
$user = $_REQUEST['username'];
$email = $_REQUEST['email'];
mysql_connect("localhost:8889","root","root") or die(mysql_error());
mysql_select_db("TEST") or die(mysql_error());
$result = mysql_query("SELECT username, email FROM login WHERE username ='$user'");
while($row = mysql_fetch_array($result)){
if($user = $row["username"]){
echo $row["id"];
}
else{
echo "failed getting user"
}
}
?>
I have a DB called TEST running via MAMP with some entries in the login table for username and email. I just want to get the connection running properly but I'm stumped.
Question: I can see that the data is getting written to the database but $action doesn't become register in the insert.php call from the html file and hence php JSON return is NULL ??
<!DOCTYPE html>
<html>
<head>
<title>Load </title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div data-role="page" id="login" data-theme="b">
<div data-role="header" data-theme="a">
<h3>Login Page</h3>
</div>
<div data-role="content">
<form id="check-user" class="ui-body ui-body-a ui-corner-all" data-ajax="false">
<fieldset>
<div data-role="fieldcontain">
<label for="username">Enter your username:</label>
<input type="text" value="" name="username" id="username"/>
</div>
<div data-role="fieldcontain">
<label for="password">Enter your password:</label>
<input type="password" value="" name="password" id="password"/>
</div>
<input type="button" data-theme="b" name="submit" id="submit" value="Submit">
</fieldset>
Register
</form>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="registerp">
<div data-theme="a" data-role="header">
<h3>Register</h3>
</div>
<div data-role="content">
<form id="registerform" class="ui-body ui-body-a ui-corner-all" data-ajax="false">
<fieldset>
<div data-role="fieldcontain">
<label for="fname">First Name:</label>
<input type="text" value="" name="fname" id="fname"/>
</div>
<div data-role="fieldcontain">
<label for="lname">Last Name:</label>
<input type="text" value="" name="lname" id="lname"/>
</div>
<div data-role="fieldcontain">
<label for="uname">User Name:</label>
<input type="text" value="" name="uname" id="uname"/>
</div>
<div data-role="fieldcontain">
<label for="pwd">Enter your password:</label>
<input type="password" value="" name="pwd" id="pwd"/>
</div>
<div data-role="fieldcontain">
<label for="email">Email:</label>
<input type="text" value="" name="email" id="email"/>
</div>
<input type="button" data-theme="b" name="submit" id="register" value="Register">
</fieldset>
</form>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>Page footer</h3>
</div>
</div>
<div data-role="page" id="second">
<div data-theme="a" data-role="header">
<h3>Welcome Page</h3>
</div>
<div data-role="content">
Welcome
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>Page footer</h3>
</div>
</div>
<script type="text/javascript">
$(document).on('pageinit', '#login', function(){
$(document).on('click', '#submit', function() { // catch the form's submit event
if($('#username').val().length > 0 && $('#password').val().length > 0){
// Send data to server through the ajax call
// action is functionality we want to call and outputJSON is our data
$.ajax({url: 'check.php',
data: "action=login&" + $('#check-user').serialize(),
type: 'post',
async: 'true',
dataType: 'json',
beforeSend: function() {
// This callback function will trigger before data is sent
$.mobile.showPageLoadingMsg(true); // This will show ajax spinner
},
complete: function() {
// This callback function will trigger on data sent/received complete
$.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
},
success: function (result) {
if(result.status) {
$.mobile.changePage("#second");
} else {
alert('Log on unsuccessful!');
}
},
error: function (request,error) {
// This callback function will trigger on unsuccessful action
alert('Network error has occurred please try again!');
}
});
} else {
alert('Please fill all necessary fields');
}
return false; // cancel original event to prevent form submitting
});
});
</script>
<script type="text/javascript">
$(document).on('pageinit', '#registerp', function(){
$(document).on('click', '#register', function() {
if($('#uname').val().length > 0 && $('#pwd').val().length > 0){
// Send data to server through the ajax call
// action is functionality we want to call and outputJSON is our data
$.ajax({url: 'insert.php',
data: "action=register&" + $('#registerform').serialize(),
type: 'post',
async: 'true',
dataType: 'json',
beforeSend: function() {
// This callback function will trigger before data is sent
$.mobile.showPageLoadingMsg(true); // This will show ajax spinner
},
complete: function() {
// This callback function will trigger on data sent/received complete
$.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
},
success: function (result) {
if(result.status) {
$.mobile.changePage("#second");
} else {
alert(' Try again later ! Server is busy !');
}
},
error: function (request,error) {
// This callback function will trigger on unsuccessful action
alert('Network error has occurred please try again!');
}
});
} else {
alert('Please fill all necessary fields');
}
return false; // cancel original event to prevent form submitting
});
});
</script>
</body>
</html>
While my PHP Script is simple as shown below... please help
<?php
$con=mysqli_connect("...............", "...........", ".........","........");
// Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
// escape variables for security
$fname = mysqli_real_escape_string($con, $_POST['fname']);
$lname = mysqli_real_escape_string($con, $_POST['lname']);
$uname = mysqli_real_escape_string($con, $_POST['uname']);
$email = mysqli_real_escape_string($con, $_POST['email']);
$password = mysqli_real_escape_string($con, $_POST['pwd']);
$action = $_POST['action'];
// Decode JSON object into readable PHP object
//$formData = json_decode($_POST['formData']);
$sql="INSERT INTO userdb (username, fname, lname, password, email) VALUES ('$uname', '$fname', '$lname', '$password','$email')";
if (!mysqli_query($con,$sql)) {
die('Error: ' . mysqli_error($con));
}
echo "1 record added";
mysqli_close($con);
if($action == 'register'){
$output = array('status' => true, 'message' => 'Registered');
}
echo json_encode($output);
?>
Insert php script doesnt work while the below register php script works fine.
<?php
// We don't need action for this tutorial, but in a complex code you need a way to determine Ajax action nature
$action = $_POST['action'];
// Decode JSON object into readable PHP object
//$formData = json_decode($_POST['formData']);
// Get username
$username = $_POST['username'];
// Get password
$password = $_POST['password'];
$db = #mysql_connect('..........', '........', '..........') or die("Could not connect database");
#mysql_select_db('users', $db) or die("Could not select database");
$result = mysql_query("SELECT `password` FROM `userdb` WHERE `username`= '$username'");
$r = mysql_fetch_assoc($result);
$pass_ret = $r['password'];
// Lets say everything is in order
if($action == 'login' && $password == $pass_ret){
$output = array('status' => true, 'message' => 'Login');
}
else
{
$output = array('status' => false, 'message' => 'No Login');
}
echo json_encode($output);
?>
You should use Chrome Dev Tools or Firebug in Firefox to inspect the response from the AJAX call. You set the call to expect JSON as the data type and you also use it as JSON. The problem is you have this line:
echo "1 record added";
Which is output before your JSON. So your response probably looks something like:
1 record added{"status": false, "message": "No Login"}
This isn't valid JSON and it will not parse, and thusly this line will never work:
if(result.status) {
I am trying to create a chat box and performing this AJAX post in Codeigniter but for some reason I am getting a server 500 internal server error and no response at all when I use firebug? Can anyone help?
This is my Javascript code
$(document).ready(function(){
$("a#submit").click(function(){
var chat_message_content = $("input#chat").val();
if(chat_message_content == ""){
return false;
}
$.post(base_url + "index.php/abovetheblues/add_chat_messages", {
chat_message_content : chat_message_content,
user_id : user_id
},
function(data){
alert(data);
},"json");
return false;
});
return false;
});
This is my controller
function add_chat_messages() {
// Grab the $chat_message_content, $user_id
$user_id = $this->input->post($this->session->userdata("user_id"));
$chat_message_content = $this->input->post('chat_message_content');
$this->abt_db->add_chat_message($user_id, $chat_message_content);
}
This is my model
function add_chat_message($user_id, $chat_message_content) {
$query_str = "INSERT INTO chat_message(user_id, chat_message_content) VALUES (?,?,?)";
$this->db->query($query_str, array($user_id, $chat_message_content));
}
And my view page
<script type="text/javascript">
var user_id = "<?php echo $this->session->userdata("user_id"); ?>";
</script>
<!--loads the header-->
<?php $this->load->view('abt-header'); ?>
<!--this is the login page-->
<div data-role="page" id="Abt-chat" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Peer Chat</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<div id="chat_viewport"></div>
<p>
<label>Input Chat: </label>
<input name="chat" id="chat" type="text" value=""/>
</p>
<p>
<?php echo anchor('#', 'Send Chat', array('title' => 'Send Chat', 'id' => 'submit')); ?>
</p>
</div>
<?php echo form_close(); ?>
</div>
</div>
You are passing user id as user_id. But while retrieving it in function you are doing mistake. Change it like below.
$user_id = $this->input->post('user_id');
And also -> need to be there before query()
$this->db->query($query_str, array($user_id, $chat_message_content));
I have a mobile website and everything is working fine except for the validation. Basically I'm looking to take values from the user and then process them on a separate page (process.php). However, before doing so I need to check to make sure the fields have been populated. I have looked at several ways to do this but none seem to be working. I have the below code at the moment. When I press the process button it brings me through to the process.php splash screen even though the item field is empty. It doesn't write to the database but I would rather it didn't bring the user to the process.php screen until all mandatory fields have been filled in. Any ideas?
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<script>
$(document).ready(function(){
$("#formL").validate(); });
</script>
<div data-role="content">
<form id="formL" action="/website/process.php" method="post">
<div data-role="fieldcontain">
<label for="item">
<em>* </em> <b>Item:</b> </label>
<input type="text" id="item" name="item" class="required" />
</div>
<div class="ui-body ui-body-b">
<button class="buttonL" type="submit" data-theme="a">Process</button>
</div>
</form>
</div>
For a small form like that, I wouldn't bother using a plugin - is it even compatible with jQuery Mobile? Anyway, to get you started, here's a simple way to prevent submission when there are empty fields:
$("#formL").submit(function() {
// get a collection of all empty fields
var emptyFields = $(":input.required").filter(function() {
// $.trim to prevent whitespace-only values being counted as 'filled'
return !$.trim(this.value).length;
});
// if there are one or more empty fields
if(emptyFields.length) {
// do stuff; return false prevents submission
emptyFields.css("border", "1px solid red");
alert("You must fill all fields!");
return false;
}
});
You can try it/mess with it here.
I have ran across the same problem you have, I have my form validating correctly now.
The following is what I have done with Jquery Mobile -->
<link rel="stylesheet" href="css/jquery.mobile-1.0a4.1.css" />
<link rel="stylesheet" href="css/colors.css">
<link rel="stylesheet" href="css/list.css">
<!--For Icon to bookmark on phones-->
<link rel="apple-touch-icon-precomposed" href=""/>
<script>
var hdrMainvar = null;
var contentMainVar = null;
var ftrMainVar = null;
var contentTransitionVar = null;
var stateLabelVar = null;
var whatLabelVar = null;
var stateVar = null;
var whatVar = null;
var form1var = null;
var confirmationVar = null;
var contentDialogVar = null;
var hdrConfirmationVar = null;
var contentConfirmationVar = null;
var ftrConfirmationVar = null;
var inputMapVar = null;
// Constants
var MISSING = "missing";
var EMPTY = "";
var NO_STATE = "ZZ";
</script>
<div data-role="header" id="hdrMain" name="hdrMain" data-nobackbtn="true">
</div>
<div data-role="content" id="logo" align="center">
<img src="img/sam_mobile.png">
</div>
<div data-role="content" id="contentMain" name="contentMain">
<form id="form1">
<div id="userDiv" data-role="fieldcontain">
<label for="userName">User Name*</label>
<input id="userName" name="userName_r" type="text" />
</div>
<div id="passwordDiv" data-role="fieldcontain">
<label for="password" id="passwordLabel" name="passwordLabel">Password*</label>
<input id="password" name="password_r" type="password" />
</div>
<div id="submitDiv" data-role="fieldcontain">
<input type="submit" value="Login" data-inline="true"/>
</div>
</form>
</div><!-- contentMain -->
<div data-role="footer" id="ftrMain" name="ftrMain"></div>
<div align="CENTER" data-role="content" id="contentDialog" name="contentDialog">
<div>You must fill in both a user name and password to be granted access.</div>
<a id="buttonOK" name="buttonOK" href="#page1" data-role="button" data-inline="true">OK</a>
</div> <!-- contentDialog -->
<!-- contentTransition is displayed after the form is submitted until a response is received back. -->
<div data-role="content" id="contentTransition" name="contentTransition">
<div align="CENTER"><h4>Login information has been sent. Please wait.</h4></div>
<div align="CENTER"><img id="spin" name="spin" src="img/wait.gif"/></div>
</div> <!-- contentTransition -->
<div data-role="footer" id="ftrConfirmation" name="ftrConfirmation"></div>
<script>
$(document).ready(function() {
//Assign global variables from top of page
hdrMainVar = $('#hdrMain');
contentMainVar = $('#contentMain');
ftrMainVar = $('#ftrMain');
contentTransitionVar = $('#contentTransition');
stateLabelVar = $('#stateLabel');
whatLabelVar = $('#whatLabel');
stateVar = $('#state');
whatVar = $('#what');
form1Var = $('#form1');
confirmationVar = $('#confirmation');
contentDialogVar = $('#contentDialog');
hdrConfirmationVar = $('#hdrConfirmation');
contentConfirmationVar = $('#contentConfirmation');
ftrConfirmationVar = $('#ftrConfirmation');
inputMapVar = $('input[name*="_r"]');
hideContentDialog();
hideContentTransition();
hideConfirmation();
});
$('#buttonOK').click(function() {
hideContentDialog();
showMain();
return false;
});
$('#form1').submit(function() {
//Start with false to hide specific div tags
var err = false;
// Hide the Main content
hideMain();
// Reset the previously highlighted form elements
stateLabelVar.removeClass(MISSING);
whatLabelVar.removeClass(MISSING);
inputMapVar.each(function(index){
$(this).prev().removeClass(MISSING);
});
// Perform form validation
inputMapVar.each(function(index){
if($(this).val()==null || $(this).val()==EMPTY){
$(this).prev().addClass(MISSING);
err = true;
}
});
if(stateVar.val()==NO_STATE){
stateLabelVar.addClass(MISSING);
err = true;
}
// If validation fails, show Dialog content
if(err == true){
showContentDialog();
return false;
}
// If validation passes, show Transition content
showContentTransition();
// Submit the form
$.post("requestProcessor.php", form1Var.serialize(), function(data){
//DB Validation goes here when we link to the Db
confirmationVar.text(data);
hideContentTransition();
window.location="access.php";
});
return false;
});
function hideMain(){
hdrMainVar.hide();
contentMainVar.hide();
ftrMainVar.hide();
}
function showMain(){
hdrMainVar.show();
contentMainVar.show();
ftrMainVar.show();
}
function hideContentTransition(){
contentTransitionVar.hide();
}
function showContentTransition(){
contentTransitionVar.show();
}
function hideContentDialog(){
contentDialogVar.hide();
}
function showContentDialog(){
contentDialogVar.show();
}
function hideConfirmation(){
hdrConfirmationVar.hide();
contentConfirmationVar.hide();
ftrConfirmationVar.hide();
}
function showConfirmation(){
hdrConfirmationVar.show();
contentConfirmationVar.show();
ftrConfirmationVar.show();
}
</script>
This will not allow the form to be submitted if there is empty fields. Feel free to take this code and manipulate and play with it as much as you like. As you can see I used a .php file, just like you, to handle the validation of the user.