Replacing an "onclick" function call with an automatic call

**Beriaal** · 01-26-2012, 08:42 AM

Hi there,
beginner here.

I've written a webpage that works as follows:

You're presented with a form box and two buttons: "Send" and "Highlight"
You write a country's name
You click "Send"
You finally click "Highlight" to output a world map in which the previously chosen country is highlighted

I have this working code so far:

HTML Code:

<!DOCTYPE html>

<html>
	
<head>

<script type="text/javascript">
	<?php
		if (isset($_POST['country'])) {
			$country = $_POST['country'];
			if (!empty($_POST['country'])) {
				echo("var country = '$country';");
			} else {
					echo("document.write('Write a country's name');");
			}
		}
	?>
</script>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript">
	
	google.load('visualization', '1', {'packages': ['geochart']});
	google.setOnLoadCallback(setData);

	var data, options;

	function setData() {
		data = new google.visualization.DataTable();
		data.addColumn('string', 'City');
		data.addColumn('number', 'color');
		data.addRows([[country, 1]]);
		
		options = {
				  region: 'world',
				  displayMode: 'regions',
				  colorAxis: {colors: ['white', 'red']},
				  backgroundColor: 'cyan',
				  legend: 'none',
				  height: 521,
				  width: 834
				  };
	}
	
	function show() {
		var chart = new google.visualization.GeoChart(
						document.getElementById("map_here"));
			chart.draw(data, options);
	}

</script>

</head>

<body>
	
<form action="geochart.php" method="POST">
<input type="text" name="country">
<input type="submit" value="Send">
<button type="button" onclick="show()">Highlight</button>
</form>

<div id="map_here"></div>

</body>

</html>

What I'd now like to do is to merge steps 3 and 4, i.e. having only one button that would both send the POST form and output the map.

I thought this would be pretty straightforward: I'd just have to replace my HTML button line near the end:

HTML Code:

<button type="button" onclick="show()">Highlight</button>

with a JavaScript direct function call:

HTML Code:

<script type="text/javascript">
	show();
</script>

but, sadly this isn't working.

I've tried multiple things to no avail so far.

Any idea why this isn't working or how I can get this to work?

Thank you.

**xelawho** · 01-26-2012, 10:24 AM

well, I ended up having to read the documentation

but I got it finally...

Code:

<html>
<head>
</head>
<body>

<input type="text" id="txt"/><button type="button" onclick="getData()">Show country</button>
<div id='MAPHERE'></div>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
	
	<script type='text/javascript'>
	  var chart,options;
	google.load('visualization', '1', {'packages': ['geochart']});
	google.setOnLoadCallback(drawMarkersMap);
	
	function getData(){
	country=document.getElementById("txt").value
				data = new google.visualization.DataTable();
					data.addColumn('string', 'City');
					data.addColumn('number', 'color');
					data.addRows([[country, 1]]);
					chart.draw(data, options);
	}

			function drawMarkersMap() {
	

				options = {
					region: 'world',
					displayMode: 'regions',
					colorAxis: {colors: ['white', 'red']},
					backgroundColor: 'cyan',
					legend: 'none',
					height: 347,
					width: 556
					};
				chart = new google.visualization.GeoChart(document.getElementById('MAPHERE'));
			};
	

	</script>


</body>
</html>

**Beriaal** · 01-26-2012, 10:53 AM

That's so much tidier than what I was doing, with POST, PHP and all...

Thank you very much.

**xelawho** · 01-26-2012, 11:42 AM

you're welcome. it's actually a pretty cool little API - thanks for bringing it to my attention.

here's something else I found - you can zoom in to the country, but it seems only by using their country code (don't worry - I copy pasted these off wikipedia), so the best way would be with a select like this:

Code:

<html>
<head>
</head>
<body>

<input type="text" id="txt"/><button type="button" onclick="getData()">Show country</button>
<select id="sel" onchange="region=this.value; document.getElementById('txt').value=this.options[selectedIndex].text;getData()" >
<option value="AU">  Australia </option>
<option value="DK">  Denmark </option>
<option value="FR">  France </option>
<option value="DE">  Germany </option>
<option value="GR">  Greece </option>
<option value="GT">  Guatemala </option>
<option value="HN">  Honduras </option>
<option value="IS">  Iceland </option>
<option value="IN">  India </option>
<option value="ID">  Indonesia </option>
<option value="IL">  Israel </option>
<option value="IT">  Italy </option>
<option value="JM">  Jamaica </option>
<option value="JP">  Japan </option>
<option value="KW">  Kuwait </option>
<option value="LB">  Lebanon </option>
<option value="LT">  Lithuania </option>
<option value="MX">  Mexico </option>
<option value="NP">  Nepal </option>
<option value="NL">  Netherlands </option>
<option value="NZ">  New Zealand </option>
<option value="NI">  Nicaragua </option>
<option value="PK">  Pakistan </option>
<option value="PW">  Palau </option>
<option value="PE">  Peru </option>
<option value="PH">  Philippines </option>
<option value="PL">  Poland </option>
<option value="PT">  Portugal </option>
<option value="PR">  Puerto Rico </option>
<option value="ZA">  South Africa </option>
<option value="ES">  Spain </option>
<option value="LK">  Sri Lanka </option>
<option value="SE">  Sweden </option>
<option value="CH">  Switzerland </option>
<option value="TH">  Thailand </option>
<option value="TR">  Turkey </option>
<option value="GB">  United Kingdom </option>
<option value="US">  United States </option>
<option value="UY">  Uruguay </option>
<option value="VN">  Viet Nam </option>
<option value="ZW">  Zimbabwe </option>
</select>
<div id='MAPHERE'></div>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
	
	<script type='text/javascript'>
	  var chart;
	google.load('visualization', '1', {'packages': ['geochart']});
	google.setOnLoadCallback(drawMarkersMap);
	
	function getData(){
	country=document.getElementById("txt").value
				options = {
					region: region,
					displayMode: 'regions',
					colorAxis: {colors: ['white', 'red']},
					backgroundColor: 'cyan',
					legend: 'none',
					height: 347,
					width: 556
					};
				
				data = new google.visualization.DataTable();
					data.addColumn('string', 'City');
					data.addColumn('number', 'color');
					data.addRows([[country, 1]]);
					chart.draw(data, options);
					
	}

			function drawMarkersMap() {
				chart = new google.visualization.GeoChart(document.getElementById('MAPHERE'));
			};
	</script>
</body>
</html>

Thread: Replacing an "onclick" function call with an automatic call

Thread Tools

Display

Replacing an "onclick" function call with an automatic call

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions