Below is function and it is not working. Maybe some small bug in the code which I am unable to identify.
<!DOCTYPE html>
<script>
function check(){
firstname=document.getelementById("firstname").value;
lastname=document.getelementById("lastname").value;
if(lastname==""){
alert('please enter lastname');
}
}
</script>
<form action="" method="post" onSubmit="check();">
<input type="text" id="firstname" name="firstname" ><br>
<input type="text" id="lastname" name="lastname" ><br>
<input type="submit" value="submit">
</form>
</body>
</html>
The bug in the code: case sensitive getelEmentById. Please below code and test it
function check(){
firstname=document.getElementById("firstname").value;
lastname=document.getElementById("lastname").value;
if(lastname==""){
alert('please enter lastname');
}
}
GetElementById, element with a capital E
JavaScript is case sensive.
TIP: use developer options in your browser. They usualy give an error message.
<!DOCTYPE html>
<script>
function check(){
firstname=document.getElementById("firstname").value;
lastname=document.getElementById("lastname").value;
if(lastname==""){
alert('please enter lastname');
}
}
</script>
<form action="" method="post" onSubmit="check();">
<input type="text" id="firstname" name="firstname" ><br>
<input type="text" id="lastname" name="lastname" ><br>
<input type="submit" value="submit">
</form>
</body>
</html>
Related
I'm new to JS and I practice, I want to connect between my form "firstname" to my function so when someone will click the button it will change the headline to "Hello ____ (his name)". I can't understand what should I add and where to my code so it will work. Thanks for your help.
<h1 class="example"> My Application </h1>
<body>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="" >
<br>
Last name:<br>
<input type="text" name="lastname" value="">
<br><br>
<input type="submit" value="Submit">
</form>
<button onclick="Hello(name)">Click here to change headline</button>
`<script>`
function hello(name){
return document.querySelector(".example").innerHTML = "Hello" + name ;
}
</script>
There's a few small issues in your code, but you were close. You're not passing anything into the function, you just have to get the values from your form. There are several ways to do this, but without overly complicating what you already have or understand, here's a working version.
<h1 class="example"> My Application </h1>
<form action="/action_page.php">
First name:<br>
<input type="text" id="firstName" name="firstname" value="" >
<br>
Last name:<br>
<input type="text" name="lastname" value="">
<br><br>
<input type="submit" value="Submit">
</form>
<button onclick="Hello()">Click here to change headline</button>
<script>
function Hello(){
var name = document.getElementById("firstName").value;
document.querySelector(".example").innerHTML = "Hello " + name ;
}
</script>
Notice the addition of the 'id="firstName"' attribute to your input.
Myself I am beginner and at learning stage. I would like to pass input details from one page (test1.html) to next page textarea (test2.html). attaching both html files.
test1.html(first page)
<html>
<body>
<form method="post" action="test2.html">
<label><b>Customer Name</b></label>
<input type="text" placeholder="Enter Customer Name" name="cname" id="cname" required>
<script>
function () {
localStorage.setItem('mySharedData1', document.getElementById('cname').value);
}
</script>
<button type="submit" name='submit' id='submit'>Submit</button>
<input type="checkbox" checked="checked"> Remember me
</body>
</html>
test2.html(second page)
<html>
<body>
<form method="get" action="test1.html">
<fieldset class="fieldset-auto-width">
<legend><b><font color="#0000FF">Your Bookings Are..!</font color></b></legend>
<textarea cols="35" rows="19" id="Requirement1" ></textarea>
<script type="text/javascript">
var mySharedData = localStorage.getItem('mySharedData1');
function(){
Requirement1.value =Requirement1.value+document.getElementById('mySharedData1').innerHTML+this.value+", ";
}
</script>
</fieldset>
</form>
</body>
</html>
function(){
Requirement1.value =Requirement1.value+document.getElementById('mySharedData1').innerHTML+this.value+", ";
}
This should be:
function getValue() {
var value = localStorage.getItem('mySharedData1');
document.getElementById('Requirement1').innerHTML = value;
}
You have to give a name to the function in both html pages, and actually use the onclick attribute of your button Submit. I wrote on one page only
<html>
<body>
<form method="post" action="test2.html">
<label><b>Customer Name</b></label>
<input type="text" placeholder="Enter Customer Name" name="cname" id="cname" required>
<script>
function giveMeOneName() {
localStorage.setItem('mySharedData1', document.getElementById('cname').value);
}
</script>
<button type="submit" name='submit' id='submit' onclick="giveMeOneName()">
Submit
</button>
<input type="checkbox" checked="checked"> Remember me
</body>
</html>
You need to create a function and invoke that function on click submit.
<form>
<label>
<b>Customer Name</b>
</label>
<input type="text" placeholder="Enter Customer Name" name="cname" id="cname" required>
<script>
function setValue() {
localStorage.setItem('mySharedData1', document.getElementById('cname').value);
}
</script>
<button type="submit" name='submit' id='submit' onClick="setValue()">Submit</button>
<input type="checkbox" checked="checked"> Remember me
I have a form with two buttons, the first buttons confirms the data entered and shows a verification code input, and the other one submits the code and the form, what i want is to put validations at the first button to required fields so he can't confirm unless he has filled all the required fields, how can i do that using js?
<form>
First name:<br>
<input type="text" name="firstname" required><br>
Last name:<br>
<input type="text" name="lastname" required><br>
<input type="button" value="Confirm"><br>
<input type="submit" value="Submit">
</form>
I think you are looking for something like this
function validate() {
var fname = document.getElementById("fname").value;
var lname = document.getElementById("lname").value;
if(fname==null || fname=="" || lname==null || lname=="") { // Validate the data here
alert("Please fill all the fields");
}
else {
alert("Data confirmed. Now you can submit.");
document.getElementById("submit").disabled = false;
}
}
<form>
First name:<br>
<input type="text" name="firstname" id="fname"><br>
Last name:<br>
<input type="text" name="lastname" id="lname"><br>
<input type="button" value="Confirm" onclick="validate()"><br>
<input type="submit" value="Submit" id="submit" disabled>
</form>
Use jQuery Validation:
<form id="UserForm">
First name:<br>
<input type="text" name="firstname" required><br>
Last name:<br>
<input type="text" name="lastname" required><br>
<input type="button" value="Confirm" onclick="Validate()"><br>
<input id="submitBtn" type="submit" value="Submit" disabled>
</form>
function Validate() {
var isValid = $("#UserForm").valid();
if (isValid)
$('#submitBtn').prop('disabled', false);
else
$('#submitBtn').prop('disabled', true);
}
You must'n't use JS for validation because you mustn't use client side for this validation. this is evil. Use PHP or a server side to be a litle more secure.
<form>
First Name:
<INPUT type="text" ><br>
<input type="radio"><br>
<input type="checkbox"><br>
<input type="textarea">
</FORM>
<FORM action="file.php" method="post" name=form1>
<INPUT type="submit" value="Submit">
</FORM>
https://jsfiddle.net/674brq05/
Not sure I understand your question, but you can get the form information from JS:
<form onsubmit="myFunc()">
Enter name: <input type="text" id="name">
<input type="submit">
</form>
The above does so the function "myFunc()" runs on submit.
And then the JS:
function myFunc() {
var name = document.getElementById('name');
alert(name.value);
return false; // Return false to cancel the submit
}
Way to take two form tag for submitting one form:
Try this:
HTML:
<form id="myForm" action="action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="myFunction()" value="Submit form">
</form>
JAVASCRIPT:
<script>
function myFunction() {
document.getElementById("myForm").submit();
}
</script>
I am Trying to validate the password and confirm password using javascript but not working , here is my code can anyone tell whats wrong with it ?
<html>
<head>
</head>
<body>
<script type="text/javascript">
function validateForm() {
var pass,cpass;
pass= document.getElementByName("password")[0].value;
cpass= document.getElementByName("cpassword")[0].value;
if(pass!=cpass){
alert("Password And Confirm Password Should Be Same");
return false;
}
}
</script>
<form name="form1" onsubmit="return validateForm()">
<label>Password : </label><input class="ip1" type="password" name="password" required/>
<label>Confirm Password : </label><input class="ip1" type="password" name="cpassword" required/>
<input type="submit" value="submit"/>
</form>
</body>
</html>
You Can try this
First of all replace button type "submit" to "button". Submit button will always submit your form before JQuery works.
HTML
<form>
<label>Password : </label><input class="ip1" type="password" id="password" required/>
<label>Confirm Password : </label><input class="ip1" type="password" id="cpassword" required/>
<input type="button" value="submit" id ="BtnSubmit" />
</form>
JS
$("#BtnSubmit").click(function(){
var pass,cpass;
pass= $("#password").val();
cpass= $("#cpassword").val();
if(pass!=cpass){
alert("Password And Confirm Password Should Be Same");
return false;
}
$("form").submit();
});
Codepen : http://codepen.io/anon/pen/xqxyzq
Try this
<html>
<head>
</head>
<body>
<script type="text/javascript">
function validateForm() {
var pass,cpass;
pass= document.getElementById("pass").value;
cpass= document.getElementById("cpass").value;
if(pass!=cpass){
alert("Password And Confirm Password Should Be Same");
return false;
}
}
</script>
<form name="form1" onsubmit="return validateForm()">
<label>Password : </label><input class="ip1" id="pass" type="password" name="password" required/>
<label>Confirm Password : </label><input class="ip1" id="cpass" type="password" name="cpassword" required/>
<input type="submit" value="submit"/>
</form>
</body>
</html>
Try this.
<html>
<head>
</head>
<body>
<script type="text/javascript">
function validateForm() {
if($("#pwd").val() != $("#cpwd").val()){
alert("Password And Confirm Password Should Be Same");
return false;
}
}
</script>
<form name="form1" onsubmit="return validateForm()">
<label>Password : </label><input class="ip1" id="pwd" type="password" name="password" required/>
<label>Confirm Password : </label><input class="ip1" id="cpwd" type="password" name="cpassword" required/>
<input type="submit" value="submit"/>
</form>
</body>
</html>
you mistyped getElementByName and it should be getElementsByName
<html>
<head>
</head>
<body>
<script type="text/javascript">
function validateForm() {
var pass,cpass;
pass = document.getElementsByName("password")[0].value;
cpass = document.getElementsByName("cpassword")[0].value;
if(pass!=cpass){
alert("Password And Confirm Password Should Be Same");
return false;
}
}
</script>
<form name="form1" onsubmit="return validateForm()">
<label>Password : </label><input class="ip1" type="password" name="password" required/>
<label>Confirm Password : </label><input class="ip1" type="password" name="cpassword" required/>
<input type="submit" value="submit"/>
</form>
</body>
</html>
its document.getElementsByName("password")[0].value;..its not getElement its document.getElementsByName(""cpassword"").value; ....and also call validate function in submit button
onclick=validateForm();