click the forgot link email field should be validate using javascript - javascript

click the forgot link email field should be validate using javascript,i have a done code any mistake please suggest me,below shown javascript code link may be conflict go through once and suggest me
<form id="form1" name="form1" action="<?php echo base_url(); ?>Index.php/Login_cntrl/login" method="POST" >
<div class="field-wrap">
<label class="view-label">Email Address</label>
<input type="email" placeholder="Email Address" name="email" id="email" class="input-control" value="<?php echo set_value('email'); ?>"/>
<span class="text-danger"><?php echo form_error('email'); ?></span>
</div>
<!--<div id='errorDiv' class='col-xs-12 pull-right'> </div>-->
<div class="field-wrap">
<input type="password" placeholder="Password" name="password" id="password" value="<?php echo set_value('password'); ?>"/>
<span class="text-danger"><?php echo form_error('password'); ?></span>
<a href="javascript:void(0)" class="btn btn-link btn-nobg" id="btn-show-forgot" >Forgot ?</a>
</div>
<!--<div id='errorDivv' class='col-xs-12 pull-right'> </div>-->
<div class="field-wrap">
<button type="submit" class="btn btn-submit" name="ulogin" id="ulogin" value="ulogin" >Login</button>
<?php
if (isset($message)) {
echo $message;
}
?>
</div>
<div class="field-wrap">
NEW User? Sign up
</div>
</form>
javascript
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>js/testing.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<!-- Did you omit follow library? -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {
$("#form1").validate({
rules: {
email: "required"
},
messages: {
email: "Please specify your name"
}
})
$('#btn-show-forgot').on('click', function() {
$("#form1").valid();
});
});
</script>

It should be:
<script>
$(document).ready(function() {
$("#form1").validate({
rules: {
email: "required"
},
messages: {
email: "Please specify your name"
},
submitHandler: function(form){
form.submit();
}
});//validate()
});
</script>
submitHandler is called when the form is validated successfully. So, here we are submitting the form once it has validated successfully.

Related

How to convert HMAC_SHA256_MAC in PHP

index.php
<form class="row g-3" action="<?php echo base_url('signin'); ?>" method="post" id="loginForm" onsubmit="return hashpass();">
<div class="col-12">
<label for="inputUsername" class="form-label">Username</label>
<input type="text" class="form-control" name="uname" id="uname" placeholder="Enter Username" required>
</div>
<div class="col-12">
<label for="inputChoosePassword" class="form-label">Password</label>
<div class="input-group" id="show_hide_password">
<input type="password" class="form-control border-end-0" name="password" required id="password" value="12345678" placeholder="Enter Password"> <i class='bx bx-hide'></i>
</div>
</div>
<div class="col-12">
<div class="d-grid">
<button type="submit" id="signin" class="btn btn-primary" onclick="hashpass();"><i class="bx bxs-lock-open"></i>Sign in</button>
</div>
</div>
</form>
<script src="<?php echo base_url(); ?>/assets/js/HmacSHA256.js"></script>
<script>
function hashpass(){
var FormName='loginForm';
document.forms[FormName]["password"].value=HMAC_SHA256_MAC("aSm0$i_20eNh3os", document.forms[FormName]["password"].value);
return true;
}
</script>
Home_Controller.php
public function signin()
{
$userModel = new UserModel();
$uname = $this->request->getPost('uname');
$password = $this->request->getPost('password');
$data = $userModel->signin($uname);
foreach($data as $key=>$value)
{
$auth_id=$value->auth_id;
$s_password=$value->password;
}
if(!empty($data))
{
if(password_verify($password, $s_password))
{
$session->set('auth_id',$auth_id);
$this->response->redirect(base_url('dashboard'));
}else{
$this->response->redirect(base_url());
}
}
else
{
$this->response->redirect(base_url());
}
}
If I get value from front end suppose value is demo enter from front end then get in controller If I print $2y$10$nxdb2IIIu0QMcXH0T0q0buKcugSUNT3muDOmelBO.fjTE5D8OrICq. So now without this script I want $2y$10$nxdb2IIIu0QMcXH0T0q0buKcugSUNT3muDOmelBO.fjTE5D8OrICq this output using PHP function.
Here is the php exmple.
<?php
echo hash_hmac('sha256', 'data', 'secret');
?>
Update the JS script
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/hmac-sha256.js"></script>
<script>
function hashpass(){
var FormName='loginForm';
document.forms[FormName]["password"].value=CryptoJS.HmacSHA256(document.forms[FormName]["password"].value, "aSm0$i_20eNh3os");
return true;
}
</script>
You can check the link.
Hash HMAC

