Hi im a newbie ive been trying to create a login form wherein the username and password are stored in xml file.However whenever i type my username and password it only allows a username A and password 12345 to login successfully.but if i type B password 12345.Its not working anymore.Below is my code.
users.xml
<users>
<user>
<username>A</username>
<password>12345</password>
</user>
<user>
<username>B</username>
<password>12345</password>
</user>
</users>
try.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
</head>
<body>
<form id="frmlogin" name="frmlogin" method="post" action="Login" onsumbit="return false;">
<p>ENTER USER NAME <input type="text" name="login_username" id="username"></p>
<p> ENTER PASSWORD <input type="password" name="login_pass" id="password"><br><br>
<input type="button" class="button" value="Log in" onclick="login()">
</p>
</form>
<script>
window.login = function(e)
{
if (document.frmlogin.login_username.value == "")
{
alert("User name is not blank");
return;
}
else if(document.frmlogin.login_pass.value == "")
{
alert("Password is not blank");
return;
}
else
{
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "users.xml", true);
xhttp.send();
}
function myFunction(xml) {
var xmlDoc = xhttp.responseXML;
var ktra = true;
var xml = xmlDoc.childNodes[0].childNodes[1];
var name = xml.childNodes["username"];
var pass = xml.childNodes["password"];
for(var i =1 ;i<xml.childNodes.length;i++){
if(xml.childNodes[i].nodeName =="username")
name = xml.childNodes[i];
if(xml.childNodes[i].nodeName =="password")
pass = xml.childNodes[i];
}
if(name.textContent == frmlogin.login_username.value && pass.textContent== frmlogin.login_pass.value)
{
ktra = true;
}
else
{
ktra=false;
}
if(ktra == true)
{
alert("Login Successfully !!!");
}
else
{
alert("Login Failed !!!");
}
}
}
</script>
</body>
</html>
Related
I'd love to know if there is a possibility to add a trigger ("KEY EVENT"ׁׂׂ) to avoid sending the request twice.
The problem is if we start typing in the URL field the domain http://www.example.com.. The AJAX will trigger on "http://www.example.co" and then again when you add the last letter.
There are an option to avoid that or give the user few second to finish to write the full domain?
<html>
<head>
<script>
function isUrl(url){
var regex = /^(?:(?:https?|ftp):\/\/)(?:\S+(?::\S*)?#)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})?(?:[/?#]\S*)?$/i;
return regex.test(url);
}
function showHint(str) {
if (!isUrl(str)) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "gethint.php?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<p><b>Start typing a url in the input field below:</b></p>
<form>
Url: <input type="text" onkeyup="showHint(this.value)">
</form>
<p><span id="txtHint"></span></p>
</body>
</html>
I am trying to display contents of a php file on my html page using ajax.
I have an html file with the following ajax code :
get_ajax.html
<form action="">
First name: <input type="text" id="txt1" onblur="show users(this.value)">
</form>
<p>Username: <span id="txtHint"></span></p>
<script>
function showHint(str) {
var xhttp;
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
}
xhttp = newXMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "user.php?u="+str, true);
xhttp.send();
}
</script>
user.php
<?php
echo $_GET["u"];?>
It doesn't display the username on my get_ajax.html page.
Is there something wrong with my code?
First check the existence of user.php and verify the proper path,by the way why don't use Jquery,it is easy and straight forward.
Here is an example using jquery :
var str = 'something';
$.get('user.php',{u:str},function(serverResponse){
$("#txtHint").html(serverResponse); //this should add the value something to the DOM
});
Appears you have type in your code as below
- onblur , you are making a call to "show users(this.value)"
- there is a space between "show" and "user" , even u correct the space , you dont have a function "showuser" anywhere.
- your function to make the ajax call is "showHint"
- next you need a space between "new" and "XMLHTTpRequest()"
<form action="">
First name: <input type="text" id="txt1" onblur="showHint(this.value)"/>
</form>
<p>Username: <span id="txtHint"></span></p>
</form>
<script>
function showHint(str) {
var xhttp;
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
}
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "user.php?u="+str, true);
xhttp.send();
}
</script>
I want my input email address to be checked on registration page. I am right now using onreadystatechange to get the response from database with responseText. If responseText is true, then do not submit the form, otherwise, submit.
However, my code will always submit my forms even if the condition is true.
//////////////HTML file//////////////////
<form action="regist.php" method="post" id="submitForm">
<label>*Email:</label>
<label class="validate" id="emailError">XXXX#XXXX.XXX</label></br>
<input type="text" id="email" name="email"/></br>
<label>*First Name:</label>
<label class="validate" id="firstnameError">Letters only!</label>
<input type="text" id="firstname" name="firstname"/></br>
<label>Last Name:</label>
<input type="text" id="lastname" name="lastname"/></br>
<label>*Password:</label>
<label class="validate" id="passwordError">at least 6 characters!</label>
<input type="password" id="password" name="password"/></br>
<label class="validate" id="used">Email has been used!</label></br>
<button id="Validate">Register</button>
</form>
////////////////////JS file////////////////
$(document).ready(function () {
$("#regi").click(function () {
var popup = $("#register").dialog({modal: true});
popup.show();
});
$("#Validate").click(function () {
validate();
});
});
function validate() {
var email = document.getElementById("email").value;
var error = $("#used");
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "backend.php?req=checkDuplicate&user=" + email, true);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
if (xmlhttp.responseText == 1) {//check if email existed in db, return 1
error.show();
console.log("find match! Do not proceed!!");
$('#submitForm').submit(false);
}
else {
error.hide();
console.log("Redirect");
$('#submitForm').submit(true);//only here should do redirect
}
}
}
xmlhttp.send();
}
First of all, you should read some documentation about jQuery submit.
function validate() {
var email = document.getElementById("email").value;
var error = $("#used");
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "backend.php?req=checkDuplicate&user=" + email, true);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
if (xmlhttp.responseText == 1) {//check if email existed in db, return 1
error.show();
console.log("find match! Do not proceed!!");
// if you don't want to proceed just don't call submit !
// $('#submitForm').submit(false);
}
else {
error.hide();
console.log("Redirect");
//$('#submitForm').submit(true);//only here should do redirect
// remove the true value using jQuery to trigger the submit
$('#submitForm').submit();
}
}
}
xmlhttp.send();
}
Using jQuery.get you can have same result with that :
function validate() {
var email = $("#email").val();
var error = $("#used");
var url = "backend.php?req=checkDuplicate&user=" + email;
$.get(url , function( data ){
if(data===1){
error.show();
console.log("find match! Do not proceed!!");
}else{
error.hide();
console.log("Redirect");
$('#submitForm').submit()
}
});
}
I hope this will help you.
I want to use Javascript to validate my input username if it is correct or not showing result on realtime.
Here is index.html code:
<html>
<head>
<script>
function showHint(str){
if(str.length == 0){
document.getElementById("hint").innerHTML = "";
}else{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById("hint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POST", "demo3.php?input=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
Type a username: <br>
<input id="hint" type="text" name="username" oninput="showHint(this.value)"><p id="hint"></p>
</body>
</html>
Here is the demo3.php code:
<html>
<head>
</head>
<body>
<?php
$mysqli = new mysqli("localhost","root","123456","mini");
$username = $mysqli->real_escape_string($_REQUEST['input']);
$sql = "SELECT username FROM `users` WHERE username='$username'";
$result = $mysqli->query($sql);
if($result->num_rows){
echo "Valid username";
}else{
echo "Invalid username";
}
?>
</body>
</html>
I use the oninput event example from w3cschools, and I am wondering why my result do not show what I expect?
And if I assign $username with static variable, demo3.php result seems to be correct feedback, not from index.html.
Plus, I am wondering how to validate multiple forms, such as password and email within the same validation php file.
Ex:
input1 -> check username ->output check result
input2-> check password ->output check result
input3-> check email->output check result
New to javascript.All the tutorial seems to provide only one demo, not multiple examples.
Since your input is being placed in the URL, you will need to use the GET parameter other than POST (which does not use the URL):
xmlhttp.open("GET", "demo3.php?input=" + str, true);
Now it should be able to pickup your input for $_REQUEST['input'] or $_GET['input']
The problem is that you are using the ID "hint" twice. ID is a unique identifier, so you NEVER should use it more than once in the same page. And you should avoid using inline handlers. You need to change your javascript to:
<script>
window.onload = function() {
function showHint(str){
if(str.length == 0){
document.getElementById("hint").innerHTML = "";
}else{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById("hint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POST", "demo3.php?input=" + str, true);
xmlhttp.send();
}
}
document.getElementById("hintInput").onkeyup = function() {
showHint(this.value)
}
}
</script>
and your HTML:
<input id="hintInput" type="text" name="username"><p id="hint"></p>
You can get rid of window.onload if you place your script tag before closing the body tag.
In the below JavaScript, I am unable to send radio button data to PHP. Example: if radio button "Mother" is selected, the selected value of "Mother" should be send through ajax. But my problem is that I am unable to send the selected radio button value from ajax. I Google'd it, but I am unable to solve it. Can you share the code for solving this problem.
This is the JavaScript code:
<script language="JavaScript">
var HttPRequest = false;
function doCallAjax() {
var test = $("#txtUsername").val();
var test2 = $("#txtPassword").val();
if(test=='')
{
alert("Please Enter Register Number");
}
else if(test2=='')
{
alert("Please Enter Date Of Birth");
}
else
{
HttPRequest = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
HttPRequest = new XMLHttpRequest();
if (HttPRequest.overrideMimeType) {
HttPRequest.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
HttPRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
HttPRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!HttPRequest) {
alert('Cannot create XMLHTTP instance');
return false;
}
**// iam using this For Validation to send data to different urls based on selection**
var game1 = $('input[type="radio"]:checked').val();
if (game1 === "Mother") {
var url = 'http://localhost:9999/check.php';
}
else if (game1 === "Father") {
alert('Father');
}
else {
HttPRequest = false;
alert('select 1');
}
**this is Where ima stucked**
var pmeters = "tUsername=" + encodeURI( document.getElementById("txtUsername").value) +
"&tPassword=" + encodeURI( document.getElementById("txtPassword").value );
"&game=" + $('input[type="radio"]:checked').val();
HttPRequest.open('POST',url,true);
HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
HttPRequest.setRequestHeader("Content-length", pmeters.length);
HttPRequest.setRequestHeader("Connection", "close");
HttPRequest.send(pmeters);
HttPRequest.onreadystatechange = function()
{
if(HttPRequest.readyState == 3) // Loading Request
{
document.getElementById("mySpan").innerHTML = "Now is Loading...";
}
if(HttPRequest.readyState == 4) // Return Request
{
if(HttPRequest.responseText == 'Y')
{
window.location = 'success.html';
}
else if (HttPRequest.responseText == 'z')
{
document.getElementById("mySpan").innerHTML = "";
window.alert("bad registernumber or dob");
}
else if (HttPRequest.responseText == 'b')
{
document.getElementById("mySpan").innerHTML = "";
window.alert("userexist");
}
}
}
}
}
</script>
This is html code
<br/>
<input type="radio" name="game" value="Mother">Mother
<br />
<input type="radio" name="game" value="Father">Father
<br />
<input type="radio" name="game" value="Self">Self
<br />
<input type="radio" name="game" value="Other">Other
<br />
</table>
<br>
<input name="btnLogin" type="button" id="btnLogin" OnClick="JavaScript:doCallAjax();" value="Login">
First I would suggest you to use jQuery, because it is really simplier and better.
Then you can use the following code to post the checkbox/radio value:
$("#game").val()
Here you can find the really simple syntax for Ajax with jQuery.
Please remove $('input[type="radio"]:checked').val() and replace with a var game. Before that please use below code to get value of checked radio button in var game.
var elements = document.getElementsByName("game");
var game;
for(var i = 0; i < elements.length; i++ ){
if(elements[i].checked){
game = elements[i].value;
}
}
So now your code will look like
var pmeters = "tUsername=" + encodeURI( document.getElementById("txtUsername").value) +
"&tPassword=" + encodeURI( document.getElementById("txtPassword").value );
"&game=" + game;