Bind a PHP form button to a javascript method - php

Hi guy I'm new to php and I have a php form as shown below, it used to work before I applied bootstrap to it.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Login Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" href="css/login.css" rel="stylesheet" />
<link type="text/css" href="css/bootstrap/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<!-- Main Container -->
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-md-offset-4">
<h1 class="text-center login-title">Sign in to HRMS</h1>
<div class="account-wall">
<img class="profile-img" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120"
alt="">
<form class="form-signin" method="post" action="">
<input type="text" id="txtEmpID" class="form-control" placeholder="Employee ID" required autofocus>
<input type="password" id="txtEmpPass" class="form-control" placeholder="Password" required>
<button id="btnLogin" class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var login_url = "<?php echo Util::convertLink("Login") ; ?>" ;
<?php include (PATH_CODE . "js/general/login.min.js") ; ?>
</script>
</body>
</html>
with the button Login bind to a method in login.js
$(document).ready(function()
{
$('#btnLogin').button().bind('click',this,onLogin) ;
}) ;
function onLogin(obj) {
alert( $('#txtEmpID').val());
}
it there something i'm missing?


$(document).ready(function()
{
$('#btnLogin').bind({
click: function() {
onLogin(this);
}
});
});
function onLogin(obj) {
alert( $('#txtEmpID').val());
}
DEMO

Related

How to use span tags in php error statements

The echo statement is not printing when the answer does not equal to 8.So if the answer is other than 8 it should print in red "Please try again " underneath the textbox.All it shows is nothing when I click the register button.
<?php
session_start();
$nameErr = "";
$answer = $_POST['lastname'];
if ($_POST['reg']){
if ($answer != '8') {
echo "<span style='color:red'>Please enter Correct Answer</span>";
}
}
?>
<!Doctype html>
<head>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"
type="text/css">
<link href="bootstrap/css/styles.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="Register.css">
<script src='https://www.google.com/recaptcha/api.js'></script>
<title> Register</title>
</head>
<html>
<body>
<form method="post" action="">
What is 5 + 3 =<br>
<input type="text" name="lastname">
<div class="row">
<div class="form-group col-xs-5 col-xs-offset-3.5">
<input class="btn btn-primary btn-lg btn-block" value="Register"
type="submit" name="reg">

You need to put the echo in the <body> of the document. Also, <html> needs to be at the top.
<?php
session_start();
$nameErr = "";
?>
<!Doctype html>
<html>
<head>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"
type="text/css">
<link href="bootstrap/css/styles.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="Register.css">
<script src='https://www.google.com/recaptcha/api.js'></script>
<title> Register</title>
</head>
<body>
<form method="post" action="">
What is 5 + 3 =<br>
<input type="text" name="lastname">
<?php
if (isset($_POST['reg'])){
$answer = $_POST['lastname'];
if ($answer != '8') {
echo "<span style='color:red'>Please enter Correct Answer</span>";
}
}
?>
<div class="row">
<div class="form-group col-xs-5 col-xs-offset-3.5">
<input class="btn btn-primary btn-lg btn-block" value="Register" type="submit" name="reg">
</div>
</div>
</form>
</body>
</html>

You print the error span above the actual HTML code. Just move the if statement down. Like that:
...
<div class="row">
<?php
if ($answer != '8') {
echo "<span style='color:red'>Please enter Correct Answer</span>";
}
?>
</div>
<div class="form-group col-xs-5 col-xs-offset-3.5">
...

Login form not validating successfully

