this is supposed to be a basic question but I'm learning. I'm making a log in system, user enters a username and a password. How do I send the password into my function hash via javascript. Cause I need to compare it afterwards with the one in my DB. If the password hashed = database password then it is OK.
<link rel="stylesheet" href="style.css" />
<!-- ... -->
<div align="center">
<form action="connection.php" method="post">
<p>Fill your crendentials</p>
<label for="usrUserName">Your login</label>
<input id="usrUserName" name="usrUserName" /><br />
<tr><td>Password</td><td><input type="password" name="usrPassword" maxlength="25" id="usrPassword"/>
<form action="insert.php" method="post" onsumbit="return create_hash()">
</form>
</div>
That's what I have at the moment. I can show you the function hash but people say it's not a good idea.
EDIT My complete code
<script type="text/javascript">
define("PBKDF2_HASH_ALGORITHM", "sha1");
define("PBKDF2_ITERATIONS", 1000);
define("PBKDF2_SALT_BYTES", 24);
define("PBKDF2_HASH_BYTES", 24);
define("HASH_SECTIONS", 4);
define("HASH_ALGORITHM_INDEX", 0);
define("HASH_ITERATION_INDEX", 1);
define("HASH_SALT_INDEX", 2);
define("HASH_PBKDF2_INDEX", 3);
function create_hash($usrPassword)
{
var usrPassword =document.getElementById("usrPassword").value;
// format: algorithm:iterations:salt:hash
$salt = base64_encode(mcrypt_create_iv(PBKDF2_SALT_BYTES, MCRYPT_DEV_URANDOM));
return PBKDF2_HASH_ALGORITHM . ":" . PBKDF2_ITERATIONS . ":" . $salt . ":" .
base64_encode(pbkdf2(
PBKDF2_HASH_ALGORITHM,
$usrPassword,
base64_decode($salt),
PBKDF2_ITERATIONS,
PBKDF2_HASH_BYTES,
true
));
alert("usrPassword");
}
function validate_password($usrPassword, $good_hash)
{
$params = explode(":", $good_hash);
if(count($params) < HASH_SECTIONS)
return false;
$pbkdf2 = base64_decode($params[HASH_PBKDF2_INDEX]);
return slow_equals(
$pbkdf2,
pbkdf2(
$params[HASH_ALGORITHM_INDEX],
$usrPassword,
base64_decode($params[HASH_SALT_INDEX]),
(int)$params[HASH_ITERATION_INDEX],
strlen($pbkdf2),
true
)
);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<link rel="stylesheet" href="style.css" />
<div align = "center">
<form action = 'connection.php' method="post" >
<p> Entrer vos informations </p>
<label for="usrUserName">Votre code d'usager </label> <input
id="usrUserName" name="usrUserName" /><br />
<label for="usrPassword">Votre mot de passe </label> <input
id="usrPassword" name="usrPassword" type="usrPassword" /><br />
<input type="submit" value="submit" onsubmit=="return create_hash()">
</form>
You should pass the value as string:
<input type="button" name="myValue" value="Remove" onclick="del('<?echo $myArray[0]?>');"/>
you can also Use json_encode() to convert the value into value JavaScript:
THIS IS YOUR HTML CODE:-
<form action = 'connection.php' method="post" >
<p> Entrer vos informations </p>
<label for="usrUserName">Votre code d'usager </label>
<input id="usrUserName" name="usrUserName" /><br />
<tr><td>Password</td><td>
<input type="password" name="usrPassword" maxlength="25" id="usrPassword"/>
</td>
<form action="insert.php" method="post" onsumbit="return create_hash()">
</form>
WHEN YOU CALL FUNCTION
<script type="text/javascript">
function create_hash(){
var pass =document.getElementById("usrPassword").value;
alert(pass);//here is your password
return false//for stop function
}
</script>
Related
I have a form that is simply a input with a zip code and a submit button.
I need some help on submitting the form according to the data inserted.
For example if someone inserts a number between 1000-000 and 2999-999 it will be forward to landing1.html, if the input is between 3000-000 to 4000-999 it will forward to landing2.html and so on.
This is a draft of my code my code for better understanding
$(document).ready(function() {
$(".postal-code").inputmask("9999-999", {
"placeholder": "0"
});
$(".postal-code").inputmask("9999-999", {
"onincomplete": function() {
alert('Insere um Código Postal válido');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/Inputmask/5.x/dist/jquery.inputmask.min.js"></script>
<div id="form-cp">
<form method="get" action="" onsubmit="" class="needs-validation">
<input type="text" name="cp" value="" size="8" maxlength="8" minlength="8" class="postal-code form-control-lg" aria-invalid="false" placeholder="0000-000" required>
<button type="submit" class="btn btn-primary">Send Data</button>
</form>
</div>
Hope someone can help me.
Many thanks!
Like this
We can make it more complex if you have many sets of post codes
$(function() {
$(".postal-code").inputmask("9999-999", {
"placeholder": "0"
});
$(".postal-code").inputmask("9999-999", {
"onincomplete": function() {
alert('Insere um Código Postal válido');
}
});
$(".needs-validation").on("submit",function() {
const cp = this.cp.value;
if (cp >= "1000-000" && cp <= "2999-999") this.action = "landing1.html";
else if (cp >= "3000-000" && cp <= "4000-999") this.action = "landing2.html";
// else this.action = "outofrange.html";
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/Inputmask/5.x/dist/jquery.inputmask.min.js"></script>
<div id="form-cp">
<form method="get" action="" onsubmit="" class="needs-validation">
<input type="text" name="cp" value="" size="8" maxlength="8" minlength="8" class="postal-code form-control-lg" aria-invalid="false" placeholder="0000-000" required>
<button type="submit" class="btn btn-primary">Send Data</button>
</form>
</div>
I'm creating a simple form that allows you to enter data that will then be sent to a DB. In particular I need to know from you how I can create a dynamic form that allows me to enter a number of people specified by the user. Basically if the user wants to add 3 people must present 3 new fields to enter Name, Surname and email, if he wants to add 5, 5 new fields.
I write this, but in my index.php it doesn't work.
// Funzione che permette di aggiungere elementi al form (in questo caso rate)
function Aggiungipersone(person) {
var numero_persone = person.value;
var box = document.getElementById('box_person');
if (numero_persone == "") {
box.innerHTML = '';
} else {
if (isNaN(numero_persone) == true) {
box.innerHTML = '';
} else {
var righe = "";
// Inserisco una riga ad ogni ciclo
for (i = 1; i <= numero_persone; i++) {
righe = righe + "Persona n°" + i + " : <input type='text' name='iname" + i + " size='10' value='" + Cognome + "' type='text' name='isurname' size='10' value=''/><br/>";
}
// Aggiorno il contenuto del box che conterrà gli elementi aggiunti
box.innerHTML = righe;
}
}
}
Inserire i dati richiesti:<br><br>
<form method="post" action="input.php">
<b> Richiedente Conferenza:</b><br><br> Nome:
<input type="text" name="name" size="20"><br> Cognome:
<input type="text" name="surname" size="20"><br> Email: <input type="email" name="email" size="20"><br> Oggetto Conferenza:<br><textarea name="testo" rows="5" cols="40" placeholder="Specificare oggetto Videoconferenza"></textarea><br>
</form>
UPDATE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Prenotazione Videoconferenza</title>
<script src="utils.js"></script>
</head>
<body>
<?php
$( document ).ready(function() {
$("#add").click(function(){
var val1 =$("#n1").val();
for(var i=0;i<val1;i++){
$("#start").append($("#first").clone());
}
});
});
?>
Inserire i dati richiesti:<br><br>
<form method="post" action="input.php">
<b> Richiedente Conferenza:</b><br><br>
Nome:<input type="text" name="name" size="20"><br>
Cognome:<input type="text" name="surname" size="20"><br>
Email: <input type="email" name="email" size="20"><br>
Oggetto Conferenza:<br><textarea name="testo" rows="5" cols="40" placeholder="Specificare oggetto Videoconferenza"></textarea><br>
</form>
</body>
</html>
In the utilis.js i inserted:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="n1" value="1"><br>
Add
<div id="start">
<div id="first">
Nome:<input type="text" name="name" size="20"><br> Cognome:
<input type="text" name="surname" size="20"><br> Email: <input type="email" name="email" size="20"><br>
<br>
</div>
</div>
// content of external javascript file:
$(document).ready(function() {
$("#add").click(function(e) {
e.preventDefault(); // stop the link
var val1 = $("#n1").val();
for (var i = 0; i < val1; i++) {
$("#start").append($("#first").clone());
}
});
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Prenotazione Videoconferenza</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- here is the external file -->
<script src="utils.js"></script>
</head>
<body>
<input type="text" id="n1" value="1"><br>
Add
<div id="start">
<div id="first">
Nome:<input type="text" name="name[]" size="20"><br> Cognome:
<input type="text" name="surname[]" size="20"><br> Email: <input type="email" name="email[]" size="20"><br>
<br>
</div>
</div>
</body>
</html>
once you submit form then you will get array into php file and you can access like this
if($_POST['name']){ foreach($_POST['name'] as $name) { echo $name; } }
1) With VueJS - demo on code pen
2) JQuery
const tmpl = $('#tmpl').html().trim()
$('#btn-add').click(() => {
let peopleCount = +$('#people-count').val(),
html = Array(peopleCount)
.fill(tmpl)
.join('')
$('#form-items').append(html)
})
$('#form')
.submit(() => {
alert('Submit form by ajax or remove this mathod for default behavior')
return false;
})
.delegate('.btn-del', {
click() {
$(this).closest('.row').remove()
},
})
<div id="app">
<div>
<div>
<button id="btn-add">Add new user</button>
<label>Number of People:</label>
<input type="number" id="people-count" value="1" min="1">
</div>
<form id="form">
<div id="form-items" data-empty="Users list is empty"></div>
<button>Send</button>
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/x-template" id="tmpl">
<div class="row">
<label>
Name:
<input class="people" name="name[]">
</label>
<label>
Surname:
<input class="people" name="surname[]">
</label>
<label>
Email:
<input type="email" class="people" name="email[]">
</label>
<button class="btn-del">Delete</button>
</div>
</script>
<style>
.people {
width: 80px;
}
#form-items:empty + button {
display: none;
}
#form-items:empty:before {
content: attr(data-empty);
display: block;
}
</style>
you will need something like this:
$("#people").on("keyup", function() {
$("#form").html(""); // clear the form
var people = $(this).val();
for(i=1;i<=people;i++) {
$("#form").append("<input type='text' name='name[]' placeholder='Name Person "+i+"'><br>");
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Number of People:</label>
<input type="number" id="people">
<div id="form"></div>
as you see the input names are with [] which means they are arrays.. That means on your server side script you will recieve an array where you have to go through via
foreach($_POST["names"] as $name) {
// do whatever
}
I coded an HTML form where I tried to validate it using javascript, However, the validation doesn't work. It should work on click of submit button. Everything looks fine! could not find the error! Please Help.
Below is the code for the page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Term Deposit Interest Calculator</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<script>
function validateform(){
var amount=document.myform.amount.value;
var years=document.myform.years.value;
var interst= document.myform.interst.value;
if (amount==null || amount==""){
alert("Amount can't be blank");
return false;
}else if (years==null || years==""){
alert("Years can't be blank");
return false;
}else if (interest==null || interest==""){
alert("Interest can't be blank");
return false;
}
}
</script>
</head>
<body>
<div class="card">
<h3>Term Deposit Interest Calculator</h3><br>
<form name = "myform" method="post"onsubmit="return validateform()">
<input type="text" name="amount" placeholder="Deposit Amount"><span id="num1"></span>
<input type="text" name="years" placeholder="Number Of Years"><span id="num2"></span>
<input type="text" name="interest" placeholder="Yearly Interst Rate"><span id="num3"></span>
<input type="submit" name="submit" class="my submit" value="Total Amount">
</form>
<div class="result">
</div>
</div>
</body>
</html>
<?php
if (!isset($amount7032)) { $amount7032 = ''; }
if (!isset($interest7032)) { $interest7032 = ''; }
if (!isset($years7032)) { $years7032 = ''; }
?>
You have written wrong form element name at below line
var interst= document.myform.interst.value;
it should be
var interest= document.myform.interest.value;
Basically because javascript was not able to find the form element and it was failing due to that.
I tried below code and its working:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Term Deposit Interest Calculator</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<script>
function validateform(){
var amount=document.myform.amount.value;
var years=document.myform.years.value;
var interest= document.myform.interest.value;
if (amount==null || amount==""){
alert("Amount can't be blank");
return false;
}else if (years==null || years==""){
alert("Years can't be blank");
return false;
}else if (interest==null || interest==""){
alert("Interest can't be blank");
return false;
}
}
</script>
</head>
<body>
<div class="card">
<h3>Term Deposit Interest Calculator</h3><br>
<form name="myform" method="post" onsubmit="return validateform()">
<input type="text" name="amount" placeholder="Deposit Amount"><span id="num1"></span>
<input type="text" name="years" placeholder="Number Of Years"><span id="num2"></span>
<input type="text" name="interest" placeholder="Yearly Interst Rate"><span id="num3"></span>
<input type="submit" name="submit" class="my submit" value="Total Amount">
</form>
<div class="result">
</div>
</div>
</body>
</html>
I have file .js in this link: C:\xampp\htdocs\ab-group\assets\js\default.js
I've made a form and I wanna validate it. I also already linked the js file in HTML head but it doesn't work.
I use a same way in calling css file and it succeeded, but why I can't call js file?
here my view code:
<head>
<title>Welcome to AB Group</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="<?php echo base_url('assets/css/default.css')?>"
rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="<?php echo base_url(). "assets/js/default.js" ?>"></script>
</head>
<body>
<div class="form-style-3">
<form id="form_sendEmail" name="form_sendEmail" method="post" onsubmit="validate();">
<fieldset><legend>Personal</legend>
<label for="field1"><span>Name <span class="required">*</span></span><input type="text" class="input-field" name="name" id="name" value="" /></label>
<label for="field2"><span>Email <span class="required">*</span></span><input type="email" class="input-field" name="email" id="email" value="" /></label>
<label for="field3"><span>Phone <span class="required">*</span></span><input type="text" class="input-field" name="phone" id="phone" value="" /></label>
<label for="field4"><span>Subject</span><select name="field4" class="select-field">
<option value="Information">Information</option>
<option value="Complain">Complain</option>
<option value="Other">Other</option>
</select></label>
<label for="field5"><span>Shipment Code <span class="optional"></span></span><input type="text" class="input-field" name="field5" value="" /></label>
</fieldset>
<fieldset><legend>Message</legend>
<label for="field6"><span>Message <span class="required">*</span></span><textarea name="message" id="message" class="textarea-field"></textarea></label>
<label><span> </span><input type="submit" onclick="validate()" id="sendEmail" value="Send Email" /></label>
<span class="required">* Indicates Required Field</span>
</fieldset>
</form>
</div>
</body>
and here my js file:
$(document).submit(function () {
function validate()
{
var emailID = document.form_sendEmail.Email.value;
atpos = emailID.indexOf("#");
dotpos = emailID.lastIndexOf(".");
if( document.form_sendEmail.Name.value == "" )
{
alert( "Please provide your name!" );
document.form_sendEmail.Name.focus() ;
return false;
}
if( document.form_sendEmail.Email.value == "" )
{
alert( "Please provide your Email!" );
document.form_sendEmail.Email.focus() ;
return false;
}else if(atpos < 1 || ( dotpos - atpos < 2 ))
{
alert("Please enter correct email ID")
document.form_sendEmail.EMail.focus() ;
return false;
}
if( document.form_sendEmail.Phone.value == "" )
{
alert( "Please provide your phone number!" );
document.form_sendEmail.Phone.focus() ;
return false;
}
if( document.form_sendEmail.Message.value == "" )
{
alert( "Please write your message!" );
document.form_sendEmail.Message.focus() ;
return false;
}else{
return( true );
}
}
});
I hope js file could validate the form is empty or not and validate email as well. Please help to find a mistake in my code. Thank you very much.
Problem might be at linking js file. So try this.
<script src="<?php echo base_url(); ?> assets/js/default.js"></script>
I change $(document).submit(function ()... to become $(document).ready(function()... and then (somehow) it works.
This is my first time with javascript. I'm making a basic login page where there is a control for the email input. I would like to put an error message of some kind when someone gives an email address with illegal symbol. Here my code:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="UTF-8">
</head>
<body>
<div>
<form action="Home.html" method="post">
<label for="id">Username</label>
<input type="text" name="id" id="id" value="" />
<br/>
<label for="pass">Password</label>
<input type="password" name="pass" id="pass" value="" />
<br/>
<label for="email">Email</label>
<input type="email" name="email" id="email" value="" />
<br/>
<script type="text/javascript">
function checkEmail ()
{
var emailObject = document.getElementById("email");
var email = emailObject.getAttribute("value").toString();
var error = document.createTextNode("Uncorrect email");
var result = email.search("/[^(a-z | A-Z | 0-9 | #)]/");
if(result !== -1)
{
emailObject.appendChild(error);
}
}
</script>
<button type="button" onclick="checkEmail()"> Confirm </button>
</form>
</div>
</body>
</html>
I have a function I use to validate email addresses, it uses regex. I would suggest jQuery just to show/hide the error message.
function validEmail(val){
if(val.length < 6 || val.length > 255) return false;
return new RegExp(/^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/).test(val);
}
$(function(){
$("#email").on("change", function(){
var email = $("#email").val();
if(!validEmail(email)){
$("#emailError").show();
} else {
$("#emailError").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<!-- Some Inputs here -->
<span id='emailError' style='display: none;'>Please enter a valid email address</span><br>
<input type='email' id='email' name='email' placeholder='Email Address' />
<!-- More Inputs here -->
<button type='submit'>Submit</button>
</form>
you're trying to append something to an input element (email input, in this case). I'd suggest to append it to your main div, which in this case I have identified as "YOUR_ID".
Also, I suggest you a more efficint way to check a valid email.
follow the below example
<body>
<div id="YOUR_ID">
<form action="Home.html" method="post">
<label for="id">Username</label>
<input type="text" name="id" id="id" value="" />
<br/>
<label for="pass">Password</label>
<input type="password" name="pass" id="pass" value="" />
<br/>
<label for="email">Email</label>
<input type="email" name="email" id="email" value="" />
<br/>
<script type="text/javascript">
function checkEmail ()
{
var emailObject = document.getElementById("email");
var divObject = document.getElementById("YOUR_ID");
var email = emailObject.getAttribute("value").toString();
var error = document.createTextNode("Uncorrect email");
var check = /^([\w-]+(?:\.[\w-]+)*)#((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
var result = check.test(email);
if(result !== -1)
{
divObject.appendChild(error);
}
}
</script>
<button type="button" onclick="checkEmail()"> Confirm </button>
</form>
</div>
</body>