I am a learner in phonegap and i have done a simple login page using html, css and Javascript.
I have two edit texts for entering user id and password.
I have not written the onclick function for the button click.
Here is the login.html code:
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script>
function onLoad(){
document.addEventListener("deviceready", onDeviceReady, true);
}
function onDeviceReady(){
navigator.notification.alert("PhoneGap is working");
}
function validate(){
var name = document.getElementById("usrname").value;
var pwd = document.getElementById("usrpswd").value;
if(name=="aaa" && pwd=="aaa"){
localStorage.name = name;
localStorage.password = pwd;
alert(name);
window.open("display.html");
}else{
alert("Error capturing data");
}
}
function reset(){
document.getElementById("usrname").value = "";
var pwd = document.getElementById("usrpswd").value = "";
}
</script>
<meta name="viewport", initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
</head>
<body onload="onLoad();">
<div data-role="header" data-position="fixed" data-theme="a" data-id="mainHeader"><h3 style="width:480px;">Login</h3></div>
<div class="bg" id="login">
<form name="login" id="formlogin" method="post" action="" accept-charset="utf-8" style="background:color="#cb1f72">
<br/>
<br/>
<br/>
<div class="inputcredentials">
<label>USER NAME:</label>
<input type="text" name="username" id="usrname"/>
<br />
<br/>
<br/>
<label>PASSWORD:</label>
<input type="password" name="password" id="usrpswd" style="margin-left:6px"/>
<br />
<br/>
<br/>
<button class="submit" name="submit" onclick="validate()">Submit</button>
<button class="reset" name="reset" onclick="reset()">Reset</button>
</div>
</form>
</div>
</body>
</html>
When i click on the buttons the data what i have entered in the edit text gets reset.
What is the reason behind this?
It might be that your form is submitting. This will result in a page reload.
Related
I currently create a PHP Login using Joget SSO. The Joget already have its own script of SSO. I follow the steps and if the username and password is matched, it will alert "login sucessfully" else, it will alert "login failed". Below is my code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Login Form</h2>
<form >
<div class="imgcontainer">
<img src="img_avatar2.png" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="username" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit" onclick="loginCallback()">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot password?</span>
</div>
</form>
</body>
</html>
<script type="text/javascript" src="http://localhost:8080/jw/js/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://localhost:8080/jw/js/json/util.js" ></script>
<script type="text/javascript" >
$(document).ready(function(){
var loginCallback = {
success : function(response){
if(response.username != "roleAnonymous"){
alert("login successfully");
}else{
alert("login fail");
}
}
};
AssignmentManager.login('https://workflow.topglove.com:10443/jw/web/json/directory/user/sso', 'admin', 'admin', loginCallback);
});
</script>
loginCallback is an object.You can either make it as a function or use loginCallback.success() inide your onclick.
Also I doubt if the control goes inside document.ready method.You can add a console inside and check if it is declaring loginCallback variable.
Try the below
function loginCallback() {
success : function(response){
if(response.username != "roleAnonymous"){
alert("login successfully");
}else{
alert("login fail");
}
}
};
AssignmentManager.login('https://workflow.topglove.com:10443/jw/web/json/directory/user/sso', 'admin', 'admin', loginCallback());
I am trying to create a utility that will check if our site is down. The only way to do that is to login and if nothing is returned then the site is down. I've gotten it to the point where it will auto login, but not sure how to get it to check if the login was successful. Anyone got an idea?
<HTML>
<HEAD>
<TITLE>test Login</TITLE>
<script>
function loginForm() {
document.myform.action = "http://example.com";
document.myform.submit();
}
</script>
</HEAD>
<BODY onLoad="loginForm()">
<form action="http://example.com" class="uni-form" method="post" name="_58_fm">
<input name="_58_redirect" type="hidden" value="">
<input id="_58_rememberMe" name="_58_rememberMe" type="hidden" value="false">
<fieldset class="block-labels"> <div class="ctrl-holder">
<label for="_58_login">Email Address</label>
<input name="_58_login" type="text" value="emailaccount#email.com">
</div><div class="ctrl-holder"> <label for="_58_password">Password</label>
<input id="_58_password" name="_58_password" type="password" value="UberSecretPassword">
<span id="_58_passwordCapsLockSpan" style="display: none;">Caps Lock is on.</span>
</div><div class="button-holder">
<input id="submit" type="submit" value="Sign In">
</div></fieldset>
</FORM>
<script>
window.onload = function () {
document.getElementById('submit').click();
}
function checker(){
if(<-- what to put here --> =" You are signed in as "){
// Not sure what to put here
}
}
</script>
</BODY>
</HTML>
I am getting a really weird behaviour where I noticed that jquery only executes if there is a dummy javascript prior to it.
With javascript (with alerts command) coded before the jquery scripts
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<jsp:directive.page contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" session="true" language="java" />
<jsp:output doctype-root-element="html"
doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
omit-xml-declaration="true" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="/css/goeasyhome_logo.css" />
<link rel="stylesheet" type="text/css" href="/css/login.css" />
<script src="/javascript/jquery-2.2.1.min.js"></script>
<script type="text/javascript">
alert('x');
</script>
<script type="text/javascript">
$(document).ready(function() {
$('input[name="j_username"]').focus();
$('#email input').on("invalid", function(event) {
if (!$(this).val()) {
this.setCustomValidity("Please fill in this field 2");
} else {
this.setCustomValidity("Please enter a valid email address 2");
}
});
$('#email input').on("change", function(event) {
if ($(this).val()) {
this.setCustomValidity("");
}
});
});
</script>
</head>
<body>
<br />
<br />
<br />
<header>
<div id="header-center-11x12">
<img id="goeasyhome_logo_12x12" src="/images/goeasyhome_basic.png"
alt="goeasyhome" />
</div>
</header>
<br />
<div id="main-content">
<form method="post" action="j_security_check">
<div id="email">
<input type="email" placeholder="Email Address" name="j_username"
pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}"
required="required" />
</div>
<div id="password">
<input type="password" placeholder="Password" name="j_password"
required="required" />
</div>
<br />
<div id="signin">
<input type="submit" value="Sign In" />
</div>
</form>
<br /> <a class="passwdsignup-color" href="/forgotpassword.jsp">Forgot
Password? </a> <a class="passwdsignup-color signup-position"
href="/signup.jsp">Sign Up?</a>
</div>
When i submit without any data e.g. no email address, the correct validation message pops up as shown below.
With javascripts (alerts command) commented out.
<head>
<link rel="stylesheet" type="text/css" href="/css/goeasyhome_logo.css" />
<link rel="stylesheet" type="text/css" href="/css/login.css" />
<script src="/javascript/jquery-2.2.1.min.js"></script>
<!-- <script type="text/javascript">
alert('x');
</script> -->
<script type="text/javascript">
$(document).ready(function() {
$('input[name="j_username"]').focus();
$('#email input').on("invalid", function(event) {
if (!$(this).val()) {
this.setCustomValidity("Please fill in this field 2");
} else {
this.setCustomValidity("Please enter a valid email address 2");
}
});
:
:
You'll noticed the default message 'Please fill in this field' instead of the 'Please fill in this field 2' is displayed. The jquery command didn't run.
This is bizzare to me.
Any help would be great.
Here's the jsfiddle https://jsfiddle.net/yapkm01/3f321g84/
Refer the jquery to the code. I've pasted the whole page here. It works great. Please let me know.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="main-content">
<form method="post" action="j_security_check">
<div id="email">
<input type="email" placeholder="Email Address" name="j_username"
pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}"
required="required" />
</div>
<div id="password">
<input type="password" placeholder="Password" name="j_password"
required="required" />
</div>
<br />
<div id="signin">
<input type="submit" value="Sign In" />
</div>
</form>
<br /> <a class="passwdsignup-color" href="/forgotpassword.jsp">
Forgot
Password?
</a> <a class="passwdsignup-color signup-position"
href="/signup.jsp">Sign Up?</a>
</div>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.js"></script>
<script type="text/javascript">
//alert('x');
$(document).ready(function() {
$('input[name="j_username"]').focus();
$('#email input').on("invalid", function(event) {
if (!$(this).val()) {
this.setCustomValidity("Please fill in this field 2");
} else {
this.setCustomValidity("Please enter a valid email address 2");
}
});
$('#email input').on("change", function(event) {
if ($(this).val()) {
this.setCustomValidity("");
}
});
});
</script>
</body>
</html>
I have form validation setup and working as you can see (using javascript), the only problem is that when someone successfully logs in, I have it redirect to login.php but if someone directly visits mysite.com/login.php they don't need a password to login. If there is any type of php code I need to add then that's fine, another option would be to change the function for the javascript on a successful login. Any info will help!
I have a password only form; here is my code:
<!doctype html>
<html>
<head>
<meta name="googlebot" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="js/account.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css">
<meta charset="utf-8">
<title>The Order of Aztec</title>
</head>
<body>
<div id="page" align="center">
<br /><br /><br />
<div align="center"><img src="images/aztec-logo.png" width="256" height="198" alt="Aztec"/></div>
<br /><br /><br /><br /><br />
<div id="error-division"></div>
<br />
<form id="myForm" align="center">
<div align="center"><input placeholder="Password" name="pword" id="pword" type="password" /></div>
<br />
<div align="center" id="agree-box"><input id="agree-box-input" onClick="login();return false;" type="checkbox">Agree that you are part of the steam group "The order of aztec."</input></div>
<br />
<div align="center"><input id="submit" type="submit" /></div>
</form>
<div id="ack"></div>
</div>
</body>
<script type="text/javascript">
function login()
{
var pass = document.getElementById('pword');
var corpass = "t";
var agree = document.getElementById('agree-box-input');
if(pass.value == corpass && agree.checked == true)
{
window.location = "login.php"
} else {
document.getElementById("error-division").innerHTML = "Wrong password or agreement not checked. Please try again.";
}
}
</script>
</html>
add if statement in your login.php
<?php
if(isset($_POST['your_username']) && isset($_POST['your_password'])){
// do your activities
}else{ ?>
<script type="Javascript">
alert("Your username / password is incorrect");
window.location = "your_validation_page.php";
</script>
<?php } ?>
I am creating an app to send an object to a class in Parse, but the data in the form is being passed and nothing happens. I can submit data directly from the function showAlert, but no alert appears after setNotification and and showALert is used. Here is my code:
<!doctype html>
<head>
<meta charset="utf-8">
<title>My Parse App</title>
<meta name="description" content="My Parse App">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.18.min.js"></script>
</head>
<body>
<div id="main">
<h1>You're ready to use Parse!</h1>
<p>Read the documentation and start building your JavaScript app:</p>
<ul>
<li>Parse JavaScript Guide</li>
<li>Parse JavaScript API Documentation</li>
</ul>
<div style="display:none" class="error">
Looks like there was a problem saving the test object. Make sure you've set your application ID and javascript key correctly in the call to <code>Parse.initialize</code> in this file.
</div>
<div style="display:none" class="success">
<p>You're message has now been submited.'</p>
</div>
</div>
<div class="login">
<form class="login-form" name="login-form">
<h2>Compose Message</h2>
<input type="text" name="school" id="school" placeholder="School Code" />
<p> </p>
<input type="text" name="name" id="name" placeholder="Name" />
<p> </p>
<input type="text" name="password" id="password" placeholder="Message" />
<p> </p>
<input type="button" value="Set Notification" onClick="setMessage();">
<p> </p>
<input type="button" value="Send Notification" onClick="showAlert();">
</form>
</div>
<script type="text/javascript">
function setMessage (){
var textField = form.school.value
var textField1 = form.name.value
var textField2 = form.password.value
}
function showAlert() {
Parse.initialize("appkey", "javascript key");
var TestObject = Parse.Object.extend(textField);
var testObject = new TestObject();
testObject.save({teacher: textField1), message:textField2)}, {
success: function(object) {
$(".success").show();
alert('The Message has been sent!');
},
error: function(model, error) {
$(".error").show();
alert('There has been an error.');
}
});
}
</script>
</body>
</html>
I am dusting off my Javascript knowledge to create an page that syncs to an iOS app. Any help is greatly appreciated!