Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Apr 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post how to pass variables to a new html page?? -javascript

    I need some help with javascript..how to pass variables to a new html page..i.e user needs to fill in a form that hv multiple fields(include text and select) when they've confirmed the form's copy will be displayed in new page but they cant modify the field..i hv done the form part but i dont know how to pass the variables can i pass it to external .js file then extract form there?how?..help plzz

  • #2
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    your main page
    Code:
     
    <script type="text/javascript">
    var mywin;
    var isOpen = false;
    var passVal;
    var searchInt;
    function doOpen(val){
    passVal = val;
    mywin = window.open("newurl.html");
    searchInt = setInterval(function(){if(isOpen){mywin.document.getElementById("your_field").value = passVal; clearInterval(searchInt);}}, 100);
    }
    </script>
    newurl.html
    Code:
     
    <html>
    <head>
    <script type="text/javascript">
    window.onload = function(){window.opener.window["isOpen"] = true;};
    </script>
    </head>
    <body>
    <div>
    <input type="text" disabled="true" id="your_field" />
    </div>
    </body>
    </html>
    install the feature like this
    Code:
     
    <input type="text" id="text_field" />
    <input type="button" onclick="doOpen(document.getElementById('text_field'));" />
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  • #3
    New Coder
    Join Date
    Apr 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i've tried the code but it seems the variable is not passed..what if i want to pass it to a new page in the same browser window?

  • #4
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    like the next page loaded, or in an iframe, or in a frame?
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  • #5
    New Coder
    Join Date
    Apr 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The next page loaded..so if user wants to edit the form they can go back

  • #6
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    put the fields inside a form, set the action proptery of the form to the next page, and set the method to "get". that will pass the values (along with the names of the fields the values were from) in the query string to the following page so that you can extract them. the extraction is commonly done with asp, asp.net, php, jsp, or another serverside language. you can, however, do it with javascript as well.

    Code:
     
    <script type="text/javascript">
    window.onload = function(){
    var dl = document.location;
    var qs = dl.split("?")[1];
    var elements = qs.split("&");
    for(var a = 0; a < elements.length; a++){
        try{document.getElementById(elements.split("=")[0]).value = elements.split("=")[1];}catch(ex){}
    }
    }
    </script>
    would go in your second page, you'd have all the same fields in the new page as in the old page (with the same ids as well) excepting for you'd put
    Code:
    disabled="true"
    on each input so that the user can't edit them.
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  • #7
    New Coder
    Join Date
    Apr 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've tried but at the 2nd page, fields are all blank

  • #8
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    post your code
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  • #9
    New Coder
    Join Date
    Apr 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    //1.html--1st page
    <HTML>
    <HEAD>

    <TABLE><td><PRE>
    <FORM NAME="myform" ACTION="2.html" METHOD="GET">
    Id : <INPUT TYPE="text" NAME="Id" id="id" SIZE=10 MAXLENGTH=9 VALUE=""><P>
    Status : <select name="stat" size=1>
    <option>OPEN
    <option>CLOSE
    </select><P>
    </PRE></td></TABLE>
    <INPUT TYPE="Submit" Value="Submit">
    </HTML>

    //2.html--2nd page
    <html>
    <script type="text/javascript">
    window.onload = function(){
    var dl = document.location;
    var qs = dl.split("?")[1];
    var elements = qs.split("&");
    for(var a = 0; a < elements.length; a++){
    try{document.getElementById(elements.split("=")[0]).value = elements.split("=")[1];}catch(ex){}
    }
    }
    </script>

    <TABLE><td><PRE>
    <FORM NAME="myform" METHOD="GET">
    Id : <INPUT TYPE="text" NAME="id" id="id" SIZE=10 MAXLENGTH=9 disabled="true"><P>
    Status : <select name="stat" size=1 disabled="true">
    <option>OPEN
    <option>CLOSE
    </select><P>
    </PRE></td></TABLE>

    </form>
    </html>

  • #10
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    when you post code, please post it between code tags, simply hilight the code (once it's in the reply box) and click the # symbol in the reply box

    //1.html--1st page
    Code:
    <html>
    <head>
    </head>
    <body>
    <form id="myform" action="2.html" method="GET">
    <table><tr><td><pre>
    Id : <input type="text" id="ident" size="10" maxlength="9" value=""/>
    <p>
    Status : <select id="stat" size="1">
    <option value="open">OPEN</option>
    <option value="close">CLOSE</option>
    </select></p>
    </pre></td></tr></table>
    <input type="Submit" value="Submit" />
    </body>
    </html>
    //2.html--2nd page
    Code:
    <html>
    <head>
    <script type="text/javascript">
    window.onload = function(){
    var dl = document.location;
    var qs = dl.split("?")[1];
    var elements = qs.split("&");
    for(var a = 0; a < elements.length; a++){
    try{document.getElementById(elements[a].split("=")[0]).value = elements[a].split("=")[1];}catch(ex){}
    }
    }
    </script>
    </head>
    <body>
    <form id="myform" action="/" method="GET">
    <table><tr><td><pre>
    Id : <input type="text" id="ident" SIZE="10" MAXLENGTH="9" disabled="true" /><p>
    Status : <select id="stat" size="1" disabled="true">
    <option value="open">OPEN</option>
    <option value="close">CLOSE</option>
    </select></p> 
    </pre></td></tr></table>
    </form>
    </body>
    </html>
    Last edited by mjlorbet; 04-30-2008 at 08:17 AM.
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  • #11
    New Coder
    Join Date
    Apr 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry I didnt know..so what do u think??

  • #12
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    i've corrected it, read the code above
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  • #13
    New Coder
    Join Date
    Apr 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    why is it still the same?fields are all blank at he 2nd page

  • #14
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    Code:
     
    <html>
    <head>
    <script type="text/javascript">
    window.onload = function(){
    var dl = document.location.href;
    var qs = dl.split("?")[1]?dl.split("?")[1]:"";
    var elements = qs.split("&");
    for(var a = 0; a < elements.length; a++){
    try{document.getElementById(elements[a].split("=")[0]).value = elements[a].split("=")[1];}catch(ex){}
    }
    }
    </script>
    </head>
    <body>
    <form id="myform" action="/" method="GET">
    <table><tr><td><pre>
    Id : <input type="text" id="ident" SIZE="10" MAXLENGTH="9" disabled="true" /><p>
    Status : <select id="stat" size="1" disabled="true">
    <option value="open">OPEN</option>
    <option value="close">CLOSE</option>
    </select></p> 
    </pre></td></tr></table>
    </form>
    </body>
    </html>
    code was slightly off for page2.html.

    anyways, since you're posting to an html page the query string is going to be ignored (in transmission), that's why it's not working right. if you were running asp or php, the querystring would be persisted. also, if you're running locally (without being on a server, ie localhost or 127.0.0.1 for self references) it's likely that the form action will just be ignored.
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender


  •  

    Posting Permissions

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