In form1 login page input email field values how to display same email id in form2 email input field without refresh the page

In form1 login page input email field values how to display same email id in form2 email input field without refresh the page while click the forgot button please any one help me.below i attched the screenshot
script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function () {
var currentActiveId;
if (sessionStorage.getItem("activeDiv")) {
currentActiveId = sessionStorage.getItem("activeDiv");
$('.form-div').removeClass("active");
$('#' + currentActiveId).addClass("active");
}
$('#btn-show-signup').click(function () {
$('.form-div').removeClass("active");
$('#signup-form').addClass("active");
currentActiveId = "signup-form";
sessionStorage.setItem('activeDiv', currentActiveId);
});
$('.btn-show-login').click(function () {
$('.form-div').removeClass("active");
$('#login-form').addClass("active");
currentActiveId = "login-form";
sessionStorage.setItem('activeDiv', currentActiveId);
});
$('#btn-show-forgot').click(function () {
// $('#forgot-email').attr('value', null);
$('.form-div').removeClass("active");
$('#forgot-form').addClass("active");
currentActiveId = "forgot-form";
sessionStorage.setItem('activeDiv', currentActiveId);
});
});
</script>
form1
<div class="form-main">
<form action="<?php echo base_url(); ?>Index.php/Login_cntrl/login" method="POST" >
<div class="field-wrap">
<label class="view-label">Email Address</label>
<input type="email" placeholder=" Email Address" name="email" id="email" class="input-control" value="<?php echo set_value('email'); ?>"/>
<span class="text-danger"><?php echo form_error('email'); ?></span>
</div>
<div class="field-wrap">
<input type="password" placeholder="Password" name="password" id="password" value="<?php echo set_value('password'); ?>" />
<span class="text-danger"><?php echo form_error('password'); ?></span>
<a href="javascript:void(0)" class="btn btn-link btn-nobg" id="btn-show-forgot" >Forgot ?</a>
</div>
<div class="field-wrap">
<button type="submit" class="btn btn-submit" name="ulogin" id="ulogin" >Login</button>
</div>
<div class="field-wrap">
NEW User? Sign up
</div>
</form>
</div>
form2
<div class="form-div" id="forgot-form">
<div class="form-aside">
<h4 id="form-header">Forgot password </h4>
<p class="form-text"></p>
</div>
<div class="form-main">
<form action="<?php echo base_url(); ?>Index.php/Login_cntrl/ResetPassword" method="POST">
<div class="field-wrap">
<input type="text" name="emaill" id="emaill" placeholder="Enter your Mobile/Email Address" value="<?php echo $this->session->userdata('findemaill'); ?>" autocomplete="off" id="forgot-email"/>
</div>
<div class="field-wrap">
<input type="text" name="otp" id="otp" placeholder="Enter OTP" value="<?php echo set_value('otp'); ?>"/>
<span class="text-danger"><?php echo form_error('otp'); ?></span>
</div>
<?php echo $this->session->flashdata('passwordmissmatch'); ?>
<div class="field-wrap">
<input type="text" name="newpassword" id="newpassword" placeholder="Enter new Password" value="<?php echo set_value('newpassword'); ?>"/>
<span class="text-danger"><?php echo form_error('newpassword'); ?></span>
</div>
<div class="field-wrap">
<input type="text" name="confirmpassword" id="confirmpassword" placeholder="Re-enter new Password" value="<?php echo set_value('confirmpassword'); ?>"/>
<span class="text-danger"><?php echo form_error('confirmpassword'); ?></span>
</div>
<div class="field-wrap">
<button type="submit" name="resubmit" id="resubmit" class="btn btn-submit">submit</button>
</div>
<?php echo $this->session->flashdata('success_msg'); ?>
<div class="field-wrap">
<a href="javascript:void(0)" class="btn-show-login btn btn-link btn-nobg" >Back</a>
</div>
</form>
</div>
</div>
on form1 html
function onClickHandler(){
location.href = 'form2.html?username=' + document.getElementById('TextBoxName').value;
}
on form2 html
function parseQueryString()
{
var queryDict = {}
location.search.substr(1).split("&").forEach(function(item) {
queryDict[item.split("=")[0]] = item.split("=")[1]
});
return queryDict;
}
function onLoadHandler(){
document.getElementById('TextBoxName').value = parseQueryString().name;
}

