I Write This code For Registration of a User. Now I want to Validate this Page Whether all the Fields are Filled by the user or Not. The Same Script Code I Write to Login page It's Showing an alert if any one filed empty in the page. But it is not working for this Page.
The Main Difference is i Used Div in Login Page here I Used Table.
Registration Page Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/Registration.css">
<script>
function validateForm()
{
var a=document.forms["regform"]["user"].value;
var b=document.forms["regform"]["pass"].value;
var c=document.forms["regform"]["copa"].value;
var d=document.forms["regform"]["mono"].value;
if(a==""||b==""||c=""||d="")
{
alert("Please Enter All the Fields");
return false;
}
else
{
window.location="afterregister.html"
//alert("Registered Successfully");
}
}
</script>
</head>
<body>
<h1>Registration</h1>
<form name="regform" onsubmit="return validateForm();" method="post">
<table>
<tr>
<td><label>Username:</label></td>
<td><input type="text" name="user"/></td>
</tr>
<tr>
<td><label>Password:</label></td>
<td><input type="text" name="pass"/></td>
</tr>
<tr>
<td><label>Confirm Password:</label></td>
<td><input type="text" name="copa"/></td>
</tr>
<tr>
<td><label>Mobile Number:</label></td>
<td><input type="text" name="mono"/></td>
</tr>
<tr>
<td></td>
<td><input type="button" onclick = "return validateForm()" value="Register" name="" class="row1" />
<input type="button" name="" value="Cancel" class="row1"></td>
</tr>
<tr>
<td></td>
<td><input type="button" name="" value="Forgot Password" class="row2"></td>
</tr>
</table>
</form>
</body>
</html>
Login Page Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/Login.css">
<script>
function myFunction()
{
var x=document.forms["loginform"]["user"].value;
var y=document.forms["loginform"]["pass"].value;
if(x==""||y=="")
{
alert("Please Enter All the Fields");
return false;
}
else
{
window.location="afterLogin.html"
}
}
</script>
</head>
<div></div>
<body>
<h1></h1>
<form name="loginform" onsubmit="return myFunction();" method="post">
<div class="username"><label>Username:</label><input type="text" name="user"/></div>
<div class="password"><label>Password:</label><input type="text" name="pass"/></div>
<div class="buttons"><input type="button" onclick = "return myFunction()" value="Login" name=""/> <input type="button" value="Cancel" name=""/></div>
</form>
</body>
You are already calling the validation function on your form submit onsubmit="return myFunction();". So there isn't any need to call it again on your button click. So please change
<input type="button" onclick = "return validateForm()" value="Register" name="" class="row1" />
to
<input type="submit" value="Register" name="" class="row1" />
And do this in your script
<script>
function validateForm()
{
var a=document.forms["regform"]["user"].value;
var b=document.forms["regform"]["pass"].value;
var c=document.forms["regform"]["copa"].value;
var d=document.forms["regform"]["mono"].value;
if(a===""||b===""||c===""||d==="")
{
alert("Please Enter All the Fields");
return false;
}
else
{
window.location="afterregister.html"
//alert("Registered Successfully");
}
}
</script>
Solution:
Do the following 2 steps:
1- First close your <input> tags as either of the following method:
i. <input type = "textbox" name = "name" /> <!-- This is suggested -->
OR
ii. <input type = "textbox" name = "name"></input>
2- Go through these 2 useful links - it will guide you through what you exactly need:
Form Validation Tutorial - 1
Form Validation Tutorial - 2
Related
This question already has answers here:
reading innerHTML of HTML form with VALUE attribute (& its value) of INPUT tags
(2 answers)
Closed 1 year ago.
I am creating a project and want to print data that I put in input field on to hard copy ...
How can I do that?
for example:
If I have a table with input fields and I will input data into the field using browser, now, as soon as I am done with input, I want to print that information. (CODE UNDER), I took this code from W3schools: When I press print button, it prints the webpage.. but it does not print the information that is given to it...
How can I do that>
Here my code:
<!DOCTYPE html>
<html>
<title>Print form</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<form method="post" action="" id="myfrm">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname">
<br> Last name:<br>
<input type="text" name="lastname">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
<p align="center"><input type="button" onclick="myPrint('myfrm')" value="print"></p>
<script>
function myPrint(myfrm) {
var printdata = document.getElementById(myfrm);
newwin = window.open("");
newwin.document.write(printdata.outerHTML);
newwin.print();
newwin.close();
}
</script>
</body>
</html>
'''
You are copying over the HTML, but not the field values, the code below will do the trick.
See that the input fields now have Id's and we copy them over right before newwin.print()
<!DOCTYPE html>
<html>
<title>Print form</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<form method="post" action="" id="myfrm">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" id="first">
<br> Last name:<br>
<input type="text" name="lastname" id="last">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
<p align="center"><input type="button" onclick="myPrint('myfrm')" value="print"></p>
<script>
function myPrint(myfrm) {
var printdata = document.getElementById(myfrm);
newwin = window.open("");
newwin.document.write(printdata.outerHTML);
newwin.document.getElementById("first").value = document.getElementById("first").value;
newwin.document.getElementById("last").value = document.getElementById("last").value;
newwin.print();
newwin.close();
}
</script>
</body>
</html>
Code with bootstrap:
function ValidateForm() {
var fname = document.forms["form1"]["fname"].value;
var requiredValue = "this value is required";
if (fname == "") {
document.getElementById("validation").innerHTML = requiredValue;;
return false;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form action="/action_page.php" onsubmit="return ValidateForm()" method="post">
<fieldset>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<p id="validation"></p>
<input type="text" id="fname" name="fname" placeholder="Enter First Name" data-type="alphanum" />
<button type="submit" class="btn btn-info">Save</button>
</div>
</div>
</div>
</fieldset>
</form>
Code Without Bootstrap:
function ValidateForm() {
var fname = document.forms["form1"]["fname"].value;
var requiredValue = "this value is required";
if (fname == "") {
document.getElementById("validation").innerHTML = requiredValue;
return false;
}
}
<form id="form1" action="" onsubmit="return ValidateForm()" method="post">
<p id="validation"></p>
<input type="text" id="fname" name="fname" placeholder="Enter First Name" />
<button type="submit">Save</button>
</form>
why ValidateForm() does not work in without a bootstrap code? I am simply accessing the validation id but it does not work.But strangely it works in with bootstrap code. i am simply making a script for a user in which this value is required should be displayed. Now it does not make sense to me why it is not working with bootstrap?
NOTE: In my environment all these code work.
As far as I understand your code, these are in separate files. The first form have the following code:
<form action="/action_page.php" onsubmit="return ValidateForm()" method="post">
The second one has this:
<form id="form1" action="" onsubmit="return ValidateForm()" method="post">
Obviously "action_page.php" is not being loaded anymore. Are you loading the script from a different file? Where is this file located and how do you load the actual script on your page?
The following code works as intended, when put in to a single file saved as HTML:
<!DOCTYPE html>
<html lang="en">
<body>
<script>
function ValidateForm(){
var fname = document.forms["form1"]["fname"].value;
var requiredValue = "this value is required";
if(fname == ""){
document.getElementById("validation").innerHTML= requiredValue;
return false;
}
}
</script>
<form id="form1" action="" onsubmit="return ValidateForm()" method="post">
<p id="validation"></p>
<input type="text" id="fname" name="fname" placeholder="Enter First Name"/>
<button type="submit">Save</button>
</form>
</body>
</html>
I am making a simple form validation page, but whenever I click on the Submit button, it doesn't display the label, after validating input from the text input field (in this case E-mail).
Here is the code:
function validate()
{
var regexp = new RegExp("/^([A-Za-z0-9_\.\.])+\#([A-Za-z0-9_\.\.])+\.([A-Za-z]{2,4})$/");
if(regexp.test(document.getElementById("emailInput").value))
{
document.getElementById('email').innerHTML = 'Invalid Format!';
}
}
<!doctype html>
<html>
<head>
<title> Abdul Basit's Home Page</title>
</head>
<body>
<center>
<form onsubmit="return validate()">
<fieldset>
<legend>Enter your details:</legend>
Name: <input type="text"><br/><br/>
Email: <input type="text" id="emailInput"><br/>
<label id="email"></label><br /><br />
CNIC: <input type="text"><br/>
<label id="cnic"></label><br /><br />
<input type="submit" name="Submit">
</fieldset>
</form>
</center>
</body>
</html>
form.html
function validate() {
var name = document.Myform.name.value;
document.write(name);
}
<html>
<head>
<script src="validations.js"></script>
</head>
<body>
<form name="Myform" onsubmit="return validate()">
Enter name: <input type="text" name="name" /><br/><br/>
<input type="submit" />
</form>
</body>
</html>
Output: undefined
After typing my name in input box it is showing undefined.
The Problem is on your input. you should change t he name=="name" to name="name". Then change your validate function to us getElementsByName. See the code below:
<html>
<head>
<script>
function validate(){
var name=document.getElementsByName('name')[0].value;
document.write(name);
}
</script>
</head>
<body>
<form name="Myform" onsubmit="return validate()">
Enter name: <input type="text" name="name"><br><br>
<input type="submit" />
</form>
</body>
</html>
dont make use of name attribute it old way of W3C standard, from long time they are suggesting make use of id attribute.
you code needs to be like this
<input type="text" id="txtname"/><br><br>
and javascript like
var name=document.getElementById("txtname").value;
You just have to fix your name=="name". In HTML we use = to assign attribute values/
function validate() {
var name = document.Myform.name.value;
document.write(name);
}
<html>
<head>
<script src="validations.js"></script>
</head>
<body>
<form name="Myform" onsubmit="return validate()">
Enter name: <input type="text" name="name" /><br><br>
<input type="submit" />
</form>
</body>
</html>
the validate function doesn't return anything as would usually be the case for this type of event hander ~ it will instead simply write the name ~ is that the desired result?
<html>
<head>
<title>form validation</title>
<script src="validations.js"></script>
<script>
function validate(e){
e.preventDefault();
var name=e.target.querySelector('input[ name="name" ]').value;
document.write( name );
return true;
}
</script>
</head>
<body>
<form name="Myform" onsubmit="return validate(event)">
Enter name: <input type="text" name="name"/><br><br>
<input type="submit" />
</form>
</body>
</html>
I am working on a history search function.
I have managed to get a working code to save the value from the textbox but I do not know how to load them into a listbox.
I want a listbox with clickable items so that I can click on a previous search value and load that value as I do from the textbox.
Here is my code:
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8>
<link rel="stylesheet" type="text/css" href="test.css">
<script src="jquery.js"></script>
<script src="j.js"></script>
</head>
<body>
<center>
<table>
<tr>
<td style="text-align: center">
<font size="22">Sök order</font>
</td>
</tr>
<tr>
<td>
<form action="test.php" method="post">
<input style="font-size: 44pt; text-align: center" size="9" type="text" name="txtSearch" id="txtSearch"/>
<input type="submit" id="submit" value="submit">
</form>
</td>
</tr>
</table>
</center>
</body>
</html>
And the j.js that handles the local storage function.
$(function () {
$("#submit").click(function () {
var txtSearch = $("#txtSearch").val();
localStorage.setItem('searchvalue',txtSearch);
});
});
And last my test.php that handles the post search request
<?php
$txtSearch = $_REQUEST['txtSearch'];
header('Location: '.'https://mywebsite.com/se/editor/order_info.php?webshop=23946&ordernr='.$txtSearch);
?>
How can I achieve this?
Thank you.
by js, you can
window.location = "https://mywebsite.com/se/editor/order_info.php?webshop=23946&ordernr="+localStorage.getItem('searchvalue');
to save in listbox or any other
document.getElementById("id").value=localStorage.getItem('searchvalue');
to save in array
var a = [];
a[0]=localStorage.getItem('searchvalue');