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/
Related
So just starting coding in html and js, need some help as to why the page isn't redirecting after validation. The page just resets after logging in, and i'm trying to get it to redirect to login.html. Any help please?
DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Task Manager</title>
<link rel="stylesheet" href="style.css">
<script src ="login.js"> </script>
</head>
<body>
<div class="center">
<h1>Task Manager</h1>
<form method="post">
<div class="txt_field">
<input type="text" required name="" id="username">
<span></span>
<label>Username</label>
</div>
<div class="txt_field">
<input type="password" name="" id="password">
<span></span>
<label>Password</label>
</div>
<div class="pass">Forgot Password?</div>
<input type="submit" name="" value="Login" onclick="validate()">
<div class="signup_link">
Not a member? Signup
</div>
</form>
</div>
</body>
</html>
Javascript:
function validate()
{
var username=document.getElementById("username").value;
var password=document.getElementById("password").value;
if(username=="admin"&& password=="user")
{
alert("login succesfully");
window.location.href = "./todo.html";
return false;
}
else
{
alert("login failed");
return false;
}
}
Your problem is in the java script in the return part so I don't remember exactly how to end the redirect in true
You can change
window.location.href = "./todo.html";
to
window.location = "./todo.html";
This is fairly simple, I'm trying to make the login button work, and redirect to a different file (placeholder.html) if what is in the email and password match the following:
Login: Admin
Password: Password123
I have yet to get the login button to work in the first place to redirect, and id like to keep it as a button element by using, the 'onlick=' with a function in js or an id for now.
Thank you so much for the help :)
Apologies if this is a little sloppy, one of my first times asking for help here haha
Here is what I had so far, which dent work fully:
<!DOCTYPE html>
<html>
<head>
<title>Login page</title>
<link href="style." rel="stylesheet" type="text/css" />
<script src="script.js"></script>
</head>
<body>
<div class="login-page">
<div name="login" class="form">
<div class="title login" style="font-size: 25px; font-family: Roboto; padding-bottom: 25px;">
Login Form
</div>
<form class="login-form" action="login.php" method="post">
<input type="email_" placeholder="email"/>
<input type="password" placeholder="password"/>
<button id="login_button">login</button>
<p class="message" style="font-family: Roboto, sans-serif;">Not registered?
Create an account
</p>
</form>
</div>
</div>
</body>
<script type="text/javascript">
document.getElementById("login_button").onclick = function () {
location.href = "#placeholder";
};
</script>
</html>
Welcome to StackOverflow, there are a few things that I wanted to cover here as part of the answer.
The function is running onClick, the way you're using location.href is invalid though. You are redirecting to an anchor (it starts with a #), The way this is implemented in browsers is that it will redirect your scroll positioning to the top of the element with ID, if you had an element on your page with the ID of placeholder (and the page height was more than 100%) it would move the scroll position of the page, not redirect.
I believe you're looking for
location.href = "placeholder.html";
You wanted the user to be redirected based on the username and password that they enter, I will provide the solution below but before that, I wanted to say that this isn't secure, the username and password are visible inside the source code and if you planned to use this to hide important information it will not work because the code is visible to anyone who accesses the webpage, you should be using a server-side language such as NodeJS or PHP to hide that information, I assume that this is just for practise/learning though.
The first thing you'll want to do is get the username and password.
Your <input type="email_" placeholder="email"/> should be <input type="text" placeholder="email"/>. For some reason you put the type as what looks to be a typo email_ and not email but since you said the username was admin that is just text.
I would start by giving an ID to both the username and password elements.
<input type="email" id="username" placeholder="email"/>
<input type="password" id="password" placeholder="password"/>
Then inside your function you can change it to check and redirect like below
document.getElementById("login_button").onclick = function () {
const username = document.getElementById("username").value
const password = document.getElementById("password").value
if (username === 'Admin' && password === 'Password123') {
location.href = "placeholder.html";
}
};
That will also be case-sensitive.
There are a couple of ways that you could do this, here is a simple example:
<!DOCTYPE html>
<html>
<head>
<title>Login page</title>
<link href="style." rel="stylesheet" type="text/css" />
<script src="script.js"></script>
</head>
<body>
<div class="login-page">
<div name="login" class="form">
<div class="title login" style="font-size: 25px; font-family: Roboto; padding-bottom: 25px;">
Login Form
</div>
<form class="login-form" action="login.php" method="post">
<input type="email_" placeholder="email"/>
<input type="password" placeholder="password"/>
<button id="login_button" onclick="login()">login</button>
<p class="message" style="font-family: Roboto, sans-serif;">Not registered?
Create an account
</p>
</form>
</div>
</div>
</body>
<script type="text/javascript">
function login() {
// Login logic here
if (loginSuccesful) {
window.location.href = "/placeholder.html";
}
}
</script>
</html>
Is this code correct? I want the 'submit' to validate the field (to make sure a value has been entered) and if this is correct (there is a value) then fade and display.
Currently, the form fades even when no value is entered? I feel I'm missing something really simple here!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
<link rel='stylesheet' type='text/css' href='styles.css' />
<meta charset="utf-8"-->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
</script>
</head>
<body>
<div id="sidebarf">
<form id="sidebarform" name="myForm" onsubmit="return validateForm()" method="post">
<input type="text" id="sidebarusername" name="fname" placeholder="Name" required>
<input type="submit" id="sidebarformsubmit" value="Submit">
</form>
</div>
<script>
$("#sidebarformsubmit").click( function(){
$("#sidebarform").fadeOut("slow", function(){
$("#sidebarf").html("hello " + $("#sidebarusername").val() )
});
});
</script>
</body>
</html>
Judging by your comment on the other answer, you don't care if this actually gets submitted, so you could do the following:
HTML:
<div id="sidebarf">
<form id="sidebarform" name="myForm" method="post">
<input type="text" id="sidebarusername" name="fname" placeholder="Name" />
<input type="submit" id="sidebarformsubmit" value="Submit" />
</form>
JS:
$(document).ready(function() {
$('#sidebarform').on('submit', function() {
if ($('#sidebarusername').val() == '') {
alert('First name must be filled out');
return false;
}
$("#sidebarform").fadeOut("slow", function(){
$("#sidebarf").html("hello " + $("#sidebarusername").val() );
});
return false;
});
});
Working example:
http://jsfiddle.net/3z5x8/
Your validation is bound to the submit event. The click event will always be fullfilled.
Bind your handler to the submit event also
$("#sidebarformsubmit").submit( function(){.....
Unless you are submitting with ajax the form will cause a page refresh also which means your fade and show new html won't work
basically the question is mirror of previous one in stack overflow. This form works but after a success alert, I don't find mail sent to a designated email id.
after i click the send button if i get success alert that means mail has been sent successfully, but when i check name#example.com (dummy) i should see mail in inbox but cant find one. What may be the problem. Am i doing wrong?
contact.html
<html>
<head>
<link rel = "stylesheet" href="css/theme.min.css"/>
<link rel="stylesheet" href="css/jquery.mobile-1.2.1.css"/>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.2.1.min.js"></script>
<script type="text/javascript">
// When the document has loaded...
$(document).ready(function() {
// Bind this action as a function to be executed when the button is clicked...
$('input[type="button"][value="send"]').click(function() {
$.post('http://www.techmagzine.com/contact_us.php', {
// These are the names of the form values
// EDIT: You have the wrong ids on these...
FirstName: $('#txtfullname').val(),
LastName: $('#txtemail').val(),
Email: $('#txtcontact').val(),
MessageText: $('#txtmessage').val()
// HTML function
}, function (html) {
// Place the HTML in a astring
var response=html;
// PHP was done and email sent
if (response=="success") {
alert("Message sent!");
clear();
} else {
// Error postback
alert("Please fill all fields!");
return false;
}
});
});
});
</script>
</head>
<body>
<div data-role="page" id="front" data-theme="b">
<div class="header" id="header" data-role="header">
<h3>Contact-Us</h3>
</div>
<div data-role="content">
<label for="txtfullname">Firstname</label>
<input id="txtfullname" name="FirstName" type="text" placeholder="required" required />
<label for="txtemail">Lastname</label>
<input id="txtemail" name="LastName" type="text" placeholder="required" required />
<label for="txtcontact">Email</label>
<input id="txtcontact" name="Email" type="email" placeholder="required" required />
<label for="txtmessage">Message</label>
<textarea id="txtmessage" name="MessageText" placeholder="required" rows="10" required ></textarea>
<input type="button" value="send"/>
</div>
</div>
</body>
</html>
contact_us.php
<?php
// VARS
$FirstName=$_POST["FirstName"];
$LastName=$_POST["LastName"];
$Email=$_POST["Email"];
$MessageText=$_POST["MessageText"];
$Headers = "From:" . $Email;
//VALIDATION
if(
$FirstName=="" ||
$LastName=="" ||
$Email=="" ||
$MessageText==""
) {
echo "Error";
} else {
mail("name#example.com","mobile app message",$MessageText, $Headers);
echo "success";
}
?>
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.