HTML form entries to Html Page using JavaScript only and Not using PHP?

Question

Hi i am new to this subject and I have a HTML form and I need to display the form field values in another page after user clicks the submit button. How can I do this using HTML and JavaScript only using "GET" or "POST" methods?

I know How to do this using PHP

So plz help me to solve the problem without using PHP

I suppose you want to do it without navigating to a different page? If so, look up `ajax`. — KBN, Mar 23 '15 at 12:16
Many answers below use GET parameters, but you can also use cookies or browser storage. I would use [DOM Storage](https://developer.mozilla.org/en/docs/Web/Guide/API/DOM/Storage) if the URL is not important for SEO. That way you can use data on several pages, in several sessions, the URL is not ugly, etc. — skobaljic, Mar 23 '15 at 12:19
Thank You but I want to navigate to a different page. I am using GET method but not able to print the values — Rookie, Mar 24 '15 at 04:56

score 2 · Answer 1 · edited May 23 '17 at 12:28

You have to read the field values in html1.html and create a new url with attached field values in the querystring as you can see below. Use window.location.href to call the second page with these new parameters.

    var name = "Peter";
    var age = 22;

    var newUrl = "http://siteToPostTo.com/html2.html" + "?";
    newUrl += "name=" + name;
    newUrl += "&age=" + age;
    window.location.href = newUrl;

How can I get query string values in JavaScript?

score 0 · Answer 2 · edited May 23 '17 at 11:43

0

You could read the parameters of the URL with JavaScript (you have to use GET), look at this question:

Read URL Parameter

After that, you can select nodes in your document and add the text to them. I've never done this; you should use php, it is much easier.

edited May 23 '17 at 11:43

Community

1
1

answered Mar 23 '15 at 11:56

maxeh

1,373
1
15
24

Thank You, I Know it is easier with PHP. I just need it be done in javascript – Rookie Mar 25 '15 at 05:40

score 0 · Answer 3 · edited May 23 '17 at 12:22

You can use the get methond on your form, and then in your second page read the data from the get request using javascript, or you can send the data also using javascript.

Simple html form for sending the data:

<form action="yourpage.html" method="get" ">
  <input type="text"  id="name" name="name"> 
  <input type="submit" value="Submit">
 </form>

html form + Javascript for sending the data:

<form id="form" name="form"  onsubmit="sendForm()"> 
  <input type="text"  id="name" name="name"> 
  <input type="submit" value="Submit">
</form>


function sendForm()
{
    var name = document.forms["form"]["name"].value;
    window.location = "yourpage.html?name="+name;
}

Then on yourpage.html read the query string values. For query string values reading use this: How can I get query string values in JavaScript?

Thank You. I want to use GET or POST methods for displaying the values in next page when submitted in current form — Rookie, Mar 24 '15 at 05:00
My answer is sending the data as a get request. I've also updated the answer because you can also send the data without using the javascript function. — MQ87, Mar 24 '15 at 18:48

HTML form entries to Html Page using JavaScript only and Not using PHP?

3 Answers3