This is my first ever try on Ajax, what this code is doing is that when a user types a username, ajax should get triggered and tell the user whether the username is available of not. But ajax file is not doing what it is suppose to do in other words the function is not getting triggered. any idea why?
I have taken this example from a book.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<!-- Bootstrap Core CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="bootstrap/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Ajax -->
<script src="ajax.js" type="text/javascript" language="javascript"></script>
<!-- Ajax -->
<script src="checkusername.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<div class="form-group">
<form action="checkusername.php">
<fieldset>
<legend>Registration Form</legend>
<p>
Username: <br> <input name="username" onchange="check_username(this.form.username.value)" type="text" class="form-control" placeholder="Username" maxlength="20" style="width:200px; display: inline;">
<span id="username_label"></span>
</p>
<p>
Password: <input type="password" class="form-control" placeholder="Password" maxlength="20" style="width:200px;">
</p>
<p>
Confirm Password: <input type="text" class="form-control" placeholder="Confirm Password" maxlength="20" style="width:200px;">
</p>
<p>
First Name: <input type="text" class="form-control" placeholder="First Name" maxlength="20" style="width:200px;">
</p>
<p>
Last Name: <input type="text" class="form-control" placeholder="Last Name" maxlength="20" style="width:200px;">
</p>
<p>
Email: <input type="email" class="form-control" placeholder="Email" maxlength="20" style="width:200px;">
</p>
<button type="submit" name="submit" class="btn" >Register</button>
</fieldset>
</form>
</div>
</body>
</html>
ajax.js
var ajax = false;
if( window.XMLHttpRequest ){
ajax = new XMLHttpRequest();
} else {
// code for IE6, IE5
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
if ( !ajax ) {
alert('functionality is not avaible');
}
checkusername.js
function check_username( username ){
if( ajax ){
ajax.onreadystatechange = handle_check;
ajax.open( 'GET', 'checkusername.php?username=' + encodeURIComponent(username), true);
ajax.send(null);
}
else{
document.getElementById( 'username_label' ).innerHTML = 'The availablity of this username will be check upon form submission';
}
}
function handle_check(){
if ( ajax.readyState == 4 && ajax.status == 200 ) {
document.getElementById( 'username_label' ).innerHTML = ajax.responseText;
}
}
checkusername.PHP
<?php
if (isset($_GET['username'])) {
$dbc = #mysqli_connect('localhost','root','','testdb') OR die ( 'Cannot connect.' );
$que = sprintf("SELECT ID FROM maintable WHERE name='%s'", mysqli_real_escape_string( $dbc, trim( $_GET['username'] ) ));
$runque = mysqli_query( $dbc, $que );
if (mysqli_num_rows( $runque ) == 1) {
echo "The Username is unavaiable!";
}
else{
echo "The Username is avaiable!";
}
mysqli_close( $dbc );
}
else{
echo "Please Enter username";
}
?>
Related
Here I'm trying to execute the following code but it throws the above error in console log in website page, I am unable to identify the error .
I have coded this webpage in such a way that it should show an error like "enter the user name" and "enter the password" whenever the input boxes are left empty but instead of this it is showing an uncaught type error. Kindly help me to find the solution.
my github code link is:https://github.com/harish-123445/login-form-using-html-css-javascript
function vfun(){
var uname=document.forms["myform"]["uname"].value;
var pword=document.forms["myform"]["pword"].value;
if(uname==null || uname=="" ){
document.getElementById("errorBox").innerHTML =
"enter the user name";
return false;
}
if(pword==null || pword==""){
document.getElementById("errorBox").innerHTML =
"enter the password";
return false;
}
if (uname != '' && pword != '' ){
alert("Login successfully");
}
}
<!DOCTYPE html>
<html >
<head>
<title>sign in form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="js.js"></script>
<body>
<div class="box">
<img src="user.png" class="user">
<h1 >LOGIN HERE</h1>
<form class="myform" onsubmit= "return vfun()">
<p>USERNAME </p>
<input type="text" name="uname" placeholder="enter username" >
<p>PASSWORD </p>
<input type="password" name="pword" placeholder="enter password">
<div id="errorBox"></div>
<input type="submit" name="" value="login">
<br><br>
<a href="register.html" >Register for new user</a>
</form>
</div>
</body>
</head>
</html>
I have edited your code. I have called your username and password using getElementById and your two error boxes with different id names and now it is working fine.
function vfun(){
var uname=document.getElementById("name").value;
var psword=document.getElementById("passw").value;
if(uname==null || uname=="" ){
document.getElementById("errorBox2").innerHTML =
"enter the user name";
return false;
}
if(psword==null || psword==""){
document.getElementById("errorBox").innerHTML =
"enter the password";
return false;
}
if (uname != '' && pword != '' ){
alert("Login successfully");
}
}
<!DOCTYPE html>
<html >
<head>
<title>sign in form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="js.js"></script>
<body>
<div class="box">
<img src="user.png" class="user">
<h1 >LOGIN HERE</h1>
<form class="myform" onsubmit= "return vfun()">
<p>USERNAME </p>
<input type="text" name="uname" id="name"
placeholder="enter username" >
<div id="errorBox2"></div>
<p>PASSWORD </p>
<input type="password" name="pword" id="passw"
placeholder="enter password">
<div id="errorBox"></div>
<input type="submit" name="" value="login">
<br><br>
<a href="register.html" >Register for new user</a>
</form>
</div>
</body>
</head>
</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>
I'm trying to use javascript to perform client-side verification of input to the following form. The 'firstname' field should contain only alphabetical characters. How can I write the validation function to implement this behaviour?
form.html
<html>
<head>
<script type="text/javascript" src="mainform.js"></script>
</head>
<body>
<form name="mainform" method="post" onSubmit="return validation();" >
firstname <input type="text" name="firstname"><br>
lastname <input type="text" name="lastname"><br>
username <input type="text" name="username"><br>
password <input type="password" name="password"><br>
confirm password<input type="password" name="cpassword"><br>
email <input type="email" name="email"><br>
phone no <input type="text" name="phoneno"><br>
<input type="submit" name="submit">
</body>
</html>
form.js
function validation()
{
var fname=document.mainform.firstname;
var letters="/[a-zA-Z]$/";
if(fname.value.match(letters)){
return true;
}
else
{
alert('first name must be alphabets');
fname.focus();
return false;
}
}
function validation()
{
var fname = document.mainform.firstname;
if(/^[a-zA-Z]+$/.test(fname.value)) {
return true;
} else {
alert('first name must be alphabets');
fname.focus();
return false;
}
}
Do not forget to make a check on the server side too for security.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hide</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style type="text/css">
label input[type="button"]
{
background: #E17698;
}
</style>
<script>
$(document).delegate("#submit","click",function(e)
{
var name = $("#fname").val();
var hasError = false;
var searchReg = /^[a-zA-Z ]+$/;
if(name == '') {
$("#txtt").after('<span class="error" style="color:red;"> *Fill Name Box</span>');
hasError = true;
} else if(!searchReg.test(name)) {
$("#txtt").after('<span class="error" style="color:red;"> **Enter Vaild Name.</span>');
hasError = true;
}else if(searchReg.test(name)) {
$("#txtt").after('<span class="error" style="color:white;"> Vaild Name</span>');
}
if(hasError == true) {
return false
}
});
</script>
</head>
<body>
<form name="mainform" method="post">
firstname <input type="text" name="firstname" id='fname'><label id="txtt"></label><br>
lastname <input type="text" name="lastname"><br>
username <input type="text" name="username"><br>
password <input type="password" name="password"><br>
confirm password<input type="password" name="cpassword"><br>
email <input type="email" name="email"><br>
phone no <input type="text" name="phoneno"><br>
<input type="submit" name="submit" id='submit'>
</form>
</body>
</html>
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>