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">
Related
I have HTML form with javascript validation but whenever i submit the form error message appear even if the form fields are correct(not empty or null)
I want the error message to appear only when form fields are empty or null when i submit the form
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=0.1,shrink-to-fit=no">
<link type="text/css" href="/css" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Javascript Form Validation</title>
<style>
</style>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="card">
<div class="card-body">
<form method="post" name="myForm" id="myForm">
<div class="form-group">
<label for="exampleInputName1">Full name</label>
<input type="text" class="form-control" name="name" id="exampleInputName1" aria-describedby="nameHelp" placeholder="Enter name">
</div>
<button type="submit" name="login" class="btn btn-primary">Submit</button>
</form>
<script>
class User
{
constructor(userName,submitButton)
{
this.userName = document.myForm.name.value;
this.submitButton = document.getElementById("myForm");
}
submitForm()
{
this.submitButton.onsubmit = function()
{
if(this.userName == "" || this.userName == null)
{
document.write("Name Required");
return false;
}
}
}
}
let user = new User();
user.submitForm();
</script>
Prefer to code this way:
<form method="post" id="my-form">
<div class="form-group">
<label for="exampleInputName1">Full name</label>
<input type="text" class="form-control"
name="userName"
aria-describedby="nameHelp"
placeholder="Enter name" >
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
const myForm = document.getElementById("my-form")
myForm.onsubmit=event=>
{
if(myForm.userName.value.trim()==='')
{
event.preventDefault()
alert("Name Required")
}
}
or, with a JS class (in HTML / JS everything is allready OBJECT, even a form)
class User {
constructor(formID,uName) {
this.myForm = document.getElementById(formID)
this.u_Name = this.myForm[uName]
// this.myForm.onsubmit = e => this.doSubmit(e)
this.myForm.addEventListener('submit', this.doSubmit.bind(this))
}
doSubmit(e) {
if(this.u_Name.value.trim()==='') {
e.preventDefault()
alert("Name Required")
}
}
};
let user = new User('my-form','userName');
class User {
constructor(formID,uName) {
this.myForm = document.getElementById(formID)
this.u_Name = this.myForm[uName]
// this.myForm.onsubmit = e => this.doSubmit(e)
this.myForm.addEventListener('submit', this.doSubmit.bind(this))
}
doSubmit(e) {
if(this.u_Name.value.trim()==='') {
e.preventDefault()
alert("Name Required")
}
}
};
let f_User = new User('my-form','userName')
<form method="post" id="my-form">
<div class="form-group">
<label for="exampleInputName1">Full name</label>
<input type="text" class="form-control"
name="userName"
aria-describedby="nameHelp"
placeholder="Enter name" >
</div>
<button type="submit" name="login" class="btn btn-primary">Submit</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}$">
After document.getElementsById("occ").innerHTML = "Already registered"; tag <h2 style="color: red" id ="occ"></h2> doesn't change, but page looks like it reloaded.
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ustory - Register</title>
<link href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href="CSS_defaults.css" rel="stylesheet">
<script src="Ustory_JS.js"></script>
</head>
<body>
<?php
if($_GET['occupied'] == "true") {
echo($_GET['occupied']);
$occupied = "true";
}
?>
<script>
var occ = <?php echo json_encode($occupied); ?>;
alert(typeof(occ));
if(occ == "true") {
alert("done");
document.getElementsById("occ").innerHTML = "Already registered";
}
</script>
<div id="reg_in" class="reg" style="color:#FF4D50;">
<form class="reg" name="register" action="U_story_reg.php" method="post" onsubmit="return register_()">
<input type="text" name="firstname" id="firstname" placeholder="Meno" required> <b>*</b><br>
<input type="text" name="lastname" id="lastname" placeholder="Priezvisko" required> <b>*</b><br>
<input type="text" name="nick" id="nick" placeholder="Prezívka"> <br>
<input type="email" name="mail" id="mail" placeholder="E-mail" required> <b>*</b><br>
<input type="password" name="pass" id="pass" placeholder="Heslo" required> <b>*</b><br>
<input type="password" name="pass_again" id="pass_again" placeholder="Heslo znovu" required> <b>*</b><br>
<input type="submit" value="Submit">
<h2 style="color: red" id ="occ"></h2>
</form>
</div>
<h2 style="color: red" id ="occ"></h2>
</body>
</html>
Do you have any idea why document.getElementsById("occ").innerHTML = "Already registered"; doesn't work ?
The code is executing before the DOM element has loaded & you have a typo in getElementsById should be getElementById. You have to either move the code below the html element you are trying to change or wrap it in a $(document).ready function. Like this:
$(document).ready(function() {
var occ = <?php echo json_encode($occupied); ?>;
alert(typeof(occ));
if(occ == "true") {
alert("done");
document.getElementById("occ").innerHTML = "Already registered";
}
});
In addition, make sure you reference the jQuery library in order to use the document.ready() method. Check out the link below for further information..
https://www.w3schools.com/jquery/event_ready.asp
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
I am trying to execute the mysql query using PHP form. Below is the form
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="signup.css" type="text/css">
<script type="text/javascript" src="form_val.js"></script>
<title>Untitled Document</title>
</head>
<body bgcolor="#0ca3d2">
<div align="right">
<h2>Go back</h2>
</div>
<div class="form-style-10">
<h1>Sign Up Now!<span>Sign up and tell us what you think of the site!</span></h1>
<form action="#" method="post" name="myForm" onSubmit="CheckTerms()">
<div class="section"><span>1</span>First Name & Address</div>
<div class="inner-wrap">
<input type="text" name="First_Name" placeholder="Enter First Name" id="fname">
<label id="error" style="color:red"></label>
<input type="text" name="Last_Name" placeholder="Enter last Name"/>
<label id="error_l" style="color:red"></label>
<select name="gender">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="section"><span>2</span>Email </div>
<div class="inner-wrap">
<input type="text" name="Email_i" placeholder="enter email here" id="e_mail" />
<label id="error_e" style="color:red"></label>
<button type="button" name="validate" onclick="loadDoc(this.value)">Validate</button>
<div id="check"></div></div>
<div class="section"><span>3</span>Passwords</div>
<div class="inner-wrap">
<input type="password" name="pass" placeholder="Must be 6 to 15 characters" id="Pass" onBlur="PassCheck()" />
<label id="error_p" style="color:red"></label>
<input type="password" name="repass" placeholder="Retype Password" id="RePass"/>
<label id="error_rp" style="color:red"></label>
<span class="privacy-policy">
<input type="checkbox" name="terms" value="value1" id="check_box">Agree to Terms and Conditions
</span>
<input type="submit" name="signup" value="Register" id="sub_button">
<label id="error_lable" style="color:red"></label>
</div>
</form>
</div>
</body>
I have the below form validation in Javascript,
function CheckTerms(){
var letter = /^[a-zA-Z ]*$/;
if(document.myForm.First_Name.value.match(letter) && document.myForm.First_Name.value =="")
{
document.getElementById("error").innerHTML = "* Please Provide First Name";
document.myForm.First_Name.focus();
return false;
}
if(document.myForm.Last_Name.value.match(letter) && document.myForm.Last_Name.value =="" )
{
document.getElementById("error_l").innerHTML = "* Please provide your Last name!";
document.myForm.Last_Name.focus() ;
return false;
}
var email =/^\w+#[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
if(document.myForm.Email_i.value.match(email) && document.myForm.Email_i.value=="")
{
document.getElementById("error_e").innerHTML = "* Please provide your EMAIL!";
document.myForm.Email_i.focus() ;
return false;
}
var min = 6;
var max = 15;
if(document.myForm.pass.value.length < min || document.myForm.pass.value.length > max)
{
document.getElementById("error_p").innerHTML = "Password Should be betweeen 6 to 15 characters";
document.myForm.pass.focus() ;
return false;
}
var pass = document.getElementById("Pass").value;
var re = document.getElementById("RePass").value;
if(pass != re)
{
document.getElementById("error_rp").innerHTML = "Password do not match";
return false;
}
if(document.getElementById("check_box").checked == false)
{
document.getElementById("error_lable").innerHTML = "Please Check";
return false;
}}
<?php
session_start();
include "config.php";
if(isset($_POST['signup']))
{
// my logic here
}
?>
but the problem is, even the javascript returns the error, clicking the submit button , executes PHP script resulting the data entry into database. I want to stop form submission if any of the javascript error exists.
You are not returning the boolean in the event even though you are doing it in the function. onSubmit receives true by default and submits it.
Change
onsubmit="CheckTerms()"
to
onsubmit="return CheckTerms()"