I have two HTML pages: firstpage.html and secondpage.html. In firstpage.html, there is a form-
firstpage.html:
<!DOCTYPE html>
<html>
<head>
<title>Form Filling</title>
</head>
<body>
<form action="secondpage.html" method="GET">
Enter Serial Number: <input type="number" name="serialNumber" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
The firstpage data is sent to secondpage.html. I want to display and use the form data serialNumber in secondpage.html-
secondpage.html:
<!DOCTYPE html>
<html>
<head>
<title>Display</title>
</head>
<body>
<form name="selva" action="thirdpage.html">
<input type="hidden" name="kumar">
</form>
<script type="text/javascript">
var locate=window.location;
document.selva.kumar.value=locate;
var text=document.selva.kumar.value;
function pass(str)
{
point=str.lastIndexOf('=');
return(str.substring(point+1,str.length));
}
document.write("Serial Number" + pass(text));
</script>
</body>
</html>
So now I can pass the serialNumber variable from firstpage.html to secondpage.html so that the above code in secondpage.html will show the serial nuimber, and I want same serial number in at thirdpage-
thirdpage.html:
<!DOCTYPE html>
<html>
<head>
<title>Repeating</title>
</head>
<body>
<form method="link">
Enter Serial Number2: <input type="number" name="burns" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
please tell how to print a data in all those pages?
The simplest method I could find for this is, write all the three pages in a single html file and display them based on conditions. This way you dont need to use localstorage.
Other method will be to use query parameters. You can simply learn how to use them. Here's the link to simple javascript-handled query params plugin:
http://jillix.github.io/url.js/
You can pass the serial no as a query parameter to another html. If you are confused on how to use this method, let me know and I'll tell you in detail.
Related
This is my first page.
<!DOCTYPE html>
<html>
<head>
<title>Student List</title>
</head>
<body>
<h1>Customer Form</h1>
<form>
<div>
<label>Customer Name:</label>
<input type="text" autofocus id="name">
</div>
<br>
<div>
<label>Address:</label>
<input type="text" id="address">
</div>
<button type="button" onclick="myFunction()">Submit</button>
</form>
<!-- JavaScript -->
<script type="text/javascript" src="./javascript.js"></script>
</body>
</html>
This is my second page.
<!DOCTYPE html>
<html>
<head>
<title>Student List</title>
</head>
<body>
<p id="1"></p>
<!-- JavaScript -->
</body>
</html>
MY JAVASCRIPT
function myFunction() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function(){
name = document.getElementById('name').value;
address = document.getElementById('address').value;
document.getElementById("1").innerHTML="<h1>alola="+name+"</h1>";
document.getElementById("2").innerHTML=address;
}
xhttp.open("GET", name);
xhttp.send();
}
I would like to display my name when typing my name from first page in the customer name label, and when i click submit. my second page display my name in the "id=1".
Ajax and ajax like techniques (fetch etc.) are usually used to either post data to a form or to get data from a url.
To send data from one HTML page to another you would need some kind of database and server side code to capture and store it and later retrive it.
If you just want inputed client side data to persist across pages then look at sessionStorage or localStorage, for example to keep the name we type until we exit the browser or clear session data:
First page:
<form>
<div>
<label>Customer Name:</label>
<input type="text" autofocus id="name">
</div>
<br>
<div>
<label>Address:</label>
<input type="text" id="address">
</div>
<button type="button" onclick="">Submit</button>
</form>
<script>
const name=document.getElementById('name')
name.addEventListener("keyup", (e) => {
sessionStorage.setItem('uname', name.value);
});
</script>
Second page:
<body>
<p id="usersName"></p>
<script>
let userNameElm = document.getElementById('usersName');
userNameElm.innerText = sessionStorage.getItem('uname');
</script>
</body>
Just remember to be careful what you store, and that it's only stored on the frontend/client side.
As described in the problem
I create two buttons. The one is used to add forms,the other one is used to submit data.However, after inputting data when i clicked on the button of submit,it didn't work
<%# page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GA'S WEB APPLY</title>
</head>
<body>
<script>var i=1</script>
<p>test is ing!</p>
<hr>
<div>
<form action="/webTest/TestWeb" method="post">
<input type=button onclick="document.body.insertAdjacentHTML('beforeEnd','<input type=text name='+i+' value='+i+++'> ')" value=add />
<input type="submit" value="submit" />
</form>
</div>
</body>
</html>
Problem in your code is with '' quotes as well as ,whenever you append new input it appear out of <form></form> tag , so whenever you submit your form that value doesn't passed to your backened page and will always return null. Instead do like below :
var i = 1
$(document).ready(function() {
//location to add new inputs
var to_Add_at = $(".inputs");
var add_button = $("input[name='add']");
//on click of button
$(add_button).click(function(e) {
e.preventDefault();
$(to_Add_at).append('<input type=text name='+i+' value='+i++ +'>'); //add input box
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form action="/webTest/TestWeb" method="post">
<input type="button" value="add" name="add" />
<div class="inputs"></div>
<input type="submit" value="submit" />
</form>
As I can not see the backend data or anything else besides the code. I would say
1. File location wrong?
2. Page language should be javascript
3. Add quatations "" around value = add
I am currently writing a function that writes a bit of code for me based on an input. I am currently working on creating the input and the code that pastes the input, but whenever it writes, it shows up as undefined. This is the code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Javascript YAML Generator</title>
</head>
<body>
<form class="yamlform" action="index.html" method="post">
<input type="text" name="appname" value="Name">
<button type="submit" onclick="writeAppName()">Submit</button>
</form>
<script type="text/javascript">
var appname = document.getElementsByName("appname").value
function writeAppName() {
document.write(appname)
}
</script>
</body>
</html>
NOTE: This is not my final version of the code, at the moment I just want a system for writing an input value that I can duplicate. Final version will be using document.getElementbyID.
document.getElementsByName returns colection. Use document.getElementsByName("appname")[0].value.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Javascript YAML Generator</title>
</head>
<body>
<form class="yamlform" action="index.html" method="post">
<input type="text" name="appname" value="Name">
<button type="submit" onclick="writeAppName()">Submit</button>
</form>
<script type="text/javascript">
var appname = document.getElementsByName("appname")[0].value
function writeAppName() {
document.write(appname)
}
</script>
</body>
</html>
You need to refer to the first element with name "appname", because it could be a collection. Also I but the assignment for appanme variable inside of the function, this will make it so appname isn't being assigned to "Name" right away and is instead assigned to whatever is in the text box when you click the botton
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Javascript YAML Generator</title>
</head>
<body>
<form class="yamlform" action="index.html" method="post">
<input type="text" name="appname" value="Name">
<button type="submit" onclick="writeAppName()">Submit</button>
</form>
<script type="text/javascript">
function writeAppName() {
var appname = document.getElementsByName("appname")[0].value
document.write(appname)
}
</script>
</body>
</html>
The problem is with your document.getElementsByName
It is possible that multiple elements would have same name.
While using document.getElementsByName, there might be multiple elements instead of a single element present in DOM with similar name, so document.getElementsByName returns an array (a list of elements) and not a single element
To use different elements of the Array, use
document.getElementsByName("appname")[0] // For first element with name
document.getElementsByName("appname")[1] // For second element with name
// and so on
So in your code, you would use
var appname = document.getElementsByName("appname")[0].value;
i am trying to pass the values from one html page to another html page but i am getting some errors..
below is my html page one code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function first() {
location.href = "onclick2.html";
}
</script>
</head>
<body>
<button onclick="first()" >Home</button>
<form action="onclick2.html" method="post">
<input type="text" name="sender" />
<input type="submit" value="send"/>
</form>
</body>
</html>
below is my html page 2 code
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function first() {
location.href = "onclick.html";
}
</script>
</head>
<body>
<button onclick="first()">Home2</button>
<form action="onclick.html" method="get">
<input type="text" name="reciver" />
</body>
you can pass value in url and transfer it as given below :
location.href = "http://www.domainname.com/login.html?FirstName=admin&LastName=admin"
i have problem on sending textbox value from one html page to another html page.
In first page i am sending first name and last name values.and i want to catch this value in textbox on the second page( i.e home.html).but some erroe occurs.
error is :Uncaught TypeError: Cannot set property 'value' of null
how to solve? please tell me.
i know this stupid question.but please tell me guys.i don't know javascript.
this is my html code:
<!DOCTYPE html">
<html>
<head>
<script src="ttt.js"></script>
</head>
<body>
<form method="get" action="home.html" name="ff">
Firstname: <input id="f" type="text" name="firstname1">
Lastname: <input type="text" name="lastname">
<input type="submit">
</form>
</body>
</html>
this is my home.html code:
<!DOCTYPE html">
<html>
<head>
<script src="ttt.js"></script>
<script Language="JavaScript">
var tttt=val();
document.getElementById('text').value=tttt;
</script>
</head>
<body>
<form name="ff">
<input id="text" class="text" type="text" name="MyValue" value="helloS"/>
</form>
</div>
</body>
</html>
this is my javascript code(ttt.js)
function val(){
var link=location.href;
var str=link.split('?');
var str1=str[1].split('&');
var str11=str1[0].split('=');
var str12=str1[1].split('=');
var temp=str11[1]+" "+str12[1];
return(temp);
}
Put your javascript at the end of your html and change document.getElementById('tr') to document.getElementById('text'). You have no element with id tr.
please look at this question and its answers, it is demonstating how to pass value from one html page to another
link
You have to do getElementById('tr') when the dom is ready and ensuring that an element with the ID exists.