click the forgot button form should be validate using jquery

click the forgot button in form email field should be validate using jquery below my code is there if any mistake suggest me and go through login pages images
login pages
<form id="form1" name="form1" action="<?php echo base_url(); ?>Index.php/Login_cntrl/login" method="POST" >
<div class="field-wrap">
<label class="view-label"for="email">Name (required, at least 2 characters)</label>
<input type="email" placeholder="Email Address" name="email" id="email" class="input-control" value="<?php echo set_value('email'); ?>" />
<span class="text-danger"><?php echo form_error('email'); ?></span>
</div>
<div class="field-wrap">
<label class="view-label"for="password">Password (required, at least 8 characters)</label>
<input type="password" placeholder="Password" name="password" id="password" value="<?php echo set_value('password'); ?>" />
<span class="text-danger"><?php echo form_error('password'); ?></span>
<button type="button" id="btn-show-forgot" name="btn-show-forgot">Forgot ?</button>
</div>
<div class="field-wrap">
<button type="submit" class="btn btn-submit" name="ulogin" id="ulogin" >Login</button>
</div>
<div class="field-wrap">
NEW User? Sign up
</div>
</form>
$('#btn-show-forgot').click(function () {
// $('#forgot-email').attr('value', null);
$('.form-div').removeClass("active");
$('#forgot-form').addClass("active");
currentActiveId = "forgot-form";
sessionStorage.setItem('activeDiv', currentActiveId);
});
jquery as shown in below if in case any mistake suggest me
<script>
$(document).ready(function() {
$("#form1").validate({
rules: {
email: "required"
},
messages: {
email: "Please specify your name"
}
})
$('#btn-show-forgot').on('click', function() {
$("#form1").valid();
});
});
</script>
Your code is working for me, did you added JQuery Validate plugin library?
See follow (your code + script include):
<!DOCTYPE html>
<html>
<head>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<!-- Did you omit follow library? -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
</head>
<body>
<form id="form1" name="form1">
<div class="field-wrap">
<label class="view-label"for="email">Name (required, at least 2 characters)</label>
<input type="email" placeholder="Email Address" name="email" id="email" class="input-control" value="" />
<span class="text-danger"></span>
</div>
<div class="field-wrap">
<label class="view-label"for="password">Password (required, at least 8 characters)</label>
<input type="password" placeholder="Password" name="password" id="password" value="" />
<span class="text-danger"></span>
<button type="button" id="btn-show-forgot" name="btn-show-forgot">Forgot ?</button>
</div>
<div class="field-wrap">
<button type="submit" class="btn btn-submit" name="ulogin" id="ulogin" >Login</button>
</div>
<div class="field-wrap">
NEW User? Sign up
</div>
</form>
</body>
<script>
$(document).ready(function() {
$("#form1").validate({
rules: {
email: "required"
},
messages: {
email: "Please specify your name"
}
})
$('#btn-show-forgot').on('click', function() {
$("#form1").valid();
});
});
</script>
</html>
You have to include this for JQuery Validation:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
Try this code
HTML
<form id="form1" method="post" action="#">
<label for="name">Name</label>
<input type="text" name="name" id="name" />
<label for="email">Email</label>
<input type="email" name="email" id="email" />
<button type="submit">Submit</button>
</form>
jQuery
$(document).ready(function () {
$("#form1").validate({
rules: {
"name": {
required: true,
minlength: 2
},
"email": {
required: true,
email: true
}
},
messages: {
"name": {
required: "Please, enter a name"
},
"email": {
required: "Please, enter an email",
email: "Email is invalid"
}
},
submitHandler: function (form) { // for demo
alert('valid form submitted'); // for demo
return false; // for demo
}
});
});
Working demo - http://jsfiddle.net/amwmedia/sw87W/

Echoing/outputting information that was added to an input field on the same page

