CODEWITHSUNDEEP
javascripthtmltextboxmove
user3403327
user3403327

Reputation: 65

Passing values of textbox to another page html

Hi guys this may be a silly question but if I have a html page open that contains a textbox is it possible to move the value of that textbox to another page onces a button is clicked?

So "page1.html" has a textbox called "TextboxName", User types in name "John", button is clicked and then that Page is closed and "John" is moved to the textbox on "page2.html"

Thanks in advance for any help this problem really has stumped me!

Upvotes: 1

Views: 18455

Answers (4)

Thomas Junk
Thomas Junk

Reputation: 5676

That depends on how much effort and work you want to put into your project.

One easy -but not secure- solution is possible via querystrings. You could pass via HTTP-GET any parameter from A to B.

Hence it is provided als plaintext, it is obvious, that this method is not very safe. Anybody could change the input at any given time. And the result depends on the malicious potential of your attacker. Look here for a simple introduction to Cross Site Scripting (XSS).

Another possibility is via HTTP-Post (See Specification).

Then it depends on which backend you are using. The backend receives the data from A and renders it to B.

Upvotes: 0

Jatin
Jatin

Reputation: 3089

Try Below Code:

Page1.html:

<html>
  <form type=get action="page2.html">
  <table>
    <tr>
    <td>First Name:</td>
    <td><input type=text name=firstname size=10></td>
    </tr>
    <tr>
    <td>Last Name:</td>
    <td><input type=text name=lastname size=10></td>
    </tr>
    <tr>
    <td>Age:</td>
    <td><input type=text name=age size=10></td>
    </tr>
    <tr>
    <td colspan=2><input type=submit value="Submit">
    </td>
    </tr>
  </table>
  </form>
</html>

Page2.html:

<html>
<script LANGUAGE="JavaScript">
  function getParams(){
  var idx = document.URL.indexOf('?');
  var params = new Array();
  if (idx != -1) {
    var pairs = document.URL.substring(idx+1, document.URL.length).split('&');
  for (var i=0; i<pairs.length; i++){
    nameVal = pairs[i].split('=');
    params[nameVal[0]] = nameVal[1];
    }
  }
  return params;
 }
params = getParams();
firstname = unescape(params["firstname"]);
lastname = unescape(params["lastname"]);
age = unescape(params["age"]);
document.write("firstname = " + firstname + "<br>");
document.write("lastname = " + lastname + "<br>");
document.write("age = " + age + "<br>");
</script>
</html>

Upvotes: 1

Preston S
Preston S

Reputation: 2771

On page1.html do:

function onClickHandler(){
    location.href = 'page2.html?name=' + document.getElementById('TextBoxName').value;
}

then on page2.html do:

function parseQueryString()
{
    var queryDict = {}
    location.search.substr(1).split("&").forEach(function(item) {
        queryDict[item.split("=")[0]] = item.split("=")[1]
    });

    return queryDict;
}

function onLoadHandler(){
    document.getElementById('TextBoxName').value = parseQueryString().name;
}

Upvotes: 0

simonmoonlandings
simonmoonlandings

Reputation: 157

This can be done, but it requires something other than just plain html. Javascript or PHP could easily accomplish such a function.

See this: How to pass variables from one php page to another without form?

Or try javascript + AJAX: http://www.w3schools.com/ajax/ajax_intro.asp

and: http://www.javascripter.net/faq/passingp.htm

You could also store the information in a cookie and access it that way: http://www.javascripter.net/faq/cookies.htm

or just use angular: http://docs.angularjs.org/guide/databinding

Upvotes: 0

Related Questions