I have two HTML pages: form.html and display.html. In form.html, there is a form:
<form action="display.html">
<input type="text" name="serialNumber" />
<input type="submit" value="Submit" />
</form>
The form data is sent to display.html. I want to display and use the form data serialNumber in display.html, as shown below:
<body>
<div id="write">
<p>The serial number is: </p>
</div>
<script>
function show() {
document.getElementById("write").innerHTML = serialNumber;
}
</script>
</body>
So how can I pass the serialNumber variable from form.html to display.html so that the above code in display.html will show the serial number and the JavaScript function show() gets the serialNumber from the first HTML?
If you have no option to use server-side programming, such as PHP, you could use the query string, or GET parameters.
In the form, add a method="GET" attribute:
<form action="display.html" method="GET">
<input type="text" name="serialNumber" />
<input type="submit" value="Submit" />
</form>
When they submit this form, the user will be directed to an address which includes the serialNumber value as a parameter. Something like:
http://www.example.com/display.html?serialNumber=XYZ
You should then be able to parse the query string - which will contain the serialNumber parameter value - from JavaScript, using the window.location.search value:
// from display.html
document.getElementById("write").innerHTML = window.location.search; // you will have to parse
// the query string to extract the
// parameter you need
See also JavaScript query string.
The alternative is to store the values in cookies when the form is submit and read them out of the cookies again once the display.html page loads.
See also How to use JavaScript to fill a form on another page.
You need the get the values from the query string (since you dont have a method set, your using GET by default)
use the following tutorial.
http://papermashup.com/read-url-get-variables-withjavascript/
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
Another option is to use "localStorage". You can easealy request the value with javascript in another page.
On the first page, you use the following snippet of javascript code to set the localStorage:
<script>
localStorage.setItem("serialNumber", "abc123def456");
</script>
On the second page, you can retrieve the value with the following javascript code snippet:
<script>
console.log(localStorage.getItem("serialNumber"));
</script>
On Google Chrome You can vizualize the values pressing F12 > Application > Local Storage.
Source:
https://www.w3schools.com/jsref/prop_win_localstorage.asp
Using pure JavaScript.It's very easy using local storage.
The first page form:
function getData()
{
//gettting the values
var email = document.getElementById("email").value;
var password= document.getElementById("password").value;
var telephone= document.getElementById("telephone").value;
var mobile= document.getElementById("mobile").value;
//saving the values in local storage
localStorage.setItem("txtValue", email);
localStorage.setItem("txtValue1", password);
localStorage.setItem("txtValue2", mobile);
localStorage.setItem("txtValue3", telephone);
}
input{
font-size: 25px;
}
label{
color: rgb(16, 8, 46);
font-weight: bolder;
}
#data{
}
<fieldset style="width: fit-content; margin: 0 auto; font-size: 30px;">
<form action="action.html">
<legend>Sign Up Form</legend>
<label>Email:<br />
<input type="text" name="email" id="email"/></label><br />
<label>Password<br />
<input type="text" name="password" id="password"/></label><br>
<label>Mobile:<br />
<input type="text" name="mobile" id="mobile"/></label><br />
<label>Telephone:<br />
<input type="text" name="telephone" id="telephone"/></label><br>
<input type="submit" value="Submit" onclick="getData()">
</form>
</fieldset>
This is the second page:
//displaying the value from local storage to another page by their respective Ids
document.getElementById("data").innerHTML=localStorage.getItem("txtValue");
document.getElementById("data1").innerHTML=localStorage.getItem("txtValue1");
document.getElementById("data2").innerHTML=localStorage.getItem("txtValue2");
document.getElementById("data3").innerHTML=localStorage.getItem("txtValue3");
<div style=" font-size: 30px; color: rgb(32, 7, 63); text-align: center;">
<div style="font-size: 40px; color: red; margin: 0 auto;">
Here's Your data
</div>
The Email is equal to: <span id="data"> Email</span><br>
The Password is equal to <span id="data1"> Password</span><br>
The Mobile is equal to <span id="data2"> Mobile</span><br>
The Telephone is equal to <span id="data3"> Telephone</span><br>
</div>
Important Note:
Please don't forget to give name "action.html" to the second html file to work the code properly. I can't use multiple pages in a snippet, that's why its not working here try in the browser in your editor where it will surely work.
<form action="display.html" method="get">
<input type="text" name="serialNumber" />
<input type="submit" value="Submit" />
</form>
In display.html you should add the following code.
<script>
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
var sn = getParameterByName('serialNumber');
document.getElementById("write").innerHTML = sn;
</script>
Use "Get" Method to send the value of a particular field through the browser:
<form action="display.html" method="GET">
<input type="text" name="serialNumber" />
<input type="submit" value="Submit" />
</form>
If your situation is as described;
You have to send action to a different servelet from a single form and you have two submit buttons and you want to send each submit button to different pages,then your easiest answer is here.
For sending data to two servelets make one button as a submit and the other as button.On first button send action in your form tag as normal, but on the other button call a JavaScript function here you have to submit a form with same field but to different servelets then write another form tag after first close.declare same textboxes there but with hidden attribute.now when you insert data in first form then insert it in another hidden form with some javascript code.Write one function for the second button which submits the second form. Then when you click submit button it will perform the action in first form, if you click on button it will call function to submit second form with its action. Now your second form will be called to second servlet.
Here you can call two serveltes from the same html or jsp page with some mixed code of javascript
An EXAMPLE of second hidden form
<form class="form-horizontal" method="post" action="IPDBILLING" id="MyForm" role="form">
<input type="hidden" class="form-control" name="admno" id="ipdId" value="">
</form>
<script type="text/javascript">
function Print() {
document.getElementById("MyForm").submit();
}
</script>
*first html page*
<form action="display.jsp" >
<input type="text" name="serialNumber" />
<input type="submit" value="Submit" />
</form>
*Second html page*
<body>
<p>The serial number is:<%=request.getParameter("serialNumber") %></p>
</body>
you will get the value of the textbox on another page.
I have the below code which allows me to dynamically add additional text fields when the button is pressed. I'm essentially mocking up multiple destinations along a route.
<!doctype html>
<head>
<title>Test</title>
</head>
<body>
<div id="form">
<form id="address">
<p>Route:</p>
<input type="text" name="Address" placeholder="Origin">
<input type="text" name="Address" placeholder="Destination">
<button type="button" id="add" onclick="addField('address')">Add field</button>
</form>
</div>
<script type="text/javascript">
function addField(id) {
// OnClick function for adding additonal fields for
// transit routes with multiple destinations.
var field = `<br/><br/>
<input type="text" name="Address" placeholder="Origin">
<input type="text" name="Address" placeholder="Destination">`
document.getElementById(id).innerHTML += field
}
</script>
</body>
</html>
I can fetch an array of all the elements within:
var elements = document.getElementById("address").elements;
But what I want to do is link every Destination field to the next Origin field, so that the Destination in the last field ends up as the Origin for the next row. I imagine it's something like below, but it's not clicking in my head.
elements[elements.indexOf(this)-1].value;
I've got on my index.php form with POST method.
Action is form.php, so it's different file, but I'm using iframe to show my result, still being at index.php.
One more thing that I need, is to show one of my text inputs, still on index.php, when I do click submit button. I've tried to use onClick action:
<script type="text/javascript">
function showamount()
{
var price = document.getElementById('amount').value;
document.getElementById("some_p").innerHTML = price;
}
</script>
<input type="text" id="amount" />
<input type="submit" value="Podlicz" onclick="showamount()" />
<p id="some_p"></p>
It does not work there, when submit button is dedicated to form, with an action (I suppose, because it works without form, when is pure like above)
What is wrong? Thanks!
Try this <form id="form" onSubmit="return showamount();" action="form.php" target="_blank">
That will open a new window to run the form.php and will also update current page with inputed value.
javascript
<script>
function showamount()
{
var price = document.getElementById('amount').value;
document.getElementById("some_p").innerHTML = price;
return true;
}
</script>
html
<form id="form" onSubmit="return showamount();" action="form.php" target="_blank">
<input type="text" id="amount" />
<input type="submit" value="Podlicz" onclick="showamount()" />
</form>
<p id="some_p"></p>
I am looking to create a button at the bottom of a form that will create an alert box that will show the form data entered. Form includes:
First Name
Last Name
Address 1
Address 2
City
State
Zip
Phone
Fax
Once the form is completed, the button is clicked and an alert box pops up showing the form data entered.
Does anyone know how to accomplish without the form actually being submitted or validated? There is no database for the form data to be submitted to, so there is no database to pull the information from.
Any help would be greatly appreciated.
I have not included the form code due to its length, but the current code I am working with for the Alert Box looks like this:
<script>
function display_alert()
{
alert("");
}
</script>
<body>
<input type="button" onclick="display_alert()" value="Display alert box">
</body>
If I get it right you need something like this:
<html>
<head>
<script type="text/javascript">
window.onload = function(){
document.getElementById('send').onclick = function(e){
alert(document.getElementById("name").value);
return false;
}
}
</script>
</head>
<body>
<form method="post">
<input type="text" name="name" id="name" />
<input type="submit" name="send" id="send" value="send" />
</form>
</body>
</html>
I don't really get what you mean with a database to pull the information from, but the example uses a click event to get the data from the form field and shows it in an alert without a submit.
html code:
<html>
<SCRIPT SRC="PR8_4.JS"></SCRIPT>
<body>
<form name=details>
<table>
<tr><td>ENTER FRIST NAME:<input type=text name=fname></td></tr>
<tr><td>ENTER LAST NAME:<input type=text name=lname></td></tr>
<tr><td>ENTER PHONE NUM :<input type=text name=phnum></td></tr>
</table>
<input type="button" value="Click Me" onclick="display();">
</form>
</body>
</html>
javascript code:
function display()
{
var x=document.details.fname.value;
var y=document.details.lname.value;
var z=document.details.phnum.value;
alert("FIRST NAME:"+x+" "+"LAST NAME:"+y+" "+"PHONE NUMBER:"+z);
}
To stop a form submitting you can create an onsubmit event within the tag and return false - e.g. ...form elements.... This has the benefit of working when someone submits the form by pressing the enter key as well as pressing the submit button.
Thus, to achieve what you desire you could create a function (lets call it formAlert) and call it from the onsubmit event e.g. ...form elements...
The formAlert function would look something like:
function formAlert() {
alert_string = '';
alert_string = alert_string + document.getElementById('first_name').value;
alert_string = alert_string + ' ';
alert_string = alert_string + document.getElementById('last_name').value;
alert(alert_string);
}
and this would correspond to a form looking like:
<form id="foo" onsubmit="formAlert(); return false;">
<p><label for="first_name">First Name<label><input type="text" id="first_name" value="fred" /></p>
<p><label for="last_name">Last Name<label><input type="text" id="last_name" value="blogs" /></p>
<p><input type="submit" value="click me" /></p>
</form>
Note1, this won't be a pretty modal box - it'll simply display "fred blogs" in a Javascript alert box.
Note2, if there is a Javascript error your form will still submit (although in the example here it'll submit to itself).
Here is a JS Fiddle demonstrating the above code: http://jsfiddle.net/D59su/
I think this might be what you're looking for:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="javascriptform.css">
</head>
<body>
<form name= "details"><div class="box1"><div id="a"><input type="text" name="lastname" placeholder="LAST NAME"></div><br>
<div id="b"><input type="text" name="firstname" placeholder="FIRST NAME"></div><br>
<div id="c"><input type="e-mail" name="email" placeholder="E-MAIL"></div><br>
<div id="d"><input type="password" name="password" placeholder="PASSWORD"></div><br>
<div id="sub-button"><button onclick="getdetails();">submit</button></div></form>
</div>
<script>
function getdetails()
{
var a = document.forms["details"]["lastname"].value;
var b = document.forms["details"]["firstname"].value;
var c= document.forms["details"]["email"].value;
alert("Your name is "+a+" "+b+". Your e-mail is "+c);
}
</script>
</body>
</html>
It Is Very Simple
Using .value will help.
HTML:
<form onsubmit="return myFunction()>
<input type="text" id="name>
<input type="submit" value="SEND">
Use return before your function
Javascript:
function myFunction () {var name = document.getElementById("name").value; alert("Hi " + name)}
After Submitting It Will Show As (If I Write Alex and Submit It)
Hi Alex
Hope it will work
I have a very simple form with three fields that I need to submit to an mvc action. The form must be application/x-www-form-urlencoded. however, one of the fields is populated by users copying and pasting an already urlencoded value. I would like to decode that value prior to submitting the form. this seems really simple but I keep running into proplems with my javascript.
Here is the code:
<html>
<head>
<script>
function decodeURI()
{
decodeURIComponent(document.createprofile.URI.value);
}
</script>
<title>Test Create</title>
</head>
<body>
<center>
<h1> Spoof Profile Calls </h1>
<hr>
<div style="border: 1px solid black; width: 300px;">
<b>Create</b>
<form method="post" action="https://test.test-lab.com/Profile/Create/" name="createprofile">
<input type="hidden" name="ReturnURL" value="self.close()">
UserName: <input type="text" name="UserName"><br />
Client: <input type="text" name="Client"><br />
URI: <input type="text" name="URI" onblur="decodeURI();"><br />
<input type="submit" formenctype="application/x-www-form-urlencoded" value="Go To - Create"><br />
</form>
</div>
</body>
</html>
The URI field is the one that needs url decoded prior to submission because it gets reencoded and thus corrupted. I could ask the users to un-encode these values themselves but they are not terribly sophisticated users and it will likely not happen.
Thank you in advance!
UPDATED WITH FAILING CODE
Replace the line
URI: <input type="text" name="URI" onblur="decodeURI();"><br />
by
URI: <input type="text" name="URI" onchange="decodeURI(this);"><br />
And do something like
function decodeURI(elm) {
elm.value = 'foo ' + elm.value + ' bar';
return false;
}