I want login/ to be successful
This is my connect File for starting session
<?php
$connect_error='Error...'
session_start();
$con=mysql_connect('localhost','root','')or die(connect_error);
mysql_select_db('lothlorien',$con) or die(connect_error);
$errors=array();
require 'Functions/users.php';
require 'Login/L1.php';
require 'Functions/General.php';
This is My Login Widget File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lothlorien</title>
<!-- CSS -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/form-elements.css">
<link rel="stylesheet" href="assets/css/style.css">
<style>
.row{
margin:auto;
width:700px;
}
</style>
</head>
<body>
<?php
include 'Core/Database/connect.php';
?>
<div class="top-content">
<div class="inner-bg">
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2 text">
<h1>Lothlorien Login Form</h1>
</div>
</div>
</div>
<div class="content">
<div class="row">
<div class="form-box">
<div class="form-top">
<div class="form-top-left">
<h3>Login to our site</h3>
<p>Enter username and password to log in:</p>
</div>
<div class="form-top-right">
<i class="fa fa-lock"></i>
</div>
</div>
<div class="form-bottom">
<form role="form" action="" method="post" class="login-form">
<div class="form-group">
<label class="sr-only" for="form-username">Username</label>
<input type="text" name="form-username" placeholder="Username..." class="form-username form-control" id="form-username">
</div>
<div class="form-group">
<label class="sr-only" for="form-password">Password</label>
<input type="password" name="form-password" placeholder="Password..." class="form-password form-control" id="form-password">
</div>
<button type="submit" class="btn">Sign in!</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="assets/js/jquery-1.11.1.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.backstretch.min.js"></script>
<script src="assets/js/scripts.js"></script>
<!--[if lt IE 10]>
<script src="assets/js/placeholder.js"></script>
<![endif]-->
</body>
</html>
?>
this is my Login for login validation
<?php
include 'Core/Database/connect.php';
include 'Core/Functions/Users.php';
if(empty($_POST)===false)
{
$form_username = $_POST['form-username'];
$form_password = $_POST['form-password'];
}
if(user_exists($form_username)===false)
{
$errors[]="Register before Logging in";
}
else if(user_active($form_username)===false)
{
$errors[]="Not activated Your account";
}
This is where i want the validation to happen
else
{
$login=login($form_username,$form_password);
if($login=== false)
{
$errors[]="Wrong Username and password combination";
}
This is where the redirection takes place
else
{
$_SESSION['user_id']=$login;
header('Location:index.php');
exit();
}
}
print_r($errors);
?>
And finally these are my functions...
<?php
function user_exists($form_username)
{
$form_username=sanitize($form_username);
$query=mysql_query("SELECT COUNT('User_id') FROM 'user' WHERE 'Username'='$form_username'");
return (mysql_result($query,0) == 1) ? true :false;
}
function user_active($form_username)
{
$form_username=sanitize($form_username);
$query=mysql_query("SELECT COUNT('User_id') FROM 'user' WHERE 'Username'='$form_username' AND 'active'= 1");
return (mysql_result($query,0) == 1) ? true :false;
}
function user_id_from_username($username)
{
$form_username=sanitize($username);
$query=mysql_query("SELECT 'user_id' FROM 'user' WHERE 'Username'='$form_username' ");
return (mysql_result($query,0,'user_id'));
}
function login($form_username,$form_password)
{
$user_id=user_id_from_username($form_username);
$form_password=md5($form_password);
$query=mysql_query("SELECT COUNT('User_id') FROM 'user' WHERE 'Username'='$form_username' AND 'Password'= '$form_password'");
return (mysql_result($query)==1)? $user_id:false;
}
?>
I don't know the root of my problem so I kinda posted all up
Problems I encounter
1)No error messages showing up..
2)want to redirect to index.php after successful login
3)Successful Message should be displayed once login is done
Database entries are correct.

PHP Login code wont run?

I cannot get the PHP code to run within the HTML code. It simply will not work and I can't figure it out. I removed the <head></head> part of the html and the PHP login script works again. How do I fix this?
Here is my PHP:
<?php
include("db.php");
session_start();
if($_SERVER["REQUEST_METHOD"] == "POST") {
// username and password sent from Form
$username = mysqli_real_escape_string($db,$_POST['username']);
$password = mysqli_real_escape_string($db,$_POST['password']);
$password = md5($password); // Encrypted Password
$sql = "SELECT id FROM Users WHERE username='$username' and passcode='$password'";
$result = mysqli_query($db,$sql);
$count = mysqli_num_rows($result);
// If result matched $username and $password, table row must be 1 row
if($count==1) {
header("location: greatjob.php");
}
else {
$error = "Your Login Name or Password is invalid";
}
}
?>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="test Portal | Login" />
<meta name="author" content="test" />
<title>test Portal | Login</title>
<link rel="stylesheet" href="logintemplate/js/jquery-ui/css/no-theme/jquery-ui-1.10.3.custom.min.css">
<link rel="stylesheet" href="logintemplate/css/font-icons/entypo/css/entypo.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic">
<link rel="stylesheet" href="logintemplate/css/bootstrap.css">
<link rel="stylesheet" href="logintemplate/css/neon-core.css">
<link rel="stylesheet" href="logintemplate/css/neon-theme.css">
<link rel="stylesheet" href="logintemplate/css/neon-forms.css">
<link rel="stylesheet" href="logintemplate/css/custom.css">
<script src="logintemplate/js/jquery-1.11.0.min.js"></script>
<script>$.noConflict();</script>
<!--[if lt IE 9]><script src="logintemplate/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="page-body login-page login-form-fall" data-url="http://test.dev">
<!-- This is needed when you send requests via Ajax -->
<script type="text/javascript">
var baseurl = '';
</script>
<div class="login-container">
<div class="login-header login-caret">
<div class="login-content">
<a href="index.html" class="logo">
<img src="logintemplate/images/logo#2x.png" width="120" alt="" />
</a>
<p class="description">Dear user, log in to access the admin area!</p>
<!-- progress bar indicator -->
<div class="login-progressbar-indicator">
<h3>43%</h3>
<span>logging in...</span>
</div>
</div>
</div>
<div class="login-progressbar">
<div></div>
</div>
<div class="login-form">
<div class="login-content">
<div class="form-login-error">
<h3>Invalid login</h3>
<p><?PHP echo $error; ?></p>
</div>
<form method="post" action="login.php" role="form" id="form_login">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<i class="entypo-user"></i>
</div>
<input type="text" class="form-control" name="username" id="username" placeholder="Username" autocomplete="off" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<i class="entypo-key"></i>
</div>
<input type="password" class="form-control" name="password" id="password" placeholder="Password" autocomplete="off" />
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block btn-login">
<i class="entypo-login"></i>
Login In
</button>
</div>
</form>
<div class="login-bottom-links">
Forgot your password?
<br />
ToS - Privacy Policy
</div>
</div>
</div>
</div>
<!-- Bottom scripts (common) -->
<script src="logintemplate/js/gsap/main-gsap.js"></script>
<script src="logintemplate/js/jquery-ui/js/jquery-ui-1.10.3.minimal.min.js"></script>
<script src="logintemplate/js/bootstrap.js"></script>
<script src="logintemplate/js/joinable.js"></script>
<script src="logintemplate/js/resizeable.js"></script>
<script src="logintemplate/js/neon-api.js"></script>
<script src="logintemplate/js/jquery.validate.min.js"></script>
<script src="logintemplate/js/neon-login.js"></script>
<!-- JavaScripts initializations and stuff -->
<script src="logintemplate/js/neon-custom.js"></script>
<!-- Demo Settings -->
<script src="logintemplate/js/neon-demo.js"></script>
</body>
</html>

