Replacing an "onclick" function call with an automatic call
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.
