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
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";
}
So I am trying to add validation to a form. Initially, for the button, I had the type as submit, but when I would click on the button the error message for an empty name input would display briefly. I did some research and saw that in order to get the error message to display longer, I needed to change the type to button, which I did. Now, no error messages are showing. I checked the console and there are no errors displaying. Can someone tell me why this is happening and how to fix it?
function printError(elemId, message) {
document.getElementById(elemId).innerHTML = message;
}
function validateForm() {
var name = document.regForm.FullName.value;
var nameError = true;
if (name == "") {
printError("nameError", "Please enter your name")
}
};
.error {
color: red;
font-size: 90%;
}
<div class="container">
<form name="regForm" class="form" onsubmit="return validateForm()">
<fieldset>
<div class="row">
<label>Full Name</label></br>
<input name="FullName" type="text" placeholder="John Doe" id="FullName" />
<div class="error" id="nameError"></div>
</div>
<div class="row">
<label>Email</label></br>
<input name="email" type="email" placeholder="johndoe#email.com" id="Email" />
<div class="error" id="emailError"></div>
</div>
<div class="row">
<label>Phone Number</label></br>
<input name="phone" type="tel" placeholder="(123) 456-7890" id="PhoneNumber" />
</div>
<div class="row">
<label>Password</label></br>
<input name="Password" id="Password" type="Password" placeholder="Password" onchange='passConfirm();' />
</div>
<div class="row">
<label>Confirm Password</label></br>
<input name="ConfirmPassword" id="ConfirmPassword" type="Password" placeholder="Confirm Password" onchange='passConfirm();' />
</div>
<span id="Message"></span>
<button type="button" value="submit">Sign Me Up!</button>
</fieldset>
</form>
</div>
When the button type is submit the form gets submitted automatically and the function called validation is executed. But when you change the type to button the function will not be called. You have to add click event listener to the sign me up button to call the validate function.
jsFiddle
I'm using Jquery .submit() function to submit my form using JQuery. But I've some fields marked as required in HTML.
How should I use the .submit() function to check required field before submitting the form?
here is the code
<script>
function submit() {
$("form").submit();
}
function signup() {
alert("You're going to sign up");
}
</script>
<form action="JavaScript:void(0);" onsubmit="signup()" method="post">
<div class="input">
<label for="email">Email:</label>
<input required="" id="email"/>
</div>
<div class="input">
<label for="password">Password:</label>
<input required="" type="password" id="password"/>
</div>
<a class="submit" href="JavaScript:submit();">Sign Up</a>
<button type="submit" class="none_display"></button>
</form>
I need to submit my form using a tag because of style changing in some browsers for button and input tags.
First off, it's slightly strange that you have a submit() method that you inline call, that turns around and submits the form, that then executes its inline signup() method that then actually does work. Just call the signup instead of the submit().
But for your actual question.
$(':input[required]').filter(function(){ return !this.value.trim() })
This command will find all inputs that have a required property that do not have a value. If you find any, don't do your ajax.
The below example has refactored the logic a bit, so that the submit button is actually showing, but is styled to look like a link.
$('form').on('submit', function(e){
e.preventDefault();
var blankRequiredFieldsExist = $(e.target).find(':input[required]').filter(function(){
return !this.value.trim();
}).length;
if (!blankRequiredFieldsExist) {
alert("You're going to sign up");
}
});
.buttonAsLink {
border: 0;
background-color: inherit;
padding: 0;
font-family: inherit;
font-size: inherit;
color: blue;
text-decoration: underline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
<div class="input">
<label for="email">Email:</label>
<input required id="email"/>
</div>
<div class="input">
<label for="password">Password:</label>
<input required type="password" id="password"/>
</div>
<button type="submit" class="buttonAsLink">Sign Up</button>
</form>
You have a few unnecessary things going on.
You don't need action="JavaScript:void(0);" on the form.
Remove <a class="submit" href="JavaScript:submit();">Sign Up</a>
function signup() {
alert("You're going to sign up");
}
<form onsubmit="signup()">
<div class="input">
<label for="email">Email:</label>
<input required="" id="email"/>
</div>
<div class="input">
<label for="password">Password:</label>
<input required="" type="password" id="password"/>
</div>
<button type="submit" class="none_display">Sign up</button>
</form>
you can make submit button and set display: none; for that.
then write some function in jquery to click on your submit button when user click on your anchor link
<form action="JavaScript:void(0);" onsubmit="signup()" method="post">
<input type="text" required="yes" />
<input type="submit" style="display: none;" id="mysubmit" />
<a href="JavaScript:void(0);" onclick='$("#mysubmit").click();'>Submit</a>
</form>
I created a registration page, and each field requires entry and validation. I used the onsubmit event to call my js function to validate the form if the field is empty, however it still submits even though it has not been validated properly.
function validate() {
var streetName = document.getElementById("sN").value;
if (streetName == "" || streetName == null || streetName == undefined) {
window.alert("Sorry");
return false;
}
}
<form name="myForms" action="https://httpbin.org/post " method="post" class="form" onsubmit="return validate()">
<div id="fN">
<label>First Name</label>
<input type="text" name="firstName" placeholder="Enter first name" required>
</div>
<br>
<div class="lN">
<label>Last Name</label>
<input type="text" name="lastName" placeholder="Enter last name" required="">
</div>
<br>
<div class="sN">
<label>Street name</label>
<input type="text" name="streetname" placeholder="Enter your street name">
</div>
// Somemore inputs
<input class="buttons" type="submit" name="submit" value="Sign up" onclick="validate()">
</form>
I expect a window to pop up saying "this entry is wrong and for this reason", but it submits anyway
EDIT: I apologize I should've been clearer in my post. I will use required in some of the inputs, however I will eventually need to write js code to ensure a phone number is all digits and password = passwordconfirm and a postal code is an actual postal code. In the JS file I just showed what I basically tried doing.
Several things
You have validate on the submit AND on the form submit
You should NEVER call anything in a form "submit" since it will hide the submit event/method
You need to get the correct field
Give the form an ID and use unobtrusive code like this
window.addEventListener("load", function() {
document.getElementById("myForm").addEventListener("submit", function(e) {
var errors = false;
var streetName = this.streetname.value.trim(); // no more action needed
if (!streetName) errors = true;
// more validations
if (errors) {
window.alert("Sorry");
e.preventDefault();
}
});
});
<form id="myForm" action="https://httpbin.org/post " method="post" class="form">
<div id="fN">
<label>First Name</label>
<input type="text" name="firstName" placeholder="Enter first name" >
</div>
<br>
<div class="lN">
<label>Last Name</label>
<input type="text" name="lastName" placeholder="Enter last name" >
</div>
<br>
<div class="sN">
<label>Street name</label>
<input type="text" name="streetname" placeholder="Enter your street name">
</div>
<input class="buttons" type="submit" name="SubmitButton" value="Sign up">
</form>
var streetName = document.getElementById("sN").value;
There is no element with that id in the document.
There is an element with sN as its class name, but getElementById won't find an element by its class and the value of <div class="sN"> will always be undefined. It is the input that will have a value.
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