I'm working on javascript and html. I have a javascript function, called login, and I want to call this function in HTML. I saw some codes that includes the javascript function directly in the HTML. I don't want to do it because the code is very long.
Here is the HTML:
<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">
<script>
window.onload = login()
</script>
<input class="btn btn-beats btn-block btn-stacked" value="Tune in" type="submit">
And the Javascript function is:
function login(){
var userName = document.getElementById("username").value;
var password = document.getElementById("password").value;
console.log(userName);
console.log(password);
var data = {
userName : userName,
password : password
};
console.log(data);
doJSONRequest("POST", "/login", {}, data, function(location){
document.location = location.location;
});
}
I included a window.onload because I want to call the function when the page started. The console (obliviously) says to me that "login in not defined" and, of course, it has reason. But I don't want to put all the code into the HTML (also because there are like 30 lines more). Can you help me please? Thanks to everyone :)
I think that what you want is to run your login code when the user clicks on the button. You can do that this way:
<form>
<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">
<input class="btn btn-beats btn-block btn-stacked" value="Tune in" onclick="login()">
</form>
<script src="login.js></script>
login.js:
function login(){
var userName = document.getElementById("username").value;
var password = document.getElementById("password").value;
console.log(userName);
console.log(password);
var data = {
userName : userName,
password : password
};
console.log(data);
doJSONRequest("POST", "/login", {}, data, function(location){
...
});
Put the javascript in another js file(eg: filename.js) and load it load it in the header..
<script src="path to the file"></script>
Also you have to change window.onload = login() to window.onload = login
window.onload expects a reference of a function. When you use window.onload = login() the return value of the login() function is set as the reference which is not correct. The function name login is the reference..
SOLUTION
Just to be correct with the other users here is my solution:
<form action="login.html" method="POST" class="form-signup">
<input class="form-control form-stacked" name="firstname" placeholder="Firstname" type="text" required="true">
<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" onkeyup="login()">
<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" onkeyup="login()">
<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">
</form>
I just add the function "login" when the user wants to store the values
Related
I'm new to javascript and need some help lol. I have done a form that is supposed to disappear onClick and be replaced with a text. It works... but only after the second time I click submit. How do I make it work the first time?
<div class="subscribe" id="subscribe">
<h1>SUBSCRIBE</h2>
<p>Be in the know and sign up for our email list.</p>
<form class="form" id="form">
<input type="text" id="fname" name="fname" placeholder="First Name" required>
<input type="text" id="lname" name="lname" placeholder="Last Name" required>
<input type="email" id="email" placeholder="Email" required>
<input type="submit" id="submit" onClick="replaceForm()">
</form>
</div>
<div id="replacement">
<p>Thank you for signing up!</p>
</div>
//in js file
function replaceForm() {
var form = document.getElementById("form");
form.style.display = 'none';
document.getElementById("replacement").style.display = "block";
}
Pass the implicit event object into replaceForm and then call e.preventDefault().
Also, consider using form.hidden = true; instead of form.style.display = 'none';.
Like so:
<input type="submit" id="submit" onclick="replaceForm(event)">
function replaceForm(e) {
e.preventDefault();
const form = document.getElementById("form");
form.hidden = true;
document.getElementById("replacement").style.display = "block";
}
Submit is use to submit your form data to particular URL, which get the data from form and process it further.
i.e example : login page - after adding user name password your are sending it to backend to process the user login credential.
In this code snippet you are not submitting data to any location so better you use button as input type.
Once you click on submit it send data to action location but in you have not mention action location so it will simple refresh the page with same URL.
<input type="button" id="submit" onClick="replaceForm()"/ >
HTML :
<div class="subscribe" id="subscribe">
<h1>SUBSCRIBE</h2>
<p>Be in the know and sign up for our email list.</p>
<form class="form" id="form">
<input type="text" id="fname" name="fname" placeholder="First Name" required>
<input type="text" id="lname" name="lname" placeholder="Last Name" required>
<input type="email" id="email" placeholder="Email" required>
<input type="button" id="submit" onClick="replaceForm()">
</form>
</div>
<div id="replacement">
<p>Thank you for signing up!</p>
</div>
function replaceForm() {
var form = document.getElementById("form");
form.style.display = 'none';
document.getElementById("replacement").style.display = "block";
}
I have checked recent blogs about onsubmit event not triggering the method. Those suggestions were not helpful for this problem.And i've tried this method and form in an another html page which didn't work either.So i am not able to find out where main problem is ?
My code :
<div id="_div2">
<center>
<div class="contianer">
<script type="text/javascript">
function formValidation ()
{
var fName =document.Log.firstName.value;
var lName =document.Log.lastName.value;
var pName =document.Log.penName.value;
var email =document.Log.email.value;
var password=document.Log.password.value;
var confirmPassword=document.Log.confirmPassword.value;
var status=false;
if(fName.length<1)
{
document.getElementById("firstNameLoc").innerHTML=
"<img src='Resource/unchecked.gif'/>Please Enter your First Name";
status=false;
}
else
{
document.getElementById("firstNameLoc").innerHTML=
"<img src="Resource/checked.png"/>Please Enter your First Name";
status=true;
}
return status;
}
</script>
<form name="Log" action="SignUpInsert.php" method="post" onsubmit="return formValidation();return false;">
<label><b>First Name</b></label><span id="firstNameLoc"></span><br>
<input type="text" placeholder="Enter your Last Name" name="firstName"><br>
<label><b>Last Name</b></label><span id="lastNameLoc"></span><br>
<input type="text" placeholder="Enter your Last Name" name="lastName"><br>
<label><b>Pen Name</b></label><span id="penNameLoc"></span><br>
<input type="text" placeholder="Enter your Unique Pen Name" name="penName"><br>
<label><b>Email</b></label><span id="emailLoc"></span><br>
<input type="text" placeholder="Enter your Email" name="email"><br>
<label><b>Password</b></label><span id="passwordLoc"></span><br>
<input type="password" placeholder="Enter your Password" name="password"><br>
<label><b>Confirm Password</b></label><span id="confirmPasswordLoc"></span><br>
<input type="password" placeholder="Enter your Password Again" name="confirmPassword"><br>
<input type="submit" title="Done?" value="Sign Up"><br>
<div class ="contianer">
<button type="button" class="cancelBtn" title="Go Back" onclick="location.href='Main.html'">Cancel</button>
</div>
</form>
</div>
</center>
you almost done. simple quotes problem.you could change like this in your dom else statement
document.getElementById("firstNameLoc").innerHTML = '<img src="Resource/checked.png"/>Please Enter your First Name';
function formValidation() {
var fName = document.Log.firstName.value;
var lName = document.Log.lastName.value;
var pName = document.Log.penName.value;
var email = document.Log.email.value;
var password = document.Log.password.value;
var confirmPassword = document.Log.confirmPassword.value;
var status = false;
if (fName.length < 1) {
document.getElementById("firstNameLoc").innerHTML =
"<img src='Resource/unchecked.gif'/>Please Enter your First Name";
status = false;
} else {
document.getElementById("firstNameLoc").innerHTML = '<img src="Resource/checked.png"/>Done..!';
status = true;
}
return status;
}
<div id="_div2">
<center>
<div class="contianer">
<form name="Log" action="SignUpInsert.php" method="post" onsubmit="return formValidation();return false;">
<label><b>First Name</b></label><span id="firstNameLoc"></span><br>
<input type="text" placeholder="Enter your Last Name" name="firstName"><br>
<label><b>Last Name</b></label><span id="lastNameLoc"></span><br>
<input type="text" placeholder="Enter your Last Name" name="lastName"><br>
<label><b>Pen Name</b></label><span id="penNameLoc"></span><br>
<input type="text" placeholder="Enter your Unique Pen Name" name="penName"><br>
<label><b>Email</b></label><span id="emailLoc"></span><br>
<input type="text" placeholder="Enter your Email" name="email"><br>
<label><b>Password</b></label><span id="passwordLoc"></span><br>
<input type="password" placeholder="Enter your Password" name="password"><br>
<label><b>Confirm Password</b></label><span id="confirmPasswordLoc"></span><br>
<input type="password" placeholder="Enter your Password Again" name="confirmPassword"><br>
<input type="submit" title="Done?" value="Sign Up"><br>
<div class="contianer">
<button type="button" class="cancelBtn" title="Go Back" onclick="location.href='Main.html'">Cancel</button>
</div>
</form>
</div>
</center>
This is an extension of the the question I had asked earlier today (it's still unsolved, any help is very much appreciated). I have seen a lot of questions regarding this on stack overflow, and my code is based on something I found on a tutorial website.
I have 2 password forms which I wish to validate. I just want to submit it if they match. Here's my code-
<li>
<div class="input-group col-xs-5 pw">
<input type="password" name="pw" class="form-control" placeholder="Enter a new password" id="new-pw" />
</div>
</li>
<li>
<div class="input-group col-xs-5">
<input type="password" name="cnfrm-pw" id="cnfrm-pw" class="form-control" placeholder="Confirm new password" />
<span class="input-group-btn">
<button class="btn btn-primary" type="submit" id="pw-btn"> <em class="glyphicon glyphicon-circle-arrow-right"> </em> </button>
</span>
</div>
</li>
My javascript-
$(document).ready(function () {
$('#pw-btn').click( function() {
var pwd1 = document.getElementById("new-pw").value;
var pwd2 = document.getElementById("cnfrm-pw").value;
if (pwd1 != pwd2)
{
document.getElementById("cnfrm-pw").setCustomValidity("Passwords Don't Match");
}
else {
document.getElementById("cnfrm-pw").setCustomValidity('');
//empty string means no validation error
}
}
);
});
I am expecting an HTML5 validation form which tells me the passwords dont match, something like this. Nothing happens however.
Is there a mistake in my approach to custom validation? Thank you in advance all, very grateful for the help and advise.
ANSWER
I used the following code to get this working. It was a modification of the submitted answers. Thanks for all the help guys!
HTML:
<form action="#" id="f" method="post">
<li>
<div class="input-group col-xs-5 pw">
<input type="password" name="pw" class="form-control new-pw" placeholder="Enter a new password" id="new-pw" required pattern="(?=.*\d)(.{6,})" />
</div>
</li>
<li>
<div class="input-group col-xs-5">
<input type="password" name="cnfrm-pw" id="cnfrm-pw" class="form-control cnfrm-pw" required placeholder="Confirm new password" />
<span class="input-group-btn">
<button class="btn btn-primary" type="submit" id="pw-btn"> </button>
</span>
</div>
</li>
</form>
JS
$(document).ready(function () { //This confirms if the 2 passwords match
$('#f').on('keyup', '.cnfrm-pw', function (e) {
var pwd1 = document.getElementById("new-pw").value;
var pwd2 = document.getElementById("cnfrm-pw").value;
if (pwd1 != pwd2) {
document.getElementById("cnfrm-pw").setCustomValidity("The passwords don't match"); //The document.getElementById("cnfrm-pw") selects the id, not the value
}
else {
document.getElementById("cnfrm-pw").setCustomValidity("");
//empty string means no validation error
}
e.preventDefault(); //would still work if this wasn't present
}
);
});
.setCustomValidity tooltip will trigger only when the form is submitting.
Javascript
$(document).ready(function() {
$('#f').submit(function(e) {
var pwd1 = document.getElementById("new-pw").value;
var pwd2 = document.getElementById("cnfrm-pw").value;
if (pwd1 != pwd2) {
document.getElementById("cnfrm-pw").setCustomValidity("Passwords Don't Match");
} else {
document.getElementById("cnfrm-pw").setCustomValidity('');
//empty string means no validation error
}
e.preventDefault();
}
);
});
HTML
<form action="#" id="f"><li>
<div class="input-group col-xs-5 pw">
<input type="password" name="pw" class="form-control" placeholder="Enter a new password" id="new-pw" />
</div>
</li>
<li>
<div class="input-group col-xs-5">
<input type="password" name="cnfrm-pw" id="cnfrm-pw" class="form-control" placeholder="Confirm new password" />
<span class="input-group-btn">
<input type="submit" />
</span>
</div>
</li>
</form>
Have a look:
http://codepen.io/anon/pen/WwQBZy
I believe you're missing required attribute:
<input type="password" name="pw" class="form-control" placeholder="Enter a new password" id="new-pw" required />
Notice the required at the end.
Also, if you want to set a minimum:
<input type="password" name="pw" class="form-control" placeholder="Enter a new password" id="new-pw" pattern=".{5,}" title="Minmimum 5 letters or numbers." required />
As for the submitting the form, when the validation passes, you could submit the form using submit() function available in the Web API. You can read about it here.
Hers is the code i written for functionality , when click on image, dailog window should load with form input elements. Please look into the below code and let me know where i did mistake.
code:-
<dialog id="login" style="border-color: blue; border: 1px solid">
<form name="reg">
First Name : <input type="text" name="fname" required>
Last Name: <input type="text" name="lname" required>
Email <input type="email" name="mail" required>
Password: <input type="password" name="pass" required>
Confirm Password : <input type="password" name="confpass" required>
<button type="submit"></button>
<button type="reset"></button>
</form>
</dialog>
<script>
function registration(){
var dailog = document.getElementById('login');
dailog.open();
}
</script>
According to MDN there are .show() and .showModal() methods - there's no .open() method.
Change
dailog.open();
to
dailog.open = true;
as
show
is property, not a function
I am writing a simple registration screen that allows a user to input their email address and password. As standard, I have the user inputting their email address and password twice to confirm. However, the onsubmit attribute on my form does not seem to be executing.
Here is the code:
Fields
<form name="form" id="form" action="" onsubmit="return validateForm()" class="form col-md-12 center-block" method="POST">
<div class="form-group">
<input type="text" class="form-control input-lg" name="name" id="name" placeholder="Full Name">
</div>
<div class="form-group">
<input type="text" class="form-control input-lg" name="email" id="email" placeholder="Email Address">
</div>
<div class="form-group">
<input type="text" class="form-control input-lg" name="cemail" id="cemail" placeholder="Confirm Email Address">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" name="password" id="password" placeholder="Password">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" name="cpassword" id="cpassword" placeholder="Confirm Password">
</div>
<div class="form-group">
<button class="btn btn-primary btn-lg btn-block" form="form" type="submit" name="register" id="register">Register</button>
<span class="pull-right">Login</span><br>
</div>
</form>
JavaScript
<script>
function validateForm() {
if (isSame(document.getElementById("email"), document.getElementById("cemail"))
&& isSame(document.getElementById("password"), document.getElementById("cpassword"))) {
return true;
} else {
alert("Confirmation fields do not match, please retype and try again.");
return false;
}
function isSame(elementA, elementB) {
if (elementA.value.trim() == elementB.value.trim()) return true;
else return false;
}
//ignore this
function submitForm() {
document.getElementById("form").submit();
}
</script>
I have tried to debug as much as possible, but it doesn't seem like my submit button is triggering the form's onsubmit. I have viewed the request log, and it is posting the data just fine, however.
Thank you in advance!
The indentation of your code is incorrect: you are missing a } at the end of your validateForm function
There's a syntax error; there's no closing bracket for the first function.
Also, your isSame function doesn't need an if statement.
Hopefully this helps:
JS:
function validateForm() {
if(isSame(document.getElementById("email"), document.getElementById("cemail"))
&& isSame(document.getElementById("password"), document.getElementById("cpassword"))) {
return true;
}else{
alert("Confirmation fields do not match, please retype and try again.");
return false;
}
}
function isSame(elementA, elementB) {
return elementA.value.trim() == elementB.value.trim();
}