I have created two separate files for login screen. one is loginpage.php where html code is there and another one is login.php which contains backend code. Both the codes were running fine and were giving proper output. But now it is not working, whenever I try to load the page it is showing this error-
This page isn’t working localhost redirected you too many times.
Try clearing your cookies. ERR_TOO_MANY_REDIRECTS.
I have almost tried doing everything like clearing cookies and cached files,
changing proxy server settings, running cmd commands.
re-installed xampp.
But still it is showing the same thing, and I am unable to find the problem in my code.
at first i was displaying all the errors using alert message. but that also i have changed and storing it in an array and display in the form. please help
LOGINPAGE.PHP
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Task Manager | Log in</title>
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
<!-- icheck bootstrap -->
<link rel="stylesheet" href="../plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../dist/css/adminlte.min.css">
</head>
<body class="hold-transition login-page">
<div class="login-box">
<div class="login-logo">
<p><b>Task Manager</b></p>
</div>
<div id="box">
<!-- /.login-logo -->
<div class="card">
<div class="card-body login-card-body">
<p class="login-box-msg">Sign in to start your session</p>
<form action="login.php" method="post" id="login-form">
<div class="input-group mb-3">
<input type="email" class="form-control" placeholder="EmailID" id="email" name="email" required>
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-user-alt"></span>
</div>
</div>
</div>
<div class="input-group mb-3">
<input type="password" class="form-control" placeholder="Password" id="password" name="password" required>
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-lock"></span>
</div>
</div>
</div>
<div class="form-group">
<select class="form-control select2bs4" name="role" id="role">
<option selected="selected">-select role-</option>
<option>ADMIN</option>
<option>EMPLOYEE</option>
</select>
</div>
<div class="row">
<div class="col-8">
<div class="icheck-primary">
<input type="checkbox" id="remember">
<label for="remember">
Remember Me
</label>
</div>
</div>
<!-- /.col -->
<div class="col-4">
<button type="submit" class="btn btn-success btn-block" id="btn_submit" name="btn_submit" >Sign In</button>
</div>
<!-- /.col -->
</div>
</form>
<p class="mb-1">
<br/>
I forgot my password
</p>
</div>
<div id="error">
<?php
include 'login.php';
if(empty($errormsg))
{
foreach($errormsg as $value)
{
echo "$value";
}
}
?>
</div>
<!-- /.login-card-body -->
</div>
</div>
</div>`
<!-- /.login-box -->
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<!-- Bootstrap 4 -->
<script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="../dist/js/adminlte.min.js"></script>
</body>
</html>
This is the backend code for login screen
LOGIN.PHP
<?php
include('db_connection.php');
session_start();
if (!(isset($_SESSION['admin_login']) && $_SESSION['admin_login'] != '')) {
header("location:loginpage.php");
}
if(isset($_SESSION["employee_login"])){
header("location:employee_dash.php");
}
if(isset($_POST['btn_submit']))
{
$email=$_POST['email'];
$password=md5($_POST['password']);
$role=strtolower($_POST['role']);
if(empty($email)){
$errormsg[]="Please enter email";
} else if(empty($password)){
$errormsg[]="Please enter password";
} else if(empty($role)){
$errormsg[]="Please select a role";
} else if($email && $password && $role) {
try {
$query="SELECT email,password,role FROM `employee` WHERE email=? && password=? && role=?";
$stmt = mysqli_prepare($conn,$query);
mysqli_stmt_bind_param($stmt,'sss',$email,$password,$role);
mysqli_stmt_bind_result($stmt,$email,$password,$role);
mysqli_stmt_execute($stmt);
$result=mysqli_stmt_get_result($stmt);
while($row = mysqli_fetch_assoc($result)) {
$dbemail=$row['email'];
$dbpassword=$row['password'];
$dbrole=$row['role'];
}
if(mysqli_num_rows($result)>0) {
if($email==$dbemail && $password==$dbpassword && $role==$dbrole) {
switch($dbrole) {
case "admin":
$_SESSION["admin_login"]=$email;
header("refresh:1;dashboard.php");
break;
case "employee":
$_SESSION["employee_login"]=$email;
header("refresh:1;employee_dash.php");
break;
default:
$errormsg[]="Invalid Role";
}
} else {
$errormsg[]="Wrong Email or Password or Role";
}
} else {
$errormsg[]="Records Not Found";
}
} catch(Exception $e) {
echo $e->errorMessage();
mysqli_stmt_close($stmt);
}
} else {
$errormsg[]="Enter the crendentials";
}
}
?>
You are redirecting to loginpage.php from the same page without destroying your session first, then it will keep redirecting from loginpage to loginpage as infinite loop.
try to check if session is populated and destroy it,
instead of:
if (!(isset($_SESSION['admin_login']) && $_SESSION['admin_login'] != ''))
{
header("location:loginpage.php");
}
You destroy any session already exit like:
if (!(isset($_SESSION['admin_login']) && $_SESSION['admin_login'] != ''))
{
session_destroy();
}
Related
This question already has answers here:
When to use single quotes, double quotes, and backticks in MySQL
(13 answers)
What to do with mysqli problems? Errors like mysqli_fetch_array(): Argument #1 must be of type mysqli_result and such
(1 answer)
How do I get PHP errors to display?
(27 answers)
Closed 1 year ago.
below in the image i am getting only the 3 form elements but there are more .I am unable to find the error where it is occuring .please help me to get the solution.
It is a basic html form there are like 10 form elements but when i connected it with the database and ran the code only the first 3 form elements are getting displayed.
It is basically connected to mysql data base in the backend and is a blog websites admin panel.
<?php
require "<includes/dbh.php";
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Free Bootstrap Admin Template : Dream</title>
<!-- Bootstrap Styles-->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- FontAwesome Styles-->
<link href="assets/css/font-awesome.css" rel="stylesheet" />
<!-- Custom Styles-->
<link href="assets/css/custom-styles.css" rel="stylesheet" />
<!-- Google Fonts-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
</head>
<body>
<div id="wrapper">
<?php include "header.php"; include "sidebar.php" ?>
<div id="page-wrapper" >
<div id="page-inner">
<div class="row">
<div class="col-md-12">
<h1 class="page-header">
Write a Blog on spot
</h1>
</div>
</div>
<!-- /. ROW -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Write a blog
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<form role="form" method="POST" action="includes/add-blog.php" enctype="multipart/form-data">
<div class="form-group">
<label>Title</label>
<input class="form-control" name="blog-title">
</div>
<div class="form-group">
<label>Meta Title</label>
<input class="form-control" name="blog-meta-title">
</div>
<div class="form-group">
<label>Blog category</label>
<select class="form-control" name="blog-category">
<?php
$sqlCategories="SELECT * FROM blog-category";
$queryCategories=mysqli_query($conn,$sqlCategories);
while($rowCategories=mysqli_fetch_assoc($queryCategories)){
$cId=$rowCategories['n_category_id'];
$cName=$rowCategories['v_category_title'];
echo "<option value='".$cId."'>".$cName."</option>";
}
?>
</select>
</div>
<div class="form-group">
<label>Main image</label>
<input type="file" name="main-blog-image">
</div>
<div class="form-group">
<label>Alternate image</label>
<input type="file"name="alt-blog-image">
</div>
<div class="form-group">
<label>summary</label>
<textarea class="form-control" rows="3"name="blog-summary"></textarea>
</div>
<div class="form-group">
<label>Blog content</label>
<textarea class="form-control" rows="3" name="blog-content"></textarea>
</div>
<div class="form-group">
<label>Blog Tags seperated by commas</label>
<textarea class="form-control" rows="3" name="blog-tags"></textarea>
</div>
<div class="form-group input-group">
<label>Blog path</label>
<div class="input-group"> <span class="input-group-addon">www.sjg.com/</span>
<input type="text" class="form-control" placeholder="username" name="blog-path"></div>
</div>
<div class="form-group">
<label>Home Page Placement</label>
<label class="radio-inline">
<input type="radio" name="blog-home-page-placement" id="optionsRadiosInline1" value="option1" checked="">1
</label>
<label class="radio-inline">
<input type="radio" name="blog-home-page-placement" id="optionsRadiosInline2" value="option2">2
</label>
<label class="radio-inline">
<input type="radio" name="blog-home-page-placement" id="optionsRadiosInline3" value="option3">3
</label>
</div>
<button type="submit" class="btn btn-default" name="submit-blog">Add Blog</button>
</form>
</div>
</div>
<!-- /.row (nested) -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<?php include "footer.php"; ?>
</div>
<!-- /. PAGE INNER -->
</div>
<!-- /. PAGE WRAPPER -->
</div>
<!-- /. WRAPPER -->
<!-- JS Scripts-->
<!-- jQuery Js -->
<script src="assets/js/jquery-1.10.2.js"></script>
<!-- Bootstrap Js -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Metis Menu Js -->
<script src="assets/js/jquery.metisMenu.js"></script>
<!-- Custom Js -->
<script src="assets/js/custom-scripts.js"></script>
</body>
</html>
Above in the image i am getting only the 3 form elements but there are more .I am unable to find the error where it is occuring .please help me to get the solution.
It is a basic html form there are like 10 form elements but when i connected it with the database and ran the code only the first 3 form elements are getting displayed.
It is basically connected to mysql data base in the backend and is a blog websites admin panel.
Judging by where the page stops rendering, there's likely an error where your category dropdown is being populated. To check this you could add <?php error_reporting(E_ALL); ?> to the top of your file. Check the error_reporting docs here.
I'd also like to second #CBroe's observation that require "<includes/dbh.php"; doesn't look correct. Properly including that file may allow the category generation to occur and allow for the rest of the document to populate.
I'd also like to add that echo "<option value='".$cId."'>".$cName."</option>"; could be written as echo "<option value='{$cId}'>{$cName}</option>"; to help with human readability, if you so desired.
Here when multiplying -1 to any variable it turns to negative. It uses for when the balance is withdrawn balance decreases but I set if the condition for validation for this reason -1 does not work. how I validate properly and balance also decreases when
<!doctype html>
<html lang="en">
<head>
<title>Bank || Project</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- css link -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="login-area" class="login-area">
<h1 class="bank-title">Welcome To Pioneer Bank</h1>
<div class="submit-area">
<h4>Login</h4>
<input type="text" class="form-control" placeholder="Email...">
<br>
<input type="password" class="form-control" placeholder="Password...">
<br>
<button type="submit" id="login-btn" class="btn btn-success">Submit</button>
</div>
</div>
<div id="transaction-area">
<div class="row">
<div class="col-md-4">
<div class=" deposit status">
<h5>Deposit</h5>
<h2>$ <span id="current-deposit">00</span></h2>
</div>
</div>
<div class="col-md-4 my-2 my-md-0">
<div class=" withdraw status">
<h5>Withdraw</h5>
<h2>$ <span id="current-withdraw">00</span></h2>
</div>
</div>
<div class="col-md-4">
<div class=" balance status">
<h5>Balance</h5>
<h2>$ <span id="current-balance">1240</span></h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="submit-area">
<h4>Deposit</h4>
<input type="text" id="deposit-amount" class="form-control" placeholder="$ amount you want to deposit">
<br>
<button id="deposit-btn" class="btn btn-success">Deposit</button>
</div>
</div>
<div class="col-md-6">
<div class="submit-area">
<h4>Withdraw</h4>
<input type="text" id="withdraw-amount" class="form-control" placeholder="$ amount you want to withdraw">
<br>
<button id="withdraw-btn" class="btn btn-success">Withdraw</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
Here when multiplying -1 to any variable it turns to negative. It uses for when the balance is
withdrawn balance decreases but I set if the condition for validation for this reason -1 does not
ork. how I validate properly and balance also decreases when
// LOGIN BUTTON EVENT HANDLER
const loginBtn = document.getElementById('login-btn');
loginBtn.addEventListener('click', function () {
const loginArea = document.getElementById('login-area');
loginArea.style.display = 'none';
const transactionArea = document.getElementById('transaction-area');
transactionArea.style.display = 'block';
})
//deposit handler
const depositBtn = document.getElementById('deposit-btn');
depositBtn.addEventListener('click', function() {
const depositNumber = getInputNumber("deposit-amount");
updateSpanText("current-deposit", depositNumber)
updateSpanText("current-balance", depositNumber);
})
// withdraw button handler
const withdrawBtn = document.getElementById("withdraw-btn");
withdrawBtn.addEventListener("click", function() {
const withdrawNumber = getInputNumber("withdraw-amount");
updateSpanText("current-withdraw", withdrawNumber);
updateSpanText("current-balance", withdrawNumber;
})
function getInputNumber(id) {
const amount = document.getElementById(id).value;
const amountNumber = parseFloat(amount);
document.getElementById(id).value = "";
return amountNumber;
}
Here when multiplying -1 to any variable it turns to negative. It uses for when the balance
is withdrawn balance decreases but I set if the condition for validation for this reason -1 does
not work. how I validate properly and balance also decreases when
function updateSpanText(id, depositNumber) {
if (depositNumber >= 0 && depositNumber !== '') { //here I set if condtition
var currentBalance = document.getElementById(id).innerText;
const currentBalanceNumber = parseFloat(currentBalance);
const totalBalance = depositNumber + currentBalanceNumber;
document.getElementById(id).innerText = totalBalance;
} else {
console.log(alert('Invalid input value'));
}
</script>
withdraw.
Here is what you want:
// LOGIN BUTTON EVENT HANDLER
const loginBtn = document.getElementById('login-btn');
loginBtn.addEventListener('click', function () {
const loginArea = document.getElementById('login-area');
loginArea.style.display = 'none';
const transactionArea = document.getElementById('transaction-area');
transactionArea.style.display = 'block';
})
//deposit handler
const depositBtn = document.getElementById('deposit-btn');
depositBtn.addEventListener('click', function () {
const depositNumber = getInputNumber("deposit-amount");
updateSpanText("current-deposit", depositNumber)
updateSpanText("current-balance", depositNumber);
})
// withdraw button handler
const withdrawBtn = document.getElementById("withdraw-btn");
withdrawBtn.addEventListener("click", function () {
const withdrawNumber = getInputNumber("withdraw-amount");
updateSpanText("current-withdraw", withdrawNumber);
updateSpanText("current-balance", withdrawNumber, true);
})
function getInputNumber(id) {
const amount = document.getElementById(id).value;
const amountNumber = parseFloat(amount);
document.getElementById(id).value = "";
return amountNumber;
}
function updateSpanText(id, depositNumber, isWithdraw = false) {
if (depositNumber >= 0 && depositNumber !== '') { //here I set if condtition
var currentBalance = document.getElementById(id).innerText;
const currentBalanceNumber = parseFloat(currentBalance);
const totalBalance = currentBalanceNumber + (isWithdraw ? -depositNumber : depositNumber);
document.getElementById(id).innerText = totalBalance;
} else {
console.log(alert('Invalid input value'));
}
}
<!doctype html>
<html lang="en">
<head>
<title>Bank || Project</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- css link -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="login-area" class="login-area">
<h1 class="bank-title">Welcome To Pioneer Bank</h1>
<div class="submit-area">
<h4>Login</h4>
<input type="text" class="form-control" placeholder="Email...">
<br>
<input type="password" class="form-control" placeholder="Password...">
<br>
<button type="submit" id="login-btn" class="btn btn-success">Submit</button>
</div>
</div>
<div id="transaction-area">
<div class="row">
<div class="col-md-4">
<div class=" deposit status">
<h5>Deposit</h5>
<h2>$ <span id="current-deposit">00</span></h2>
</div>
</div>
<div class="col-md-4 my-2 my-md-0">
<div class=" withdraw status">
<h5>Withdraw</h5>
<h2>$ <span id="current-withdraw">00</span></h2>
</div>
</div>
<div class="col-md-4">
<div class=" balance status">
<h5>Balance</h5>
<h2>$ <span id="current-balance">1240</span></h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="submit-area">
<h4>Deposit</h4>
<input type="text" id="deposit-amount" class="form-control"
placeholder="$ amount you want to deposit">
<br>
<button id="deposit-btn" class="btn btn-success">Deposit</button>
</div>
</div>
<div class="col-md-6">
<div class="submit-area">
<h4>Withdraw</h4>
<input type="text" id="withdraw-amount" class="form-control"
placeholder="$ amount you want to withdraw">
<br>
<button id="withdraw-btn" class="btn btn-success">Withdraw</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
Ok so I'm stuck here. I've been trying to put up a web form so that I can be notified of users who sign up for my mobile app via e-mail. I want to override ajax's default behavior because EVENTUALLY(as in not at the moment) I want the submission not to be handled for the first few pages.
My goal is to have the user submit the jQuery Mobile form, have ajax send the form data to my php script which will e-mail the user data to me using the SendGrid api. But right now it's not working for me.
The page is hosted on a google compute engine instance running Linux, PHP is correctly installed, the form appears and even refreshes when the SEND button is clicked but no e-mail ='(
BTW SendGrid works fine from my server when launched from the command line using Postfix
The link to the tutorial is here: Sending E-mails with SendGrid using Compute Instance
Help please?
mailer.php followed by postScript.js followed by web-form-complete.php
<?php
$action = $_POST['subscribePage'];
$formData = json_decode($_POST['formData']);
$fname = $formData->{'fname'};
$lname = $formData->{'lname'};
$busname = $formData->{'busname'};
$bustype = $formData->{'bustype'};
$selectmenu = $formData->{'selectmenu'};
$sendgrid = new SendGrid("[-----API-KEY-----]");
$email = new SendGrid\Email();
{ $body = "{$fname} {$lname} \n{$busname} \n{$bustype} \n{$selectmenu}"; }
$email->addTo("admin#my-privatedomain.com")
->setFrom("admin#my-privatedomain.com") // for testing purposes
->setSubject("Verification Request")
->setHtml($body);
$sendgrid->send($email);
?>
$(document).on('pageinit', '#subscribePage', function(){
$(document).on('click', '#submit', function() { // catch the form's submit event
if($('#fname').val().length > 0 && $('#lname').val().length && $('#busname').val().length > 0){
$.ajax({url: 'mailer.php',
data: {action : 'subscribePage', formData : $('#subscribeContent').serialize()},
type: 'post',
async: 'true',
dataType: 'JSON',
beforeSend: function() {
},
complete: function() {
},
success: function (result) {
} else {
alert('Submission Unsuccessful!');
}
},
error: function (request,error) {
alert('Network error has occurred');
}
});
} else {
alert('Please fill all necessary fields');
}
return false;
});
});
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Verification</title>
<link href="style.css" rel="stylesheet" type="text/css">
<!--For JQuery mobile UI widgets -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page" id="subscribePage">
<div data-role="header">
<h1>Verification</h1>
</div><!-- /header -->
<!-- Start Here: Web Form tutorial -->
<div role="main" class="ui-content" id="subscribeBox">
<h2><span class="thin">Create A Verified</span> XXXX <span class="thin">Account</span></h2>
<p>Please fill out the following information to receive our verification. Verification should take less than 24 hours.</p>
<form id="subscribeContent" class="subscribeForm" data-ajax="false" >
<!-- name fields here -->
<div data-role="fieldcontain">
<input id="fname" type="text" placeholder="First Name*" Name="First Name" required><br>
</div>
<div data-role="fieldcontain">
<input id="lname" type="text" placeholder="Last Name*" name="Last Name" required><br>
</div>
<div data-role="fieldcontain">
<input id="busname" type="text" placeholder="Business/Organization Name*" name="Business/Organization Name" required><br>
<div data-role="fieldcontain">
<!-- Other form fields here.... -->
<!-- radio buttons here -->
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Option</legend>
<input type="radio" class="bustype" name="bustype" id="radio1" value="Local Business/Organization" />
<label for="local">Local Business/Organization</label>
<input type="radio" class="bustype" name="bustype" id="radio2" value="Worldwide Brand" />
<label for="worldwide">Worldwide Brand</label>
</fieldset>
</div>
<!-- dynamic fields here -->
<div data-role="fieldcontain">
<label for="selectmenu" class="select">Options:</label>
<select name="selectmenu" id="selectmenu">
<option value="bank">Bank</option>
<option value="car_dealer">Car Dealer</option>
<option value="car_rental">Car Rental</option>
<option value="car_repair">Car Repair</option>
<!-- Other SelectMenu options here -->
</select>
</div>
<!-- submit button here -->
<input id="submit" type="submit" value="Send">
</form>
<div data-role="footer">
<h4>XXXX App</h4>
</div> <!-- /main -->
</div> <!-- /header -->
</div> <!-- /page -->
<script src="postScript.js"></script>
</body>
</html>
There are issues in your all scripts. Try this:
web-form-complete.php
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Verification</title>
<link href="style.css" rel="stylesheet" type="text/css">
<!--For JQuery mobile UI widgets -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page" id="subscribePage">
<div data-role="header">
<h1>Verification</h1>
</div><!-- /header -->
<!-- Start Here: Web Form tutorial -->
<div role="main" class="ui-content" id="subscribeBox">
<h2><span class="thin">Create A Verified</span> XXXX <span class="thin">Account</span></h2>
<p>Please fill out the following information to receive our verification. Verification should take less than 24 hours.</p>
<form id="subscribeContent" class="subscribeForm" data-ajax="false" >
<!-- name fields here -->
<div data-role="fieldcontain">
<input id="fname" type="text" placeholder="First Name*" Name="fname" required><br>
</div>
<div data-role="fieldcontain">
<input id="lname" type="text" placeholder="Last Name*" name="lname" required><br>
</div>
<div data-role="fieldcontain">
<input id="busname" name="busname" placeholder="Business/Organization Name*" required><br>
<div data-role="fieldcontain">
<!-- Other form fields here.... -->
<!-- radio buttons here -->
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Option</legend>
<input type="radio" class="bustype" name="bustype" id="radio1" value="Local Business/Organization" />
<label for="local">Local Business/Organization</label>
<input type="radio" class="bustype" name="bustype" id="radio2" value="Worldwide Brand" />
<label for="worldwide">Worldwide Brand</label>
</fieldset>
</div>
<!-- dynamic fields here -->
<div data-role="fieldcontain">
<label for="selectmenu" class="select">Options:</label>
<select name="selectmenu" id="selectmenu">
<option value="bank">Bank</option>
<option value="car_dealer">Car Dealer</option>
<option value="car_rental">Car Rental</option>
<option value="car_repair">Car Repair</option>
<!-- Other SelectMenu options here -->
</select>
</div>
<!-- submit button here -->
<input id="submit" type="submit" value="Send">
</form>
<div data-role="footer">
<h4>XXXX App</h4>
</div> <!-- /main -->
</div> <!-- /header -->
</div> <!-- /page -->
<script src="postScript.js"></script>
</body>
</html>
postScript.js
$(document).ready(function(){
$(document).on('click', '#submit', function(e) { // catch the form's submit event
if($('#fname').val().length > 0 && $('#lname').val().length && $('#busname').val().length > 0){
console.log("in...");
var data = $('#subscribeContent').serialize();
$.ajax({url: 'mailer.php',
data: data,
type: 'post',
async: 'true',
dataType: 'JSON',
beforeSend: function() {
},
complete: function() {
},
success: function (result) {
//write your proper condtion
console.log(result);
},
error: function (request,error) {
alert('Network error has occurred');
console.log(error);
}
});
} else {
alert('Please fill all necessary fields');
}
return false;
});
});
mailer.php
<?php
//$action = $_POST['action'];
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$busname = $_POST['busname'];
$bustype = $_POST['bustype'];
$selectmenu = $_POST['selectmenu'];
$sendgrid = new SendGrid("[-----API-KEY-----]");
$email = new SendGrid\Email();
{ $body = "{$fname} {$lname} \n{$busname} \n{$bustype} \n{$selectmenu}"; }
$email->addTo("admin#my-privatedomain.com")
->setFrom("admin#my-privatedomain.com") // for testing purposes
->setSubject("Verification Request")
->setHtml($body);
$sendgrid->send($email);
?>
Also make sure you have included SendGrid library in your file and also you have set valid API-KEY.
I am having a login page where the i have entered script to check the empty username and password, now want to change the class of password input to "has- error" and also do the same for username if the data entered by he user is wrong, ie if the username entered by the user does not exist in my database then the username field must show error and if the password is wrong the password field must show error. I am new to php and bootstrap which i have used for my page
javascript code is
<!-- Bootstrap Core JavaScript -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
<script src="../dist/js/formValidation.min.js"></script>
<script src="../dist/js/formValidation.js"></script>
<script type="text/javascript">
function validateText(id)
{
if($("#"+id).val()==null || $("#"+id).val()=="")
{
var div = $("#"+id).closest("div");
div.addClass("has-error");
return false;
}
else
{
var div = $("#"+id).closest("div");
div.removeClass("has-error");
return true;
}
}
$(document).ready(function()
{
$("#custbtn").click(function()
{
if(!validateText("cusername"))
{
return false;
}
if(!validateText("cpassword"))
{
return false;
}
$("form#loginfom").submit();
});
});
</script>
the page code is:
<div class="row">
<div class=" col-lg-offset-3 col-lg-3">
<div class=" login-panel panel panel-default">
<div class="panel-heading">
<h3 class="panel-title text-center">Customer Login</h3>
</div>
<div class=" panel-body">
<form role="form" id="loginfom" action="../Connections/Logincust.php" method="post">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="Username" id="cusername" name="cusername" type="username" autofocus>
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" id="cpassword" name="cpassword" type="password" value="" autofocus>
</div>
<div class="checkbox">
<label>
<input name="remember" type="checkbox" value="Remember Me">Remember Me
</label>
</div>
<!-- Change this to a button or input when using this as a form -->
<button type="button" id="custbtn" class="btn btn-primary btn-lg btn-block"> Login </button>
</fieldset>
</form>
</div>
</div>
</div>
</div>
the code for logincust.php
i have a simple Jquery script which allow me to place a nice drop down login box but i have a simple issue with it
when i tried to place more than 1 box lets say 5 the script totally messed
i believe its something regarding the DIV id's and duplication but i don't find a way to resolve this problem
JS code
// Login Form
$(function() {
var button = $('#loginButton');
var box = $('#loginBox');
var form = $('#loginForm');
button.removeAttr('href');
button.mouseup(function(login) {
box.toggle();
button.toggleClass('active');
});
form.mouseup(function() {
return false;
});
$(this).mouseup(function(login) {
if(!($(login.target).parent('#loginButton').length > 0)) {
button.removeClass('active');
box.hide();
}
});
});
html code
<!doctype html>
<html>
<head>
<meta charset="utf8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery Dropdown Login Freebie | The Finished Box</title>
<link rel="stylesheet" href="css/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script>
<script src="js/login.js"></script>
</head>
<body>
<div id="bar">
<div id="container">
<!-- Login Starts Here -->
<div id="loginContainer">
<span>Login</span><em></em>
<div style="clear:both"></div>
<div id="loginBox">
<form id="loginForm">
<fieldset id="body">
<fieldset>
<label for="email">Email Address</label>
<input type="text" name="email" id="email" />
</fieldset>
<fieldset>
<label for="password">Password</label>
<input type="password" name="password" id="password" />
</fieldset>
<input type="submit" id="login" value="Sign in" />
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
</fieldset>
<span>Forgot your password?</span>
</form>
</div>
</div>
<!-- Login Ends Here -->
</div>
</div>
</body>
</html>
Yes, Change the ID's and It will work for more than one.