www.webdeveloper.com
Results 1 to 10 of 10

Thread: Pass Variables from one page to another - JAVASCRIPT// HTML

  1. #1
    Join Date
    Jul 2010
    Posts
    21

    Pass Variables from one page to another - JAVASCRIPT// HTML

    Hello Guys!

    I'm still new with javascript. I need help with passing the variables from one page to another. My page has a form (HTML) and what i would like to do is that when i click on submit, the variables or text inputted in the FIRST NAME FIELD, LAST NAME FIELD and ETC would show in the second page. Pls help... i really need to know the basics. I cant seem to find the code. thanks

    PS - I COULD add the codes here if needed.

  2. #2
    Join Date
    Jul 2010
    Location
    Sofia, Bulgaria
    Posts
    49
    Well, the easiest way would be to use server-side scripting (anyway in most cases a form needs to be passed to the server for further processing) by sending the form fields via GET or POST methods. I'll provide a example using PHP:
    Code:
    page1.php
    -----
    ...
    <form method="POST" action="page2.php">
        <input type="text" name="field" value="Enter value here" />
    </form>
    ...
    Code:
    page2.php
    -----
    ...
    <form method="POST" action="page3.php">
        <input type="text" name="field" value="<?php echo($_POST['field']) ?>" />
    </form>
    Would that help?

  3. #3
    Join Date
    Mar 2010
    Posts
    2,803
    If you're limited to client-side processing only, then 2 option you have include:

    1) using cookies to store the form data

    2) pass the form data as query string to another html page.
    You would then need to extract the invidual parameters from the query string in the second html page.

    Maybe use this as a guide to extract the parameters from the query string.

    PHP Code:
    <html>
    <
    head>
    <
    title>Form Processor</title>
    </
    head>
    <
    body>
    <
    script type="text/javascript">
    <!-- 
    HIDE FROM INCOMPATIBLE BROWSERS
    if (window != top)
     
    top.location.href=location.href
    document
    .write("<h1>Your form has been submitted!</h1><h2>You entered the following data:</h2>");

    var 
    formData location.search;
    formData formData.substring(1formData.length);

    while (
    formData.indexOf("+") != -1) {
     
    formData formData.replace("+"" ");
    }

    formData unescape(formData);
    var 
    formArray formData.split("&");

    for (var 
    i=0formArray.length; ++i) {
     
    document.writeln(formArray[i] + "<br />");
    }

    // STOP HIDING FROM INCOMPATIBLE BROWSERS -->
    </script>
    </body>
    </html> 

  4. #4
    Join Date
    Jul 2010
    Posts
    21
    guys, i really appreciate your help but its seems that the code you have given is way to advance. I'm not using php, just html. do you have any other examples or explanation that a newbie like me would understand?

  5. #5
    Join Date
    Jul 2010
    Posts
    21
    <html>
    <title>Bio Data</title>
    <head>
    <style type="text/css">
    body
    {
    background-color:#B8BFD8;
    }
    </style>
    <script type="text/javascript">
    </script>
    </head>
    <body>


    <form>
    <table border="0">
    <th> <h1>BIODATA</h1></th>
    <tr>
    <td>ID#:</td>
    <td>
    <input type="text" name="id#" />
    </td>
    </tr>
    <tr>
    <td>Last Name:</td>
    <td>
    <input type="text" name="Lname" />
    </td>
    <tr>
    <td>First Name:</td>

    <td>

    <input type="text" name="Fname" />
    </td>
    </tr>

    </tr>
    <tr>
    <td>Gender:</td>

    <td>
    <input type="radio" name="sex" value="male" /> Male<br />
    <input type="radio" name="sex" value="female" /> Female
    </td>
    </tr>
    <tr>
    <td>Hobby:</td>
    <td>
    <input type="text" name="hobby" />
    </td>
    </tr>
    <tr>
    <td></td>
    <td>
    <input type="submit" value="Submit" />
    </td>
    </tr>
    </table>
    </form>
    </table>
    </form>
    </body>
    </html>


    i just want the information inputted in the text field to be transferred to the next page. hoping to hear from you all.. thanks

  6. #6
    Join Date
    Mar 2010
    Posts
    2,803
    The code I posted is actually javascript wrapped in php formatting tags (I like the colours you get ...but that's just me).

    As a demo:

    1) substitute your <form> tag with

    Code:
    <form action="formProcessor.htm" method="get" >
    2) copy and paste the code I posted into a file called formProcessor.htm

    3) Open the file you posted in your browser, enter some data in the inputs and then click your submit button.

    4) The data you entered in the inputs should then be sent to formProcessor.htm and displayed in your browser.

    If you need to do any $erver side processing then you need to follow the example posted by MGenev as a starting point.
    Last edited by tirna; 07-12-2010 at 01:47 AM.

  7. #7
    Join Date
    Jul 2010
    Posts
    21
    thank you tirna. it worked! . you saved my ass. if it's not too much to ask.. can you further explain the code you added.

  8. #8
    Join Date
    Mar 2010
    Posts
    2,803
    The javascript essentially splits the sent query string into an array with each element storing a name/value pair from your form.

    If you need more info on the individual functions/methods in the javascript, you should be able to find it on the w3schools website or googling the functions/methods you're not sure of.

  9. #9
    Join Date
    Jul 2010
    Posts
    21
    thanks tirna...

  10. #10
    Join Date
    Sep 2012
    Posts
    3

    Unhappy tirna

    I worked with example it working fine but it getting the values in address bar.How to get data in web page.



    Quote Originally Posted by tirna View Post
    The code I posted is actually javascript wrapped in php formatting tags (I like the colours you get ...but that's just me).

    As a demo:

    1) substitute your <form> tag with

    Code:
    <form action="formProcessor.htm" method="get" >
    2) copy and paste the code I posted into a file called formProcessor.htm

    3) Open the file you posted in your browser, enter some data in the inputs and then click your submit button.

    4) The data you entered in the inputs should then be sent to formProcessor.htm and displayed in your browser.

    If you need to do any $erver side processing then you need to follow the example posted by MGenev as a starting point.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles