I need to persist the login status in sessionStorage but I cant seem to get it to work, can someone help me edit the sessionstorage code to make this work?
Below is my code with the session storage script that I'm trying to make work.
<head>
<meta name="viewport" content="width=device-width, user-scalable=yes, initialscale=1.0">
<link rel="stylesheet" type="text/css" href="logincss.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="loginjavascript.js"></script>
<script>
$(document).ready(function () {
$('#form').submit(function (event) {
$.post(this.action, $(this).serialize(), function (data) {
alert(data.msg+" "+data.status);
$('#status').html(data.msg);
if (data.status==1){
$('#hide').toggle();
//'Sessionstorage here'
$('login').click(function () {
var name = this.name;
var info = 'div#' + name;
if ($(info).is(':hidden')) {
if (sessionStorage[name]) {
var obj = JSON.parse(sessionStorage[name]);
var div = 'div#' + obj.pid;
$(div).html(item({product: obj}));
}
}
$(info).toggle();
return false;
});
}
}, 'json');
event.preventDefault();
});
});
</script>
</head>
<header class="cf">
<img src="images/badnoise.png" alt="logo" width="199" height="92">
<nav>
<ul>
<li id="login">
<div id="status">Not logged in</div>
<a id="login-trigger" href="#">
Log in <span>▼</span>
</a>
<div id="login-content">
<form id="form" action="login.php">
<fieldset id="inputs">
<input id="username" type="email" name="Email" value="bard#stratford.com" placeholder="Your email address" required />
<input id="password" type="password" name="Password" value="Hamlet34" placeholder="Password" required /><br/>
Password contains at least 1 capital letter. <br/>
Password contains at least 5 lower case letters. <br/>
Password contains at least 1 number.<br/>
Password must be a minimum of 8 characters.
</fieldset>
<fieldset id="actions">
<input type="submit" id="submit1" value="Log in">
<label><input type="checkbox" checked="checked"> Keep me signed in</label>
</fieldset>
</form>
</div><br/>
</li>
</ul>
</nav>
<center><h1>Artists<a> || <a href="songs.php">Songs</h1></center><h1>
</header>
Thank you
Related
I'm trying to use lambda on AWS with api gateway to do a contact form on a static S3 web site, based on this blog post: https://aws.amazon.com/blogs/architecture/create-dynamic-contact-forms-for-s3-static-websites-using-aws-lambda-amazon-api-gateway-and-amazon-ses/
I don't think my script is running because my submit button does nothing. Any ideas what I might be doing wrong?
Here's my full page code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ltdrescue Contact Form</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script "text/javascript">
function submitToAPI(e) {
e.preventDefault();
var URL = "https://abc1234.execute-api.us-east-1.amazonaws.com/01/contact";
var Namere = /[A-Za-z]{1}[A-Za-z]/;
if (!Namere.test($("#name-input").val())) {
alert ("Name can not less than 2 char");
return;
}
var mobilere = /[0-9]{10}/;
if (!mobilere.test($("#phone-input").val())) {
alert ("Please enter valid mobile number");
return;
}
if ($("#email-input").val()=="") {
alert ("Please enter your email id");
return;
}
var reeamil = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,6})?$/;
if (!reeamil.test($("#email-input").val())) {
alert ("Please enter valid email address");
return;
}
var name = $("#name-input").val();
var phone = $("#phone-input").val();
var email = $("#email-input").val();
var desc = $("#description-input").val();
var data = {
name : name,
phone : phone,
email : email,
desc : desc
};
$.ajax({
type: "POST",
url : "https://abc1234.execute-api.us-east-1.amazonaws.com/01/contact",
dataType: "json",
crossDomain: "true",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(data),
success: function () {
// clear form and show a success message
alert("Successfull");
document.getElementById("contact-form").reset();
location.reload();
},
error: function () {
// show an error message
alert("UnSuccessfull");
}});
}
</script>
</head>
<body>
<div id="wrap">
<div class="top_corner"></div>
<div id="main_container">
<div id="header">
<div id="logo"><img src="images/logo.gif" alt="" title="" border="0" /></div>
<div id="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Adopt</li>
<li>Support Us</li>
<li>Resources</li>
<li><a class="current" href="contact.html" title="">Contact</a></li>
</ul>
</div>
</div>
<div class="center_content_pages">
<div class="financial-application-form">
<h2>Contact Us</h2>
<p>
Please use this form to contact us with any suggestions or questions.
<br><br>
<b>Note:</b> due to the ever increasing number of animals in dire need of rescue, we are unable to intake owner surrenders.
</p>
<form id="contact-form" method="post">
<h4>Name:</h4>
<input type="text" style="height:35px;" id="name-input" placeholder="Enter name here…" class="form-control" style="width:100%;" /><br/>
<h4>Phone:</h4>
<input type="phone" style="height:35px;" id="phone-input" placeholder="Enter phone number" class="form-control" style="width:100%;"/><br/>
<h4>Email:</h4>
<input type="email" style="height:35px;" id="email-input" placeholder="Enter email here…" class="form-control" style="width:100%;"/><br/>
<h4>How can we help you?</h4>
<textarea id="description-input" rows="3" placeholder="Enter your message…" class="form-control" style="width:100%;"></textarea><br/>
<div class="g-recaptcha" data-sitekey="6Lc7cVMUAAAAAM1yxf64wrmO8gvi8A1oQ_ead1ys" class="form-control" style="width:100%;"></div>
<button type="button" onClick="submitToAPI(event)" class="btn btn-lg" style="margin-top:20px;">Submit</button>
</form>
</div
</div>
<div class="testimonials">
<h2>Need to find a new home for your pet?</h2>
<p>
<img src="http://images.adoptapet.com/images/shelter-badges/Approved-Shelter_Paw-Print_Badge.png">
</p>
</div>
<div class="clear"></div>
</div>
<div class="footer">
<div class="footer_links">
<a class="current" href="default.html" title="">Home</a>
About
Adopt
Support Us
Resources
Contact
</div>
</div>
</div>
</div>
</body>
</html>
You have not added the script tag correctly Please refer below to correct it.
Wrong Way
<script "text/javascript">
Right Way
<script type="text/javascript"></script> OR <script></script>
See in HTML5 you can omit the type attribute but it's a good practice to add it.
I'm trying to have my form send me an email every time the "Submit Query" button is clicked. The form is validated and brings the user to a confirmation page after the button is clicked, but I get no email.
Form code:
$(document).ready(function() {
$('#sumbit').click(function() {
$('#contactform').attr('action',
'mailto:chinochinako#gmail.com?subject=Jeannette Chambliss Digital Portfolio' +
$('#name').val() + '&body=' + $('#email').val() + '&body=' + $('#comments').val() + '&body=');
$('#contactform').submit();
});
});
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://malsup.github.io/min/jquery.cycle2.min.js"></script>
</head>
<body>
<form onSubmit="MM_validateForm('name','','R','comments','','R');return document.MM_returnValue" id="contactform">
<label for="name">Full Name:
<input name="name" type="text" id="name" required="required"></label><br /><br />
<label for="email">Email:
<input name="email" type="email" id="email" required="required"></label><br /><br />
<label for="comments">Comments:
<textarea name="comments" id="comments" required></textarea></label><br /><br />
<input name="submit" type="submit" id="submit" formaction="confirmation.html" formmethod="POST" formtarget="_self" action="mailto:chinochinako#gmail.com">
</form>
<script src="js/form.js"></script>
</body>
</html>
<script>
$(document).ready(function() {
$("#submit").click(function() {
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
var contact = $("#contact").val();
$("#returnmessage").empty(); // To empty previous error/success message.
// Checking for blank fields.
if (name == '' || email == '' || contact == '') {
alert("Please Fill Required Fields");
} else {
// Returns successful data submission message when the entered information is stored in database.
$.post("contact_form.php", {
name1: name,
email1: email,
message1: message,
contact1: contact
}, function(data) {
$("#returnmessage").append(data); // Append returned message to message paragraph.
if (data == "Your Query has been received, We will contact you soon.") {
$("#form")[0].reset(); // To reset form fields on success.
}
});
}
});
});
</script>
$(function() {
$('#contactform').submit(function(e) {
e.preventDefault();
$(this).attr(
'action',
'mailto:rafaeljunqueira.rs#gmail.com?subject=Jeannette Chambliss Digital Portfolio');
console.log($(this)[0].action);
return true;
});
});
form ul {
padding: 0;
margin: 0;
}
form ul li {
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" enctype="text/plain" id="contactform">
<ul>
<li>
<input type="text" placeholder="Name" id="name" />
</li>
<li>
<input type="text" placeholder="Email" id="email" />
</li>
<li>
<input type="text" placeholder="Comments" id="comments" />
</li>
</ul>
<button type="submit" id="submit">Send</button>
</form>
Welcome to Stack Overlfow.
I suspect you are missing the .preventDefault() to prevent the click event from proceeding.
$(document).ready(function() {
$('#submit').click(function(e) {
e.preventDefault();
$('#contactform').attr(
'action',
'mailto:chinochinako#gmail.com?subject=Jeannette Chambliss Digital Portfolio');
$('#contactform').submit();
});
});
Mind you, if the user bypasses clicking the button, and hits Enter, this code will not execute. You may want to consider moving your verification code into the submit event in jQuery, and move this code in there too.
I noticed a potential typo: $('#sumbit').click(function() {
Did you mean: $('#submit').click(function() {
Update
According to the HTML specifications, the action field of the form should be a correctly formed HTTP URL. So ‘mailto:’ is not valid for the action field.
Also, this will not "send" the email. It will only ask the default email program to compose a message that the user can send. If you want the data submitted to be sent via SMTP, this must be done by a server-side script (ASP/ASP.NET, PHP, ColdFusion, Perl, Python...) via a form handler.
$(function() {
$('#contactform').submit(function(e) {
e.preventDefault();
$(this).attr(
'action',
'mailto:chinochinako#gmail.com?subject=Jeannette Chambliss Digital Portfolio');
console.log($(this)[0].action);
return true;
});
});
form ul {
padding: 0;
margin: 0;
}
form ul li {
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" enctype="text/plain" id="contactform">
<ul>
<li>
<input type="text" placeholder="Name" id="name" />
</li>
<li>
<input type="text" placeholder="Email" id="email" />
</li>
<li>
<input type="text" placeholder="Comments" id="comments" />
</li>
</ul>
<button type="submit" id="submit">Send</button>
</form>
I have tried adding and removing contact fields and got it down to two for troubleshooting. I have tried it in multiple browsers but I can't seem to get an alert. Just looking to be pointed int he right direction here, another set of eyes may help!
here is the HTML
<html>
<head>
<title> Sugar Shippers International Snacks</title>
<link rel="stylesheet" type="text/css" href="styletest.css" />
<script src="/validateInputtesting.js"></script>
</head>
<body>
<div class="container">
<div class="main">
<h2>
Contact us!
</h2>
<form action="#" method="post" onsubmit="return ValidateInput()">
<label>Name: </label>
<input id="name" name="name" type="text">
<label>Email: </label>
<input id="email" name="email" type="text">
<input type="submit" value="Lets Go"
</form>
</div>
</div>
</body>
</html>
Here is the .JS
function ValidateInput() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var emailReg = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
if (name != '' && email != '') {
if (email.match(emailReg))
alert("Not a real Email address!");
return false;
}
alert("Missing feilds!");
return false;
}
add a > to the end of this line:
<input type="submit" value="Lets Go"
For the validation, personally i would do it like this:
<input id="email" type="email" name="email" placeholder="Email" required pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$">
I am trying to understand the basics of using AJAX in conjunction with PHP in order to use php pages to provide functions, but not change my 'view' on my MVC design.
So I created this basic login page...
<!DOCTYPE html>
<head>
<title>learning Php</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript">
$(document).ready(function() {
$(#"login").click(function() {
var action = $("#form1").attr("action");
var form_data = {
username: $("#username").val(),
password: $("#password").val(),
is_ajax: 1
};
$.ajax({
type: "POST",
url: action,
data: form_data,
success: function(response)
{
if(response == 'success')
{
$("#form1").slideUp('slow', function() {
$("#message").html('<p class="success">You have logged in.</p>');
};
}
else
$("#message").html('<p class="error">Incorrect password or username.</p>');
}
});
return false;
});
});
</script>
</head>
<body>
<div>
<form name="form1" id="form1" method="post" action="loginForm.php">
<p>
<label for="username"> Username: </label>
<input type="text" id="username" name="username" />
</p>
<p>
<label for="password"> Password: </label>
<input type="text" id="username" name="username" />
</p>
<p>
<input type="submit" id="login" name="login" value="login" />
</p>
</form>
<div id="message"></div>
<div>
</body>
</html>
And this was my php page to "handle" to login...
<?php
$is_ajax = $_REQUEST['is_ajax'];
if(isset($is_ajax) && $is_ajax)
{
$username = $_REQUEST['username'];
$password = $_REQUEST['password'];
if($username == 'demo' && $password == 'demo')
{
echo 'success';
}
}
?>
The problem I am having is that whenever I submit my login, I am redirected to "/loginForm.php" instead of staying on my current page and having the message change underneath the login form.
I tried using Firebug to help me track down what I suspected to be a javascript error, but to no avail.
Any idea on why I am being redirected or why the form is not submitting via Ajax?
One more mistake here
if(response == 'success')
{
$("#form1").slideUp('slow', function() {
}); <--- You Missed ")" here
}
a small mistake
$(#"login").click(function() {
This should be
$("#login").click(function() {
^ // # inside quotes.
Besides the typo and Rocky's good catch on the }); <--- You Missed ")" here
Both your username and password fields are the same.
<label for="username"> Username: </label>
<input type="text" id="username" name="username" />
and
<label for="password"> Password: </label>
<input type="text" id="username" name="username" />
the 2nd one should read as
<input type="text" id="password" name="password" />
In using everyone's answer, you will have yourself a working script.
Remember to hash your password once you go LIVE.
Edit sidenote: I've made a note below about using a button, rather than an input.
Here's a rewrite, just in case. However that input needs to be a <button>.
<!DOCTYPE html>
<head>
<title>learning Php</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript">
$(document).ready(function() {
$("#login").click(function() {
var action = $("#form1").attr("action");
var form_data = {
username: $("#username").val(),
password: $("#password").val(),
is_ajax: 1
};
$.ajax({
type: "POST",
url: action,
data: form_data,
success: function(response)
{
if(response == 'success')
{
$("#form1").slideUp('slow', function() {
$("#message").html('<p class="success">You have logged in.</p>');
});
}
else
$("#message").html('<p class="error">Incorrect password or username.</p>');
}
});
return false;
});
});
</script>
</head>
<body>
<div>
<form name="form1" id="form1" method="post" action="loginForm.php">
<p>
<label for="username"> Username: </label>
<input type="text" id="username" name="username" />
</p>
<p>
<label for="password"> Password: </label>
<input type="text" id="password" name="password" />
<!--
Your original input
<input type="text" id="username" name="username" />
-->
</p>
<button type="submit" id="login" name="login" />LOGIN</button>
<!--
Your original submit input. Don't use it
<p>
<input type="submit" id="login" name="login" value="login" />
</p>
-->
</form>
<div id="message"></div>
</div>
</body>
</html>
Your last div just before </body> was unclosed </div>, I've changed that above.
Additional edit from comments.
It seems that there was probably a space inserted somewhere and the use of trim() was the final nail to the solution.
response.trim();
A special thanks goes out to Jay Blanchard to have given us a helping hand in all this, cheers Sam!
References (TRIM):
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
http://php.net/manual/en/function.trim.php
I have a problem. I implemented a signup and a login page. I have the correct url (localhost:3000/login and localhost:3000/signup). But I have a problem. I enter in the signup and I insert the data of the user then if you press the button you are redirecting to localhost:3000/login but I have this error:
Cannot GET /login?firstname=a&lastname=a&username=a&email=a%40e.i&password=a&repeatPassword=a
In practice, when I press the button, all the data that the user has inserted are also added to the url. How is it possible? Can you help me please? Here is my code:
SIGNUP.DUST
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<title>Signup</title>
<link rel="stylesheet" href="css/standardize.css">
<link rel="stylesheet" href="css/base.css">
<script src="js/app.js"></script>
<script src="js/ajax.js"></script>
<script src="js/library.js"></script>
<script src="js/model.js"></script>
<script src="js/utils.js"></script>
</head>
<body class="body signup">
<div class="vertical-align-wrapper">
<div class="vertical-align-box">
<h1 class="slogan">Now listen.</h1>
<div class="form-signup-wrapper">
<form action="/login" method="GET" class="form-signup">
<input class="form-control form-stacked" name="firstname" placeholder="Firstname" type="text" required="true" id="Firstname">
<input class="form-control form-stacked" name="lastname" placeholder="Lastname" type="text" required="true">
<input class="form-control form-stacked" name="username" placeholder="Username" type="text" required="true" id="username">
<input class="form-control form-stacked" name="email" placeholder="email" type="email" required="true">
<input class="form-control form-stacked" name="password" id="password" placeholder="Password" type="password" required="true" >
<input class="form-control form-stacked last" name="repeatPassword" id="repeat" placeholder="Repeat password" type="password" onkeyup="enable()" required="true">
<input class="btn btn-beats btn-block btn-stacked" value="Sign up" id = "btnPlaceOrder" type="submit" onclick="setuplogin()">
</form>
<p>Already have an account? <strong>login</strong> now!</p>
</div>
</div>
</div>
<h1 class="fat blue-glow bottom-right">Atelier<span class="pulse" style="display:inline-block;">Beats.</span></h1>
LOGIN.DUST
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="css/standardize.css">
<link rel="stylesheet" href="css/base.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="js/dust-core.min.js"></script>
<script src="/views/views.js"></script>
<script src="js/app.js"></script>
</head>
<body class="body login">
<div class="vertical-align-wrapper">
<div class="vertical-align-box">
<h1 class="slogan">Gotta <i class="fa fa-heart beats pulse" style="color:#B13A3D;"></i> that sound.</h1>
<div class="form-login-wrapper">
<form action="library.html" class="form-login">
<input class="form-control form-stacked" name="username" placeholder="Username" type="text" required="true" id="username">
<input class="form-control form-stacked last" name="password" placeholder="Password" type="password" required="true" id="password" onkeyup="validation()">
<input class="btn btn-beats btn-block btn-stacked" value="Tune in" type="submit" id="submit">
</form>
<p>Don't have an account? <strong>sign up</strong> now! </p>
</div>
</div>
</div>
<h1 class="fat blue-glow bottom-right">Atelier<span class="pulse" style="display:inline-block;">Beats.</span></h1>
</body>
</html>
APP.JS (where are all my function that I'm using)
function setuplogin(){
var userName = document.getElementById("username").value;
var password = document.getElementById("password").value;
var data = {
userName : userName,
password : password
};
console.log(data);
doJSONRequest("POST", "/users/", null, data, function(){
document.location = location.location;
});
}
function validation(){
var userName_login = document.getElementById("username").value;
var password_login = document.getElementById("password").value;
var data = {
userName : userName_login,
password : password_login
};
doJSONRequest("GET", "/users/", {}, data, function(location){
document.location = location.location;
})
}
function enable(){
var a = document.getElementById("repeat");
var password = document.getElementById("password");
var repeat = document.getElementById("repeat");
document.getElementById("btnPlaceOrder").disabled = password.value !== repeat.value;
}
function timeout(){
window.setTimeout(function(){
window.location.href = "../../login.html";
}, 600000);
}
And finally the doJSONRequest. This function is in another document but it's function works. I inserted all the function you should needs to be sure. Hope I explained my problem in the right way:
function doJSONRequest(method, url, headers, data, callback){
if(arguments.length != 5) {
throw new Error('Illegal argument count');
}
doRequestChecks(method, true, data);
var r = new XMLHttpRequest();
r.open(method, url, true);
doRequestSetHeaders(r, method, headers);
r.onreadystatechange = function () {
if (r.readyState != 4 || (r.status != 200 && r.status != 201 && r.status != 204)){
return;
}else{
if(isJSON(r.responseText))
callback(JSON.parse(r.responseText));
else
callback();
}
};
var dataToSend = null;
if (!("undefined" == typeof data) && !(data === null))
dataToSend = JSON.stringify(data);
r.send(dataToSend);
}
Thanks for all
It doesn't look like you have any event listeners for your form submission?
If that is the case, then you have your form method set to GET which will pass the request parameters in the url.
Change the form method to POST and the details will go in the request body, rather than as url paramerters:
<form action="/login" method="POST" class="form-signup">