0

I am creating a web page with a Google Map embedded in it. I want to create a form to allow a user to type which London tube zone they wish to see and, when submitted, this will map the tube stations for the selected zone.

I have the map embedded where I want it to be and centred with the zoom I need. I can hard code the map to display one of the zones using:

downloadUrl("ldntube_xml.php?zone=1", function(data) {

But I want the user to be able to select the zone they want.

For the form so far I have:

<form action="ldntube_xml.php" method="get">
    Type Zone Number:<br>
    <input type="text" name="zone" value="" ><br>
    <input type="submit" value="Submit">
</form>

This obviously takes the user away from the web page to list the stations in the zone selected.

How can I make the form and the map display talk to each other?
Can I accomplish this using an onClick"myFunction()"?

0

Use AJAX. In jQuery style, something like this should do what you are tryingto accomplish:

<form>
    Type Zone Number:<br>
    <input type="text" name="zone" id="zone"/><br>
    <input type="submit" value="Submit" id="btn-tubline-submit"/>
</form>

<script>
  $("#btn-tubeline-submit").on("submit", function(e){
    e.preventDefault();
    var selectedLine = $("#zone").val();
    if(selectedLine.length>0){
        $.get("ldntube_xml.php", {"zone": selectedLine}).done(function(data){
            /*data will be the response from your php script here containing the stops that you want to display on the map*/
        });
    }
  });
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.