I'm creating a checkout system. I have three parts to it:
Shipping info
Payment info
Order confirmation
I'm trying to figure out a way that when the customer enters their shipping information, that data can be echo'd out onto my order confirmation part, so they can confirm that is where they want it shipped to.
The way I designed my checkout system is that all three parts are on the same page. Only one part shows at once and the others are hidden until the customer would click 'Proceed to xxxx'. When they click that Proceed button, nothing is being sent. It is just taking the div and showing it and hiding the previous div. Nothing is sent until when the customer clicks Submit order on the confirmation div.
I validate the fields and assigned them to variables so I can post the shipping and product info into my db.
if($validation->passed()) {
if(isset($_POST['create'])){
$fullname = trim( $_POST['customer_name'] );
$streetline1 = trim( $_POST['streetline1'] );
$streetline2 = trim( $_POST['streetline2'] );
$city = trim( $_POST['city'] );
$state = trim( $_POST['state'] );
$zipcode = trim( $_POST['zipcode'] );
$phone_number = trim( $_POST['phone_number'] );
$email = ( $_POST['email'] );
//etc...
Shipping Information Section:
<div class="shippinginfocontainer">
<span class="summarytitle">
<p>Enter Shipping Information</p>
</span><br>
<div class="center">
<div class="field">
<label class="paddingleft" for="fullname">Full Name</label>
<div class="center">
<input type="text" class="biginputbarinline" name="fullname" value="<?php echo escape(Input::get('firstname')); ?>" required>
</div>
</div>
<div class="field">
<label class="paddingleft" for="streetline1">Street Line 1</label>
<div class="center">
<input type="text" class="biginputbarinline" name="streetline1" value="<?php echo escape($user->data()->streetline1); ?>" required>
</div>
</div>
<div class="field">
<label class="paddingleft" for="streetline2">Street Line 2</label>
<div class="center">
<input type="text" class="biginputbarinline" name="streetline2" value="<?php echo escape($user->data()->streetline2); ?>">
</div>
</div>
<div class="field">
<label class="paddingleft" for="city">City</label>
<div class="center">
<input type="text" class="biginputbarinline" name="city" value="<?php echo escape($user->data()->city); ?>" required>
</div>
</div>
</div>
<div class="formleftcenter">
<div class="field">
<label for="state">State</label>
<input type="text" class="mediuminputbar" name="state" value="<?php echo escape($user->data()->state); ?>" required>
</div>
<div class="field">
<label for="Phone Number">Phone Number</label>
<input type="text" class="mediuminputbar" name="Phone Number" value="<?php echo escape($user->data()->phone_number); ?>">
</div>
</div>
<div class="formrightcenter">
<div class="field">
<label for="zipcode">Zip Code</label>
<input type="text" class="mediuminputbar" name="zipcode" value="<?php echo escape($user->data()->zipcode); ?>" required>
</div>
<div class="field">
<label for="email">Email</label>
<input type="text" class="mediuminputbar" name="email" value="<?php echo escape($user->data()->email); ?>" required>
</div>
</div>
<div class="clear">
<button class="checkoutbutton" id="button2">Proceed to Payment Information</button>
</div>
</div>
I won't add my payment part as it is irrelevant to this question.
Then this is the relevant part of the Confirmation part. I wasn't sure how to do this, so I just wrote in echo's to show what I am trying to do.
<div class="confirmshippinginfo">
<p>Shipping to:</p>
<p><?php echo $fullname; ?></p>
<p><?php echo $streetline1; ?></p>
<p><?php echo $streetline2; ?></p>
<p><?php echo $city . $state . $zipcode; ?></p>
</div>
</div>
<input type="hidden" name="token" value="<?php echo Token::generate(); ?>">
<input class="widebutton" type="submit" value="Place Your Order">
Is there a way to do this with keeping this all on the same page? I really do not want to have multiple pages for this and I like the way I have all of this formatted. I just can't figure out this part.
You could possibly use AJAX via serialize() of your form when you click a review button (as Matthew Johnson suggested). Second idea is something like this where you copy from one input to another, in a different part of your page. It would take a bit more work to set up than something like AJAX because you are basically duplicating a form. Using .html() inside a div or span placeholder would probably work too:
HTML:
<input type="text" class="copy-from" data-copy="name" name="name" />
<input type="text" class="this-elem" id="name" disabled />
CSS
.this-elem {
border: none;
font-size: 18px;
color: #333;
}
jQuery
$(document).ready(function() {
$(".copy-from").keyup(function() {
var ElemId = $(this).data('copy');
$("#"+ElemId).val($(this).val());
});
});
Demo
http://jsfiddle.net/fh5kfhtm/4/
EDIT: AJAX/PHP Solution
<!-- This is the placeholder for the data after submission -->
<div id="final"></div>
<!-- FORM, well really simplified form -->
<form id="orderform" method="post" action="process.php">
<input type="hidden" name="order_form" />
<input type="text" name="address" />
<!--
This triggers the ajax (you would use your
"Proceed to Order Confirmation" button)
-->
<div id="confirm">CONFIRM</div>
<input type="submit" name="submit" value="ORDER" />
</form>
new.php
File name/path must match what's in the AJAX url
<?php
if(isset($_POST['order_form'])) {
print_r($_POST);
exit;
}?>
jQuery AJAX
<!-- GET THE LIBRARIES (YOU SHOULD ALREADY HAVE THEM) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script>
$(document).ready(function() {
$("#confirm").click(function() {
$.ajax({
// This is where you need the right path to the new php file
url:'/path/to/new.php',
type: 'post',
data: $("#orderform").serialize(),
success: function(response) {
$("#final").html(response);
}
});
});
});
</script>

A singular behavior about a Registration form in PHP

I have a registration form in my (project of) website of the following form: (i used bootstrap framework):
<div id="main-box" class="container">
<div class="row-fluid">
<div id="signup">
<div id="float"></div>
<div id="center_signup">
<h3>Registrazione Studente</h3>
<?php if (isset($registerError)): ?>
<p><?php htmlout($registerError); ?></p>
<?php endif; ?>
<form action="" method="post" class="form-horizontal">
<div class="form-group">
<label for="nome" class="col-sm-2 control-label">Nome: </label>
<div class="col-sm-6">
<input type="text" name="nome" id="nome" class="form-control">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email: </label>
<div class="col-sm-6">
<input type="text" name="email" id="email" class="form-control">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password: </label>
<div class="col-sm-6">
<input type="password" name="password" id="password" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-6">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Now the data of the form are managed from a index.php controller file, which do this (the register.html.php file is the template file in which there is the code above):
if (isset($_GET['register']))
{
include 'register.html.php';
if (!isset($_POST['email']) or $_POST['email'] == '' or
!isset($_POST['password']) or $_POST['password'] == '')
{
$GLOBALS['registerError'] = 'fill in both fields';
exit();
}
$password = md5($_POST['password'] . 'figarodb');
if (databaseContainsUser($_POST['email'], $password))
{
$GLOBALS['registerError'] = 'Student already registered.';
exit();
}
include $_SERVER['DOCUMENT_ROOT'] . '/figaro/includes/db.inc.php';
// Puts the student in the relevant table
try
{
$sql = 'INSERT INTO studente SET
nome = :nome,
email = :email,
password = :password';
$s = $pdo->prepare($sql);
$s->bindValue(':nome', $_POST['nome']);
$s->bindValue(':email', $_POST['email']);
$s->bindValue(':password', $password);
$s->execute();
}
catch (PDOException $e)
{
$error = 'Errore in student registration.';
include $_SERVER['DOCUMENT_ROOT'] . '/figaro/includes/error.html.php';
exit();
}
header('Location: .');
exit();
}
This header might redirect at the home page, but it doesn't do it!
If instead of the page with bootstrap and javascript code, i modify the registration page in this way:
<body>
<h1>Registration</h1>
<form action="" method="post">
<?php if (isset($registerError)): ?>
<p><?php echo $registerError; ?></p>
<?php endif; ?>
<div>
<label for="name">Nome completo: <input type="text" name="nome"
id="nome"></label>
</div>
<div>
<label for="email">Email: <input type="text" name="email"
id="email"></label>
</div>
<div>
<label for="password">Password: <input type="password"
name="password" id="password"></label>
</div>
<div>
<input type="submit" value="Invio">
</div>
</form>
</body>
now the controller redirect at the home page correctly!
I can not explain this behavior, any help will be greatly appreciated!Thanks!
In your php file there is written :
header('Location: .');
Maybe your web application is redirected on index.html by default because it's the default root.

Categories

Resources