How to post values of HTML form to new HTML page using javascript

Question

I have a HTML form on 'page1.html' with four elements (textbox1, textbox2, listbox1, listbox2). on clicking submit, i want the values of these elements to be posted in table to new page (page2.html)

Table in page 2 is as follows:

First row : value of textbox1
Second row column 1: value of textbox2
Second row column 2: value of listbox1
Third row: value of listbox2

Please help

Which server-side language are you using? Do you want to do all this in js only? — Wolf
– Wolf, Commented Jan 20, 2013 at 10:14
The only way that you can accomplish that is either, pass those values as a query string or stored it in a database so it can be persisted when going to the other page. Or even cookie in a desperation attempt.. — Dennis Rongo
– Dennis Rongo, Commented Jan 20, 2013 at 10:14
looking for a javascript solution only. or can i have the table hidden in same page and post values to table after submit? — user1994366
– user1994366, Commented Jan 20, 2013 at 10:18

Hary · Accepted Answer · 2013-01-20 10:38:40Z

3

With plain html and javascript you can do like this

page1.html

<input type="text" id="txt1" />
<input type="button" value="Submit" onclick="postData()" />

javascript

function postData(){
    var val = document.getElementById("txt1").value;

    var tbl = "<table><tr><td>"+val+"</td></tr></table>";

    var w = window.open("page2.html");

    w.document.write(tbl);
}

edited Jan 20, 2013 at 10:38

answered Jan 20, 2013 at 10:18

Hary

5,8368 gold badges49 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1994366 Over a year ago

submit does not open page2.html

Hary Over a year ago

@user1994366 Check the code now. I changed this var tbl = "<table><tr><td>".val."</td></tr></table>"; to this var tbl = "<table><tr><td>"+val+"</td></tr></table>";

Hary Over a year ago

@user1994366 In javascript the concatenation operator is + but i used wrongs as . and so you may be getting errors, try the updated code now.

Wolf · Accepted Answer · 2013-01-20 10:33:59Z

2

Here You can use a form with type = GET and action="page2.html"

Then in page2.html, in pageload use the following function to extract the URL parameters

function getURLParameter(name) {
    return decodeURI(
        (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
    );
}

Demo:

Page1.html

<form type="GET" action="page2.html">
<input name="text" id="txt" />
</form>

Page2.html

<script>
function getURLParameter(name) {
    return decodeURI(
        (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
    );
}
alert(getURLParameter("text"));
</script>

edited Jan 20, 2013 at 10:33

answered Jan 20, 2013 at 10:21

Wolf

2,1351 gold badge15 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to post values of HTML form to new HTML page using javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related