Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1036
  • Last Modified:

javascript onload

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAJxYcItOgkqR8R_oLqIOOTBQacz0bPLQUXEQFHZqrZvMEpHZ5XRSCJ0pmFLc3gNPINynksheGWBUQdg" 
type="text/javascript"></script>
<script type="text/javascript">
function initialize(from, to) {
	if (GBrowserIsCompatible()) {    
	  	map = new GMap2(document.getElementById("map_canvas"));
	  	gdir = new GDirections(map, document.getElementById("directions"));
	  	GEvent.addListener(gdir, "load", onGDirectionsLoad);
	  	GEvent.addListener(gdir, "error", handleErrors);
	  	setDirections(from, to, "en_US");
	}
} 
</script>
</head>

<body onload="initialize('fromaddress','toaddress')" onunload="GUnload()" >
<div id="map_canvas" style="width: 500px; height: 400px"></div>

<input type="hidden" name="fromaddress" value="100 Main Street. Los Angeles, CA 90032" />
<input type="hidden" name="toaddress" value="200 Main Street. Los Angeles, CA 90032" />



</body>
</html>

Open in new window


I have attached codes in html/javascript.
How can I load both hidden value to Onload event in Javascript.
Assume  both hidden fields already have value there .

Thank
0
Webboy2008
Asked:
Webboy2008
  • 2
1 Solution
 
GreggCommented:
Are you trying to set the value of the hidden form fields? And run the initialize function during the window onload event? If so please see attached sample.

You will need to uncomment the initialize function and delete the alert. Hope this helps.

Javascript file

//**************************************
//Window Load 
//**************************************

/* put all onload functions and code here.*/
addEvent(window, "load", function() {
	//Set To Address
	var from = document.getElementById("fromaddress");
	from.value="100 Main Street. Los Angeles, CA 90032";
	
	//Set From Address
	var to = document.getElementById("toaddress")
	to.value="200 Main Street. Los Angeles, CA 90032";
	
	//initialize method call.
	//initialize(from,to);
	
	alert(to.value);
});

//**************************************
//Window Load 
//**************************************
function initialize(from, to) {
	if (GBrowserIsCompatible()) {    
	  	map = new GMap2(document.getElementById("map_canvas"));
	  	gdir = new GDirections(map, document.getElementById("directions"));
	  	GEvent.addListener(gdir, "load", onGDirectionsLoad);
	  	GEvent.addListener(gdir, "error", handleErrors);
	  	setDirections(from, to, "en_US");
	}
} 


//********************************
//Event Handlers
//********************************
// bind the event handlers
function addEvent(elem, evtType, func) {
	if (elem.addEventListener) {
		elem.addEventListener(evtType, func, false);
	}
	else if (elem.attachEvent) {
		elem.attachEvent("on" + evtType, func);
	}
	else {
		elem["on" + evtType] = func;
	}
}

Open in new window

Html file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAJxYcItOgkqR8R_oLqIOOTBQacz0bPLQUXEQFHZqrZvMEpHZ5XRSCJ0pmFLc3gNPINynksheGWBUQdg" type="text/javascript"></script>
<script src="test.js" type="text/javascript"></script>

</head>

<body>
<div id="map_canvas" style="width: 500px; height: 400px"></div>

<input type="hidden" name="fromaddress" value="" id="fromaddress"/>
<input type="hidden" name="toaddress" value="" id="toaddress" />


</body>
</html>

Open in new window

test.html
test.js
0
 
GreggCommented:
Are you trying to set the value of the hidden form fields? And run the initialize function during the window onload event? If so please see attached sample.

You will need to uncomment the initialize function and delete the alert. Hope this helps.

Javascript file

//**************************************
//Window Load 
//**************************************

/* put all onload functions and code here.*/
addEvent(window, "load", function() {
	//Set To Address
	var from = document.getElementById("fromaddress");
	from.value="100 Main Street. Los Angeles, CA 90032";
	
	//Set From Address
	var to = document.getElementById("toaddress")
	to.value="200 Main Street. Los Angeles, CA 90032";
	
	//initialize method call.
	//initialize(from,to);
	
	alert(to.value);
});

//**************************************
//Window Load 
//**************************************
function initialize(from, to) {
	if (GBrowserIsCompatible()) {    
	  	map = new GMap2(document.getElementById("map_canvas"));
	  	gdir = new GDirections(map, document.getElementById("directions"));
	  	GEvent.addListener(gdir, "load", onGDirectionsLoad);
	  	GEvent.addListener(gdir, "error", handleErrors);
	  	setDirections(from, to, "en_US");
	}
} 


//********************************
//Event Handlers
//********************************
// bind the event handlers
function addEvent(elem, evtType, func) {
	if (elem.addEventListener) {
		elem.addEventListener(evtType, func, false);
	}
	else if (elem.attachEvent) {
		elem.attachEvent("on" + evtType, func);
	}
	else {
		elem["on" + evtType] = func;
	}
}

Open in new window

Html file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAJxYcItOgkqR8R_oLqIOOTBQacz0bPLQUXEQFHZqrZvMEpHZ5XRSCJ0pmFLc3gNPINynksheGWBUQdg" type="text/javascript"></script>
<script src="test.js" type="text/javascript"></script>

</head>

<body>
<div id="map_canvas" style="width: 500px; height: 400px"></div>

<input type="hidden" name="fromaddress" value="" id="fromaddress"/>
<input type="hidden" name="toaddress" value="" id="toaddress" />


</body>
</html>

Open in new window

0
 
P1ST0LPETECommented:
You should be focusing on writing unobtrusive javascript (i.e. separating your javascript from your html).
To do that requires a simple change, which is using the window.onload event instead of <body onload="">

Applying this to your page should give you something that looks like this:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAJxYcItOgkqR8R_oLqIOOTBQacz0bPLQUXEQFHZqrZvMEpHZ5XRSCJ0pmFLc3gNPINynksheGWBUQdg" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function() {
    var from = document.getElementByName('fromaddress').value;
    var to = document.getElementByName('toaddress').value;
    initialize(from, to);
}

window.onunload = function() {
    GUnload();
}

function initialize(from, to) {
	if (GBrowserIsCompatible()) {    
	  	map = new GMap2(document.getElementById("map_canvas"));
	  	gdir = new GDirections(map, document.getElementById("directions"));
	  	GEvent.addListener(gdir, "load", onGDirectionsLoad);
	  	GEvent.addListener(gdir, "error", handleErrors);
	  	setDirections(from, to, "en_US");
	}
} 
</script>
</head>

<body>
    <div id="map_canvas" style="width: 500px; height: 400px"></div>
    <input type="hidden" name="fromaddress" value="100 Main Street. Los Angeles, CA 90032" />
    <input type="hidden" name="toaddress" value="200 Main Street. Los Angeles, CA 90032" />
</body>
</html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now