cannot pass values from text box to display it in another HTML page

Question

I have already created a HTML file for these using edit box

<form name="form1" action="form1.html"  method="get">    
  <img src="index.jpeg" alt="Register" width="100" height="100" align="middle"><br>
  <b>First name: </b><input type="text" name="firstname" id="fname"><br>    
  <b>Last name: </b><input type="text" name="lastname"><br>    
  <b>Password: </b> <input type="password" name="pwd"><br><br>

I cannot pass this values to this variables and ID and display it in another HTML file

function func () {    
  var firstname = document.form1.fname.value;     
  document.getElementById("demo").innerHTML=firstname;   

  var lastname=document.form1.lname.value;    
  document.getElementById("demo").innerHTML=lastname;    
}

Please help me in this

Please clarify what do you mean when you say display it in another HTML file and put your piece of code that is trying to put this data in this other place — Alessandro, Jul 18 '14 at 13:32
JavaScript cannot reach across pages to access the `id="firstname"`, etc. that was previously displayed. Those elements, with the state they had, are no longer in existence after navigation occurs. But, with `method="get"`, the `
`'s values will be included in the 2nd page's address. See [How can I get query string values in JavaScript?](http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript) — Jonathan Lonowski, Jul 18 '14 at 13:36

score 0 · Accepted Answer · edited May 23 '17 at 12:05

0

You can't pass values between pages with Javascript like that. The reason is that Javascript is a client-side scripting language, meaning it runs in the user's browser and has no interaction with the servers (unless you're using AJAX, which you're not).

In order to pass variables and data between pages, you'll need to user a server-side language like PHP.

Submit the form to the page you want to display it on, and then use this code:

<?php
    $firstName = $_GET["firstname"];   // set firstname to the name field of your input
?>

This grabs the values you've passed to that page using the form. If you are submitting the form using the POST method, you'll need to use $_POST["firstname"] instead of $_GET.

Then you can put it on the page by using:

<?php
    echo $firstName;
?>

EDIT

As commented below, @AlessandroNiciforo is correct. If you are using GET, then you can retrieve the data using Javascript on the next page. This is because GET appends the data onto the URL of the next page.

As suggested here, use something like this:

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,     function(m,key,value) {
        vars[key] = value;
    });
   return vars;
}

and call it with

var first = getUrlVars()["id"];
var second = getUrlVars()["page"];

Keep in mind that if you're working with sensitive data (passwords, addresses, etc), you'll want to use POST instead of GET. POST will keep all the data on the server side. This prevents malicious users from getting that sensitive info.

edited May 23 '17 at 12:05

Community

1
1

answered Jul 18 '14 at 13:32

dartanian300

247
2
16

He's using the method GET, so $_POST wouldn't work... and I'd say to use php, too. But it isn't true that he can get this data through javascript. He can access through javascript all the data inside the url including the query part – Alessandro Jul 18 '14 at 13:34
Just to confirm,Can I pass values using Jquery and it would be helpful for me if I know how to pass a value using Jquery – Manikandan Jul 18 '14 at 13:35
3

@Manikandan why do you want to use jquery? – Alessandro Jul 18 '14 at 13:36
@AlessandroNiciforo you're right, my bad. So used to using POST myself that I forgot to check what he was using. I've updated my answer. – dartanian300 Jul 18 '14 at 13:40
+1 for @Alessandro Niciforo and dartanian300 for helping me in this – Manikandan Jul 21 '14 at 03:55
2

could you please explain whats the use of "id" and "page". var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { vars[key] = value; }); – Manikandan Jul 21 '14 at 04:43
1

@Manikandan "id" and "page" are simply examples of what the GET variable is named. For example, if your URL was http://www.something.com?page=2&dog=5, then getUrlVars()["page"] would equal 2, and getUrlVars()["dog"] would equal 5. – dartanian300 Jul 22 '14 at 12:25

cannot pass values from text box to display it in another HTML page

1 Answers1