Based on your provided link, your site is using AJAX for login so the jQuery is preventing the form from submitting normally. To make it work do one of these:
Change where your ajax is pointing
Make your changes to the page that the AJAX is currently pointing to
Give the login form a different id like <form id="formlogin"> and the ajax will ignore it and reload your page the way you want it to.

PHP - Form Elements Resetting

I have made a simple form with a checkbox that echos out true or false depending on if the checkbox is set or not, however every time i click submit once the checkbox control has been ticked it seems to reset.
How can i modify my code to store the value of any form controls so if i tick the box it remains ticked after i have clicked submit?
<?php
// Setup Variables
$Result = '';
if (isset($_POST["submit"])) {
//Use Captials?
if(isset($_POST['formCheckbox']) && $_POST['formCheckbox'] == 'Yes') {
$Result = "true";
} else {
$Result = "false";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Contact Form</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1 class="page-header text-center">Contact Form Example</h1>
<form class="form-horizontal" role="form" method="post" action="index.php">
Checkbox
<input type="checkbox" name="formCheckbox" value="Yes"/>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
</div>
</div>
</form>
<div class="col-sm-10 col-sm-offset-2">
<?php echo $Result; ?>
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Add the checked property &
Change the way the check box is displayed:
<?php
// Setup Variables
$Result = '';
if (isset($_POST["submit"])) {
//Use Captials?
if(isset($_POST['formCheckbox']) && $_POST['formCheckbox'] == 'Yes') {
$Result = "true";
} else {
$Result = "false";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Contact Form</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1 class="page-header text-center">Contact Form Example</h1>
<form class="form-horizontal" role="form" method="post" action="index.php">
Checkbox
<?php
if(isset($_POST['formCheckbox']) && $_POST['formCheckbox'] == 'Yes') {
echo '<input type="checkbox" name="formCheckbox" value="Yes" checked/>';
}
else
echo '<input type="checkbox" name="formCheckbox" value="Yes"/>';
?>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
</div>
</div>
</form>
<div class="col-sm-10 col-sm-offset-2">
<?php echo $Result; ?>
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Form submit (POST) to php page gives blank page unless I refresh

I have a simple login page with 2 textfields and a button. When I press "Submit", the URL changes to the php page but I see absolutely nothing at all. I have no idea how to fix it so I'm hoping somebody can help me.
My HTML page:
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="style2.css" />
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" href="themes/customtheme.css" />
<script type="text/javascript" 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>
</head>
<body>
<div data-role="page">
<div data-role="header">
<a class="ui-btn-left" href="index.html" data-icon="back">Back</a>
<h1><span>Login</span></h1>
<a class="ui-btn-right" href="#" data-icon="info">i & €</a>
</div>
<div data-role="content" data-position="relative">
<div class="loginform">
<form id="loginForm" action="login.php" method="POST">
<span>Email adress:</span>
<input type="text" name="email" id="email"></input>
<span>Password:</span>
<input type="password" name="password" id="password"></input>
<input type="submit" value="Login" />
</form>
</div>
</div>
<div data-role="footer" data-position="fixed"></div>
</div>
</body>
</html>
And my login.php:
<?php session_start();
error_reporting(E_ALL);
ini_set('display_errors',TRUE);
ini_set('display_startup_errors',TRUE);
echo ("Test");
?>
I don't even see 'Test' nor any error...

Its actually not a php problem. Assume you are using JQuery mobile. Disabling data-ajax may help.
<script type="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
Use this code on your html page.

Categories