passing form data to another HTML page

Question

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?

@Eric: I can't run PHP since I'm writing mobile web apps. So I can only use HTML and JavaScript. — tonga, Feb 04 '13 at 19:16
@tonga Why can't you use a server-side technology? "because you're writing mobile web apps" isn't really an answer. Any app that can be viewed on a mobile browser is still just a web app, hosted by a server. Do you have hosting restrictions that don't permit the use of dynamic page languages? — Peter, Feb 04 '13 at 19:19
@Peter: My mobile app is a local app. So it does not connect to any web server. That's why I can't use a server-side technology. — tonga, Feb 04 '13 at 19:27
Ok, that's helpful to know. You might consider stating this in the question. — Peter, Feb 04 '13 at 19:38

score 47 · Accepted Answer · edited May 23 '17 at 12:10

47

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.

edited May 23 '17 at 12:10

Community

1
1

answered Feb 04 '13 at 19:17

Richard JP Le Guen

28,364
7
89
119

2

@tonga See [How can I get query string values](http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values) for examples and methods of processing the query-string. – Boaz Feb 04 '13 at 19:19
1

@tonga Edited a couple of minutes ago. Try reloading. – Boaz Feb 04 '13 at 19:23
@Richard: Thanks for pointing to the query string. Since I'm doing mobile web apps, all HTML files are stored locally on the phone. So does query string work as if it works on regular websites? – tonga Feb 04 '13 at 19:25
1

@tonga - I'm not sure they will, but you should just try and see if it works. If it doesn't use cookies and check out the second question I linked to. Cookies should work, but they can be messier since they have a longer lifespan than query string parameters. – Richard JP Le Guen Feb 04 '13 at 19:27
@Richard: Thanks. I will give a try to see if it works on phone locally as well. – tonga Feb 04 '13 at 19:29
@Richard: I just used the query string in the second html file display.html but it doesn't work properly. It works on my desktop browser and shows the serial number I entered in the first page. But when I tried on my Android phone, it shows blank page without any serial number info. I guess maybe it's related to the different behavior of Android browser as compared to desktop browser like Firefox? – tonga Feb 04 '13 at 20:30
1

@Richard: I just retried it and finally it works on my phone. I think something was messed up so I didn't see the parsed query string initially. Thanks a lot. – tonga Feb 04 '13 at 22:43
Yes, it works. When I entered "ABC" in the first page and clicked "Submit" button, it went to the second page and the popup message box shows "ABC" after the query string gets parsed. – tonga Feb 04 '13 at 22:50
@RichardJPLeGuen My form contains 6 fields and when using the GET method to send the data, only the last input value is present in the URL – Snake Eyes May 31 '16 at 19:59
Is this a security risk if used for sensitive content like passwords? – little tiny man Aug 31 '17 at 07:24
In the URL as a query string parameter? Yes. – Richard JP Le Guen Aug 31 '17 at 11:33

score 10 · Answer 2 · answered Feb 04 '13 at 19:20

10

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;
}

answered Feb 04 '13 at 19:20

Joshua Wooward

1,508
2
10
12

that code is causing a browser error for me! *Your file was not found* – Sep 23 '16 at 22:00

Weslley Rufino de Lima · Answer 3 · 2020-02-07T12:51:38.357

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

Kalyan · Answer 4 · 2021-08-21T10:35:42.497

<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>

bilalmohib · Answer 5 · 2020-07-18T10:06:05.393

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.

score 2 · Answer 6 · answered Jul 28 '15 at 05:03

2

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>

answered Jul 28 '15 at 05:03

Satish

63
5

score 0 · Answer 7 · edited Jun 08 '16 at 18:53

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>

score 0 · Answer 8 · answered Sep 20 '17 at 07:23

0

*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.

answered Sep 20 '17 at 07:23

Vna

21
2

This answer is for java supported servers. But the question is only html. – Kalyan Mar 10 '19 at 05:13

passing form data to another HTML page

8 Answers8

Important Note:

Linked

Related