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

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

• javascript
• html

Share Improve this question Follow edited Jan 20, 2013 at 10:13 user1994366 asked Jan 20, 2013 at 10:10 user1994366user1994366 4311 silver badge44 bronze badges 4

• Which server-side language are you using? Do you want to do all this in js only? – Wolf Commented Jan 20, 2013 at 10:14
• 1 The only way that you can acplish 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 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 Commented Jan 20, 2013 at 10:18
• Ok. In that case you can try my answer. – Wolf Commented Jan 20, 2013 at 10:27

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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);
}

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>