Hi there,
beginner here.

I've written a webpage that works as follows:

  1. You're presented with a form box and two buttons: "Send" and "Highlight"
  2. You write a country's name
  3. You click "Send"
  4. 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>


<script type="text/javascript">
		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 type="text/javascript" src="https://www.google.com/jsapi"></script>

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

	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(
			chart.draw(data, options);



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

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



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">
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.