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:
with a JavaScript direct function call:HTML Code:<button type="button" onclick="show()">Highlight</button>
but, sadly this isn't working.HTML Code:<script type="text/javascript"> show(); </script>
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.


Reply With Quote

Bookmarks