#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    20
    Rep Power
    0

    Talking How do I: Replace js variables using html form?-SOLVED


    I fixed it! - Read post #4 for solution
    Intro:
    I am currently developing on a web application which currently pulls data from another server.
    It uses various .js files and libraries to take input and display a list of results.
    This page is called "simple-search.html" and you type in anything from 'd', 'do' or 'dov' and it will list the dover port among other ports. (sea ports)...
    It currently will drag off the Port name, Port ID, Location Code, Lat/Longitude, Website address & Show map.

    I am trying to get the 'Show map' button I have created to carry across the Lat/Long details to the new page.
    Then for the new page to implement the Lat/Long value into the correct partition of the maps function.

    ***************************************************************************************
    I have tried & tried various techniques and I have given up for the moment,

    Basic Description:
    So instead I want to just get the input from 2 text areas and for it to save as the variables in the function,
    except in my attempts this just crashes the page and causes the map to not display

    heres the code from this map page (library link void as i am new to this forum and it blocks it otherwise)(map.html)


    html4strict Code:
    <!DOCTYPE html>
    <html>
    <head>
        <title>Geo Locator</title>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src=((BLOCKED-NEWFORUMUSER))&sensor=false"></script>
    <script>
    var $lat = 51.5;
    var $lng = 0;
     
    /*Thought this would possibly work?... but no results
     * var lat = document.getElementById('latval').value;
    var lng = document.getElementById('lngval').value;*/
    function submission()
    {
        $lat = lat;
        $lng = lng;
        var lat = document.getElementById('latval').value;
        var lng = document.getElementById('lngval').value;
    }
    function initialize()
    {
    var mapProp = {
      center:new google.maps.LatLng($lat,$lng),
      zoom:12,
      mapTypeId:google.maps.MapTypeId.ROADMAP
      };
    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
    }
     
    google.maps.event.addDomListener(window, 'load', initialize);
     
    </script>
    </head>
     
    <body>
        <a href="./index.html">Examples</a><br/>
        <form>
            <input type="text"  name="latval" onclick='value=""' value="Enter a Latitude Value here" style="width:200px;"><br />
            <input type="text"  name="lngval" onclick='value=""' value="Enter a Longitude Value here" style="width:200px;"><br />
            <input type="button" onclick="submission()" value='Update'>
        </form>
    <div id="googleMap" style="width:100%;height:700px;"></div>
     
    </body>
    </html>
    If you can get the original idea working somehow that would be awesome and I can supply more details...
    if not... just helping with the main cause to 'how do I set the variables within a function from a form"

    *All replies are greatly appreciated!*

    Josh.
    Last edited by dev.josh; September 17th, 2013 at 08:45 AM. Reason: Solution acomplished.
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    2
    Rep Power
    0
    var lat = document.getElementById('latval').value;
    I don't see an element with ID "latval"
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    20
    Rep Power
    0
    It's the form textbox, how do I use that input as a variable?

    "It is my third or fourth day coding javascript, maybe I might be aiming rather high if I am making a big mistake somewhere, but I want to learn fast"
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    20
    Rep Power
    0

    Fixed


    Small mistakes are easy to miss!

    After lots of messing about with various plugins and all sorts...

    The main problem was that I had accidently given the input fields the identity of "latval" as a name element. I am sorry kromol as you clearly state this in your post.
    I just didn't understand at the time I suppose... I started learning JS approx. 1 week ago... so there are some small things I am missing... Hopefully this will improve with persistence and my intellectual development of the language.

    I have changed the code vastly since this thread started... The application now works across an extra page, Allowing for the user to have a new tab / window open with the map now working and dynamically sized.

    For those who may want to see the code ( - top html tags):
    javascript Code:
    <script>
    function initialize()
    {          
        var $lat = document.getElementById('latval').value;
        var $lng = document.getElementById('lngval').value;
    var mapProp = {
      center:new google.maps.LatLng($lat,$lng),
      zoom:10,
      mapTypeId:google.maps.MapTypeId.ROADMAP
      };
    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    </head>
     
    <body><a href="./index.html">Examples</a><br/>
        <form><input type="text"  id="latval" onclick='value=""' value="Enter a Latitude Value here" style="width:200px;"><br />
            <input type="text"  id="lngval" onclick='value=""' value="Enter a Longitude Value here" style="width:200px;">
            <input type="button" onclick="initialize()" value='Update'></form>
    <div id="googleMap" style="width:100%;height:700px;"></div>
    </body>
    </html>
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    20
    Rep Power
    0

    Awesomeness!


    WAH-HOO!

    I got the script working!! it now saves the variable within the URL string as a query... then the next page grabs the queries and saves them as variables... then the variables get assigned to the Google map function... and viola!!! Itís now opening a map with the correct position pin pointed...

    User:
    Searches database... Finds result... clicks the 'Show Map' button... a new page opens... the search result is pin pointed

    Awesome... In the end it finally was derived from various techniques found on the net... I couldnít find anyone who programmed it similarly.

    This is the JSON objects being written to hidden text fields:
    javascript Code:
     
    item = response.ports[i];
         $showmap.html('\
             <form>\n\
                 <input type="button" value="'+item.port+'\'s Map" id="showmapbtn" onclick="mapfun()">\n\
                 <input type="text" value="'+item.lat+'" id="lathid" hidden="true">\n\
                 <input type="text" value="'+item.lng+'" id="lnghid" hidden="true">\n\
             </form>');



    This is the function I created to open the new page with the queries attached:


    javascript Code:
    function mapfun()
        {
            $lathid = document.getElementById('lathid').value;
            $lnghid = document.getElementById('lnghid').value;
        window.open("/jsand2/map.html?ll="+$lathid+"&ln="+$lnghid);
        }


    Then on the map.html file, this is the script written to grab the variables from the URL and write them to the googlemap function:

    javascript Code:
     
    <script>
    var $lathid = getQueryVariable("ll");
    var $lnghid = getQueryVariable("ln");
    //This next function was found on css-tricks
    function getQueryVariable(variable)
    {
           var query = window.location.search.substring(1);
           var vars = query.split("&");
           for (var i=0;i<vars.length;i++) {
                   var pair = vars[i].split("=");
                   if(pair[0] == variable){return pair[1];}
           }
           return(false);
    }
    function initialize()
    {          
    var mapProp = {
      center:new google.maps.LatLng($lathid, $lnghid),
      zoom:10,
      mapTypeId:google.maps.MapTypeId.ROADMAP
      };
    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    20
    Rep Power
    0

    Things just keep getting better!


    Hey, Just thought you should know, I have managed to get it working on a better level... The application is working perfectly

    New feature:

    It will take a search result, display a hyperlink, once clicked will open a new page with the search results related location pin-pointed on a googlemap automatically.

    I just need to add small little things like 'tooltips' made with another script.

    ...in the end I attached the values to the url:
    (hyperlink to move from search result to custom map)

    Search page:
    Code:
    $latlong.html('<a href="/jsand2/map.html?ll='+item.lat+'&ln='+item.lng+'&pn='+item.port+'">'+item.lat+'<br />'+item.lng+'</a>');

    Map page:
    (I found this function from css-tricks.com)
    function getQueryVariable(variable)
    Code:
    {
           var query = window.location.search.substring(1);
           var vars = query.split("&");
           for (var i=0;i<vars.length;i++) {
                   var pair = vars[i].split("=");
                   if(pair[0] == variable){return pair[1];}
           }
           return(false);
    }

    Then used this piece of script to assign the values as variables to use within the map:
    Code:
    var $lathid = getQueryVariable("ll");
    var $lnghid = getQueryVariable("ln");
    var $pthid = getQueryVariable("pn");
    ...
    Then after-which I added a map marker function.

    I am one happy programmer ...lol

IMN logo majestic logo threadwatch logo seochat tools logo