I get this error while running an html file which contains a form. It is supposed to move to another screen after login.
GET http://mdsad.com/p.js?v=1373144857354
I cannot understand where I am going wrong in the code. It doesn't even enter the function that is called.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://static.stackmob.com/js/stackmob-js-0.9.1-bundled-min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Pocket Docket</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function nextpage() {
alert("function");
StackMob.init({
publicKey: "my_key",
apiVersion: 0
});
var u = document.getElementById('username').value;
var p = document.getElementById('password').value;
alert(u);
alert(p);
var user = new StackMob.User({
username: u,
password: p
});
user.login(false, {
success: function(model, result, options) {
alert("Success");
alert("Success");
window.open('newp1.html');
StackMob.isUserLoggedIn(u, {
yes: function() {
alert("Logged In!");
},
no: function() {
alert("Login Error!");
}
});
},
error: function(model, result, options) {
console.log(result);
alert("Login Error!");
}
});
};
</script>
</head>
<body>
<div id="topPan">
<div id="topHeaderPan"></div>
<div id="toprightPan"></div>
</div>
<div id="bodyPan">
<div id="bodyleftPan">
<h2>Pocket Docket</h2>
<p class="greentext">For Every Salesman</p>
<p>Pocket Docket is a means to simplify the working of the sales
department in a company.</p>
<p>For every salesperson, it is like a manager, assigning tasks and
recording progress, updating it on their profiles. Easier to manage,
higher the productivity.</p>
</div>
<div id="bodyrightPan">
<div id="loginPan">
<h2>Pocket Docket <span>login</span></h2>
<form action="" method="post">
<label>Login ID</label><input id="email" name="email" type=
"text"> <label>Password</label><input id="pass" name="pass"
type="password"> <input class="button" name="Input" onclick=
"nextpage()" type="submit" value="Login">
</form>
<ul>
<li class="nonregister">Forgot Password ?</li>
<li class="register">
Click Here
</li>
</ul>
</div>
<div id="loginBottomPan">
</div>
</div>
</div>
</body>
</html>
The error is in download.js (some file i don't know in the browser console).
Please tell me where is the error.
I figure out what was wrong with your code:
var u = document.getElementById('username').value;
var p = document.getElementById('password').value;
where your input Id's are 'email' and 'pass'
so change the above lines to :
var u = document.getElementById('email').value;
var p = document.getElementById('pass').value;
also
it's better to close "input" markup
Hope it works now.
Related
could you please help me find out what's wrong? After login, it is supposed to redirect you to another page, but nothing happens. The user name is: Joshua and the password is: Joshua#123.
<html>
<head>
<title>Login: MessengerX</title>
<link rel="stylesheet" type="text/css" href="C:\Users\Tania\Documents\Website\style.css">
<meta charset="UTF-8">
<meta name="description" content="HTML website called MessengerX. Send messages to anyone who has logged in.">
<meta name="author" content="Joshua Hurley">
<meta name="keywords" content="HTML, MessengerX, Joshua Hurley, Website, Supremefilms">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript">
var attempt = 3; // Variable to count number of attempts.
// Below function Executes on click of login button.
function validate() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username == "Joshua" && password == "Joshua#123") {
alert("Login successfully");
location.replace("www.youtube.com"); // Redirecting to other page.
} else {
attempt--; // Decrementing by one.
alert("You have " + attempt + " attempt left;");
// Disabling fields after 3 attempts.
if (attempt == 0) {
document.getElementById("username").disabled = true;
document.getElementById("password").disabled = true;
document.getElementById("submit").disabled = true;
return false;
}
}
}
</script>
<script src="js/login.js"></script>
</head>
<body>
<div class="imgcontainer">
<img src="C:\Users\Tania\Documents\Website\Screenshots\face.jpg" height="500" alt="Avatar" class="avatar">
</div>
<div class="container">
<div class="main">
<h1 style="color:"><b><i>Login: MessengerX</i></b></h1>
<form id="form_id" method="post" name="myform">
<label>User Name :</label>
<input type="text" name="username" id="username" />
<label>Password :</label>
<input type="password" name="password" id="password" />
<button type="submit" value="Login" id="submit" onclick="validate()" />
</form>
<b><i>Submit</i></b>
</div>
</div>
</body>
</html>
Try this:
window.location.replace("https://www.youtube.com")
You can move code inside window.addEventListener('load' or you can move script after dom at the end
Suggestion: use the entire URL with HTTP or HTTPS.
location.replace("https://www.youtube.com");
<script type="text/javascript">
window.addEventListener('load', (event) => {
var attempt = 3; // Variable to count number of attempts.
/// code here
});
</script>
As leonardofmed mentioned, better place your script just befor </body> closing tag,
because you need to load html first, so script can see elements, otherwise at it's start there is no elements yet, so this will cause error, as for redirecting you can use:
// Simulate a mouse click:
window.location.href = "http://www.w3schools.com";
// Simulate an HTTP redirect:
window.location.replace("http://www.w3schools.com");
use <form><button type="button" ... instead
<form><button type="submit" ... has its own logic ("magic"), which is doing the problem.
use protocol in url location.replace("https://www.youtube.com"), otherwise it's relative path
BTW never validate password on client!!!
Basically i find code on the internet to test and use it.
the problem is that when i reload the page, the data disappears.
what i want to happen is for the data or the value to just stay.
Thanks guys
Here is the code in index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pass Data to PHP using AJAX without Page Load</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Enter Some Data Pass to PHP File</h2>
<div class="row">
<div class="col-md-3">
<form>
<div class="form-group">
<input type="text" id="pass_data" class=" form-control">
<input type="button" class="btn btn-success" onclick="passData();" value="Set">
<p id="message"></p>
</div>
</form>
</div>
</div>
</div>
</body>
<script type="text/javascript">
function passData() {
var name = document.getElementById("pass_data").value;
var dataString = 'pass=' + name;
if (name == '') {
alert("Please Enter the Anything");
} else {
// AJAX code to submit form.
$.ajax({
type: "POST",
url: "post.php",
data: dataString,
cache: false,
success: function(data) {
$("#message").html(data);
},
error: function(err) {
alert(err);
}
});
}
return false;
}
</script>
</html>
and here is my php code
<?php
$pass=$_POST['pass'];
echo json_encode($pass);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pass Data to PHP using AJAX without Page Load</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Enter Some Data Pass to PHP File</h2>
<div class="row">
<div class="col-md-3">
<form>
<div class="form-group">
<input type="text" id="pass_data" class=" form-control">
<input type="button" id="success" class="btn btn-success" value="Set">
<p id="message"></p>
</div>
</form>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$("#success").click(function () {
var name = document.getElementById("pass_data").value;
var dataString = 'pass=' + name;
if (name == '') {
alert("Please Enter the Anything");
} else {
// AJAX code to submit form.
$.ajax({
type: "POST",
url: "post.php",
data: dataString,
cache: false,
success: function (data) {
$("#message").html(data);
localStorage.setItem("data",data);
},
error: function (err) {
alert(err);
}
});
}
return false;
})
$(document).ready(function () {
var someVarName = localStorage.getItem("data");
console.log(someVarName)
$("#message").html(someVarName);
});
</script>
</html>
First of all i changed your js code to use more jquery syntax, as you already have included it (i trigger the on click event on the script and i don't put it in in html). After that in order not to lose your variable after refresh on ajax success i pass the value of data to localstorage, and after refresh (on document ready) i retrieve it and display it in the label.
Of course every time you put a new value and display it, it over-writes the previous one, so after refresh you display the latest value put in your input field.
I am not sure I understand what you mean but...
Before this line:
<!DOCTYPE html>
enter
<?php session_start(); ?>
In this line add
<input type="text" id="pass_data" class=" form-control" value="<?php echo $_SESSION['VAL']; ?>">
and in your php file:
<?php session_start();
$pass=$_POST['pass'];
$_SESSION['VAL'] = $pass;
echo json_encode($pass);
?>
I'm developing a website through Parse.com JavaScript. I'm working on the login page and I found this nice template: http://designscrazed.org/css-html-login-form-templates/
However, when I try to modify the submit part of this page to be processed through Parse.com, the page auto-refreshes before the Parse.com transaction could be made. I know the JavaScript file is properly referenced though.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Prindle Login</title>
<!-- PARSE-->
<link href="dist/css/login-style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="dist/js/parse/login-js.js"></script>
</head>
<body>
<div class="login-card">
<h1>Prindle Login</h1><br>
<form id="form">
<input id="prindle_log_on_username" type="text" name="user" placeholder="Username">
<input id="prindle_log_on_password" type="password" name="pass" placeholder="Password">
<input id="prindle_log_on" type="submit" class="login login-submit" value="Log In">
</form>
<div class="login-help">
Register • Forgot Password
</div>
</div>
</body>
</html>
JS:
// dynamically adding to a document: http://www.sanwebe.com/2013/03/addremove-input-fields-dynamically-with-jquery/comment-page-1
$(document).ready(function() {
alert('hello');
Parse.$ = jQuery;
Parse.initialize("APP ID", "JS ID")
});
// called when the user clicks the log in button
$('#prindle_log_on').on("click",function(e) {
e.preventDefault();
alert("form has been submitted.");
// perform onclick
// get the values of the input fields for username and password
var username = $('#prindle_log_on_username').val();
var password = $('#prindle_log_on_password').val();
// try to log in
Parse.User.logIn(username, password,
{
success: function(user) {
// Do stuff after successful login.
alert('user found');
},
error: function(user, error)
{
// The login failed. Check error to see why.
alert('log in failed');
}
});
});
I never get the balloon saying "form has been submitted." Help?
EDIT: (thanks to moogs)
<div class="login-card">
<h1>Prindle Login</h1>
<br>
<form id="form">
<input id="prindle_log_on_username" type="text" name="user" placeholder="Username">
<input id="prindle_log_on_password" type="password" name="pass" placeholder="Password">
<input id="prindle_log_on" type="submit" class="login login-submit" value="Log In">
</form>
<div class="login-help"> Register • Forgot Password
</div>
</div>
$(document).ready(function () {
$('#prindle_log_on').on("click", function (e) {
e.preventDefault();
alert("form has been submitted.");
});
});
Place the click handler inside $(document).ready because $('#prindle_log_on') will not be found until the body has rendered.
http://jsfiddle.net/moogs/L62z4k5o/1/
I have been been working on an app in phonegap, wanting to make calls to the quickblox backend service.
The app successfully gets the app token and creates an API session but the user.create code fails - here is my code from index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
<!-- -->
<link rel="stylesheet" href="css/themes/.css" />
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile.structure-1.4.3.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<script src="js/config.js"></script>
<script src="js/quickblox.js"></script>
</head>
<body>
<div style="width:100%;">
<h1 style="text-align:center;">The Activity Network</h1>
</div>
<div>
<div data-role="tabs" id="tabs">
<div data-role="navbar">
<ul>
<li>Login</li>
<li>Register</li>
</ul>
</div>
<div id="one">
<h2>Login</h2>
<input type="text" id="new_login" placeholder="Username" />
<input type="password" id="new_password" placeholder="Password" />
<input id="auth" type="submit" value="Submit" onclick="window.location='sportsSelector.html'" />
</div>
<div id="two">
<h2>Register</h2>
<input type="text" id="login" placeholder="Username"/>
<input type="email" id="email" placeholder="E-Mail Address"/>
<input type="email" id="confirmEmail" placeholder="Confirm E-Mail Address"/>
<input type="password" id="password" placeholder="************"/>
<input type="password" value="confirmPassword" placeholder="************"/>
<input id="register" type="submit" value="Submit" />
</div>
</div>
</div>
<!-- Cordova reference, this is added to your app when it's built. -->
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/index.js"></script>
<script>
$(document).ready(function () {
QB.init(QBAPP.app_id, QBAPP.auth_key, QBAPP.auth_secret);
//console.log(QBAPP.app_id, QBAPP.auth_key, QBAPP.auth_secret);
QB.createSession(function (err, result) {
console.log(result);
// callback function
});
});
var username;
var password;
var email;
$('#register').click(function () {
console.log("Ready! Getting the user details.");
username = document.getElementById('login').value;
password = document.getElementById('password').value;
email = document.getElementById('email').value;
console.log("Username: ", username);
console.log("Password: ", password);
console.log("E-Mail: ", email);
var params, connection;
params = {
login: username,
password: password,
email: email
};
//console.log("Params: ", params);
create(params);
});
function create(params) {
console.log("Creating new user");
QB.users.create(params, function (err, result) {
console.log("Result: ", result);
// callback function
});
}
</script>
</body>
</html>
If anyone can spot what Im missing then I'd really appreciate it. Currently, it spits out the following in the console:
XHR finished loading: POST "http://localhost:4400/ripple/xhr_proxy?tinyhippos_apikey=ABC&tinyhippos_rurl=https%3A//users.quickblox.com/users.json".
[DEBUG] Add new user: POST https://users.quickblox.com/users.json?user[owner_id]=&user[login]=Username&email[email]=undefined&user[password]=Password&token=undefined index.html:197
Failed to load resource: the server responded with a status of 500 (Internal Server Error) http://localhost:4400/ripple/xhr_proxy?tinyhippos_apikey=ABC&tinyhippos_rurl=https%3A//users.quickblox.com/users.json
I think one of your other scripts (local) might be interfering. Copied your code to jsfiddle, added some dummy credentials and it worked just fine.
$(document).ready(function () {
var QBAPP = {
app_id: replace_with_yours,
auth_key: replace_with_yours,
auth_secret: replace_with_yours
};
QB.init(QBAPP.app_id, QBAPP.auth_key, QBAPP.auth_secret);
QB.createSession(function (err, result) {
console.log(result);
// callback function
});
});
var username;
var password;
var email;
$('#register').click(function () {
console.log("Ready! Getting the user details.");
username = document.getElementById('login').value;
password = document.getElementById('password').value;
email = document.getElementById('email').value;
console.log("Username: ", username);
console.log("Password: ", password);
console.log("E-Mail: ", email);
var params, connection;
params = {
login: username,
password: password,
email: email
};
create(params);
});
function create(params) {
console.log("Creating new user");
QB.users.create(params, function (err, result) {
console.log("Result: ", result);
// callback function
});
}
Here is your request:
POST https://users.quickblox.com/users.json?user[owner_id]=1622883&user[login]=Username&email[email]=undefined&user[password]=Password&token=undefined
At least something wrong with email and token:
email[email]=undefined
token=undefined
try to check these parameters carefully
I am getting the following error when I am trying to run this code on the browser.
"Error response
Error code: 501
Message: Unsupported method ('POST').
Error code explanation: 501 - Server does not support this operation."
The following errors were in the browser console:
"1. Failed to load resource: the server responded with a status of 404 (File not found)
'http://localhost:8002/js/jquery-1.3.2.min.js'
Resource interpreted as Script but transferred with MIME type text/plain:
pquery-0.0.1.js:1
Failed to load resource http://mdsad.com/p.js?v=1372783767755
undefined login.html:61
POST
http://localhost:8002/login.html 501 (Unsupported method ('POST')) login.html:1
Resource interpreted as Script but transferred with MIME type text/plain:
pquery-0.0.1.js:1
GET http://mdsad.com/p.js?v=1372783801500 download.js:33"
The login of users via stackmob also fails. I get a 'Failure' alert message. Here is the code:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://static.stackmob.com/js/stackmob-js-0.9.1-bundled-min.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Login Form</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$(".username").focus(function() {
$(".user-icon").css("left","-48px");
});
$(".username").blur(function() {
$(".user-icon").css("left","0px");
});
$(".password").focus(function() {
$(".pass-icon").css("left","-48px");
});
$(".password").blur(function() {
$(".pass-icon").css("left","0px");
});
});
</script>
<script type="text/javascript">
function nextpage(form){
StackMob.init({
publicKey:"my_key",apiVersion:0
});
var u=document.getElementById('username').value;
var p=document.getElementById('password').value;
var user = new StackMob.User({ username: u, password: p});
user.login(false, {
success: function(model, result, options) {
alert("Success");
StackMob.isUserLoggedIn(form.username.value, {
yes: function() { alert("Yes"); },
no: function() {
alert("No");}
});
},
error: function(model, result, options) {
console.log(result);
alert("Failure");//or print out the error
} }); };
</script>
</head>
<body>
<div id="wrapper">
<div class="user-icon"></div>
<div class="pass-icon"></div>
<form name="login-form" class="login-form" action="" method="post">
<div class="header">
<h1>Login Form</h1>
<span>Fill in the details</span>
</div>
<div class="content">
<input id="username" name="username" type="text" class="input username" value="Username" onfocus="this.value=''" />
<input id="password" name="password" type="password" class="input password" value="Password" onfocus="this.value=''" />
</div>
<div class="footer">
<input type="submit" name="submit" value="Login" class="button" onclick="nextpage(this.form)"/>
<input type="submit" name="submit" value="Register" class="register" />
</div>
</form>
</div>
<div class="gradient"></div>
</body>
</html>
However, I am sure about the stackmob part because it worked well in a simple code of mine. Here is the working simple code:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://static.stackmob.com/js/stackmob-js-0.9.1-bundled-min.js"></script>
<script type="text/javascript">
function nextpage(form){
StackMob.init({publicKey:"my_key",apiVersion:0});
var u=document.getElementById('username').value;
var p=document.getElementById('password').value;
user.login(false, {
success: function(model, result, options) {
alert("Success");
StackMob.isUserLoggedIn(form.username.value, {
yes: function() { alert("Yes"); },
no: function() {
alert("No");
}
});
},
error: function(model, result, options) {
console.log(result);
alert("Failure");//or print out the error
}
});
};
</script>
</head>
<body>
<form>
<table>
<tr><td>Username</td><td><input id="username" type="text"></td></tr>
<tr><td>Password</td><td><input id="password" type="text"></td></tr>
<tr><input type="button" value="LOGIN" onclick="nextpage(this.form)"></tr>
</table>
</form>
</body>
</html>
Can someone please tell me where am I going wrong?
You are running a local server on port 8802 but the javascript file "jquery-1.3.2.min.js" is not at the location specified, hence the 404 error.
The 501 error is because the server you are using (presumably something like simpleHTTPServer) doesn't support POST requests.
To resolve that error you need to use a server that supports POST requests (e.g. Apache, IIS).
Your importing Jquery twice, and two different versions, this could add all sorts of strange issues assuming the 404 is inaccurate.
Remove this line:
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
If nothing else it will clear the 404