I am working on forwarding data from the current page to the same next page i.e. whenever the page is loaded again, the code checks if there is any such storage, if it is then it loads the values in text box. I am not able to get it to work Below is the code -
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function values()
{
if(localStorage.getItem(pranav))
{
document.getElementById(FName).innerText= sessionStorage.getItem(pranav);
document.getElementById(OName).innerText= sessionStorage.getItem(k);
}
else
{
sessionStorage.setItem("pranav", "P");
sessionStorage.setItem("k", "P");
return;
}
}
</script>
</head>
<body>
<form name="myform" action="Idea.html" onload="values(this.form)">
<label>Please Enter Your Full Name = </label><input type="text" name="FName" id="FName" />
<label>Please Enter Your Current Organization</label><input type="text" name="OName" id="OName" />
<input type="submit" value="Submit" onclick="values(this.form)" />
</form>
</body>
</html>
Kindly help me as to why this is not working?
You haven't declared the pranav and k variables you used. Also when you are assigning a value to an input field you should use the .value property instead of .innerText.
Also you might consider splitting your code in 2 functions:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function loadValues() {
var data = localStorage.getItem('data');
if(data) {
data = JSON.parse(data);
document.getElementById('FName').value = data.firstName;
document.getElementById('OName').value = data.lastName;
}
}
function saveValues() {
var data = {
firstName: document.getElementById('FName').value,
lastName: document.getElementById('OName').value
};
localStorage.setItem('data', JSON.stringify(data));
}
</script>
</head>
<body onload="loadValues()">
<form name="myform" action="Idea.html" onsubmit="saveValues()">
<label>Please Enter Your Full Name = </label>
<input type="text" name="FName" id="FName" />
<label>Please Enter Your Current Organization</label>
<input type="text" name="OName" id="OName" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
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>
I have built a Send Email from a Static HTML Form using Google Apps Mail. The problem is that when I submit the form, I see a confirmation message that it was sent like:
{"result":"success","data":"{\"firstname\":[\"Abhay\"]}"}
I want to remove that and besides that I want a clean text after a form submission e.g. "Thanks for submitting". Please correct my code to remove this output.
<!DOCTYPE HTML>
<html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title> contact form </title>
</head>
<body>
<div>
<form id="gform" method="POST"
action="https://script.google.com/macros/s/AKfycbwlSM9z9ELHa1-
X6C_srRrB0j7FUlGgevJw7w7M/exec" >
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name.."
required oninvalid="this.setCustomValidity('Put here custom message')"/>
<input type="submit" value="Submit"/>
</form>
<div style="display: none;" id="thankyou_message">
<h2> <em>Thanks</em>xfn</h2>
</div>
<script data-cfasync="false" type="text/javascript"
src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-
without-server/master/form-submission-handler.js"></script>
</body>
</html>
You can make an ajax request instead of submitting the from directly.
<form id="gform" onsubmit="return postMessage()">
In below
<script>
function PostMessage() {
var form = document.getElementById('gform')
fetch('"https://script.google.com/macros/s/AKfycbwlSM9z9ELHa1-
X6C_srRrB0j7FUlGgevJw7w7M/exec', {
method: 'POST',
body: new URLSearchParams(new FormData(a)).toString()
}).then(function(res){ return res.json(); })
.then(function(data){
if(data.result == "success") {
document.getElementById('thankyou_message').style.display = 'block';
}
});
return false;
}
</script>
I want display the form data to new tab using JavaScript only. This is not proceeding my task. How to achieve this?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script language="JavaScript">
function showInput() {
var message_entered = document.getElementById("user_input").value;
document.getElementById('display').innerHTML = message_entered;
}
</script>
</head>
<body>
<form>
<label><b>Enter a Message</b></label>
<input type="text" name="message" id="user_input">
</form>
<input type="submit" onclick="showInput();"><br />
<label>Your input: </label>
<p><span id='display'></span> </p>
</body>
</html>
var data = "<p>This is new tab'</p><br/>"+message_entered;
newWindow = window.open("data:text/html," + encodeURIComponent(data),
"_blank", "width=200,height=100");
newWindow.focus();
DEMO
This is works fine when the form does not have any value. But, Once i entered the value on the textbox, it still alert the same messages i.e it is omitting 'You must enter value' for both cases,see at the if else statement. what is the mistake on the below code?
<!doctype html>
<html>
<head>
<title>A Basic Example</title>
</head>
<body>
<p>A Basic Form Example</p>
<form action="#">
<p>Name <em>(Required)</em>: <input id="textbox1" name="textname" type="text" /></p>
<p><input id="submitbutton1" type="submit" /></p>
<script type="text/javascript">
var item = document.getElementById("textbox1").value.length;
var item1 = document.forms[0].textname;
function formValid() {
if (item == 0) {
alert("You must enter value");
}
else {
alert(item1);
}
}
var formEl = document.getElementById("submitbutton1");
formEl.addEventListener("click", formValid());
</script>
</form>
</body>
</html>
You are fetching the length of the value when the page loads instead of when the the function runs.
Move
var item = document.getElementById("textbox1").value.length
inside the function.
Use this syntax in addEventListener formEl.addEventListener("click", formValid,false);
Also replace var item inside the function formValid().
Here is the fiddle
try this
<!doctype html>
<html>
<head>
<title>A Basic Example</title>
</head>
<body>
<p>A Basic Form Example</p>
<form action="#">
<p>Name <em>(Required)</em>: <input id="textbox1" name="textname" type="text" /></p>
<p><input id="submitbutton1" type="submit" /></p>
<script type="text/javascript">
var item1 = document.forms[0].textname;
var formEl = document.getElementById("submitbutton1");
function init() {
formEl.addEventListener("click", formValid());
}
function formValid() {
var item = document.getElementById("textbox1").value.length;
if (item == 0) {
alert("You must enter value");
}
else if {
alert(item1);
}
}
</script>
</form>
</body>
</html>
I am trying to get this to be if your name is Bob then you are register if not Sorry you are not allowed access but i can not figure out what I am doing wrong can someone help me thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
</head>
<script type="text/javascript">
function verify() {
var name="Please enter your name: ";
if (firstName=="Bob") {
alert("Now registered");
}
else {
window.alert("Sorry you aren't allowed acess.")
return false;
}
</script>
<form name="myForm" action="#" method="post" enctype="text/plain">
<input type="text" name="BOB">First Name<br>
<input type="button" value="Submit" onclick="verify();">
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
</head>
<script type="text/javascript">
function verify() {
var name="Please enter your name: ";
var firstName = document.getElementById('firstName').value;
if (firstName=="Bob") {
alert("Now registered");
return true;
}
else {
window.alert("Sorry you aren't allowed acess.")
return false;
} }
</script>
<form name="myForm" action="#" method="post" onsubmit="return verify();" enctype="text/plain">
<input id="firstName" type="text" name="BOB"/>First Name<br>
<input type="button" value="Submit"/>
</form>
</body>
</html>
you have to use onsubmit on form tag and it must return true or false
Note that you are missing the closing braces for the function, this code works:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
</head>
<script type="text/javascript">
function verify()
{
var name="Please enter your name: ";
if (myForm.firstName.value=="Bob")
{
alert("Now registered");
}
else
{
alert("Sorry you aren't allowed acess.")
return false;
}
}
</script>
<form name="myForm" action="#" method="post" enctype="text/plain">
<input type="text" name=firstName>First Name<br>
<input type="button" value="Submit" onclick="verify();">
</form>
</body>
</html>
This should work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
</head>
<body>
<script type="text/javascript">
function verify() {
var firstName = document.getElementById('firstName').value;
if (firstName == "Bob") {
alert("Now registered");
return true;
} else {
window.alert("Sorry you aren't allowed access.");
return false;
}
}
</script>
<form name="myForm" action="#" method="post" onsubmit="return verify();" enctype="text/plain">
<input id="firstName" type="text" name="BOB"/>First Name<br>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
Update your javascript like so:
<script type="text/javascript">
function verify() {
var name="Please enter your name: ";
if (document.myForm.firstName.value=="Bob") {
alert("Now registered");
return true;
}
else {
window.alert("Sorry you aren't allowed acess.")
return false;
}
}
</script>
Then update your HTML form to this:
<form name="myForm" action="#" method="post" enctype="text/plain">
<input type="text" name="firstName" value="">First Name<br>
<input type="button" value="Submit" onclick="verify();">
</form>
your onsubmit should be on the form handler (the open tag of the "form"), not on the button.
Several issues:
You don't have a javascript variable firstName anywhere. The script probably stops there.
Your form markup for the first name field is strange (why are you naming the text box "BOB"? You should give it an ID.
You need to access the form element in javascript properly.
When submitting a form, it is better to use a submit input type and hookup the form onsubmit (in this regard the answer by #Pravat is correct, though not on the other points).
This line does nothing - var name="Please enter your name: ";
Firstly the Javascript does not know what firstname is
To fix this you need to do two things:
Use the HTML <input name="BOB" id="firstName" value="" />. Note the id attribute, we'll use this to let the JS find the element we want to examine.
Then in Javascript we can find what the user has entered in the input using document.getElementById('firstName').value.
This should let you do your comparison.
To fix minor parts of your code, I believe you forgot to open your <body> tag
your also missing a } for your function
self-close your input and br tags
Try to use:
var firstName = document.getElementById('firstName').value;
and put missing } for verify function
see this..., you also have a } missing... just before the < /script> ... the missing } is the one that closes the verify function.