Make onclick function work with ENTER and "Go" button on Safari Mobile (iOS)

javascript html onclick dom-events buttonclick

18,888

You should really just remove that inline javascript and make that button into a real submit button. After that you can easily capture the form being submitted (wether be enter key or by submit button):

form.addEventListener('submit', calcRoute);

Demo: http://jsfiddle.net/ghK4P/

18,888

Author by

MultiformeIngegno

Updated on June 05, 2022

Comments

MultiformeIngegno almost 2 years

I have a form in which the button calls a function onclick:

<form>
    <input type="text" id="start" name="start">
    <input type="button" onclick="calcRoute();" value="Go">
</form>

function calcRoute() {
    var start = document.getElementById('start').value;
      var end = "My Address in Rome";
      var request = {
        origin:start,
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.TRANSIT
      };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
}

It works properly on every browser if you click on the Go button (<input type="button">). It doesn't if I fill the <input type="text"> and press ENTER on my keyboard (or for example push the Go button in iOS keyboard). So: it works if I push the input type="button", not if I press ENTER from keyboard. How can I make it work that way too?

EDIT: Not jQuery or other framework please. :)

MultiformeIngegno almost 11 years

Uhm, no :'(. The form is submitted to the server that way (and in URL I have ?start=INPUT_TEXT
user2243116 almost 11 years

i dont know what you're trying to do and hence cant answer properly but try: <form onsubmit="return calcRoute()">
MultiformeIngegno almost 11 years

Uhm, no. Same behaviour. Here's the demo: goo.gl/wr3qi , click on "calcola percorso". :)
user2243116 almost 11 years

@MultiformeIngegno i have posted another answer check it out
MultiformeIngegno almost 11 years

I tried (here's the demo with your code): ffio.it/test.html Click on "calcola percorso". When you type an address it should build the route. Nothing happens... :)
MultiformeIngegno almost 11 years

Unfortunately I don't want to use jQuery.
PeeHaa almost 11 years

You have overwritten the function calcRoute(). Just add the e.preventDefault() to your own function and don't forget to add the e as an argument.
user2243116 almost 11 years

can you tell what are you expecting and what you are getting?
PeeHaa almost 11 years

Also in your specific case you would rather want to do var form = document.getElementbyId('percorsoform');
MultiformeIngegno almost 11 years

Here I put your code within the existing function calcRoute(): ffio.it/test2.html
MultiformeIngegno almost 11 years

It should work like this (type an address of Rome and push the "Go" button): goo.gl/wr3qi
user2243116 almost 11 years

can you tell me some address in Rome so that i can test it?
PeeHaa almost 11 years

No that part you should have left where it was. I was talking about the part with e.preventDefault(); in it.
MultiformeIngegno almost 11 years

Yup, sorry :D Try with "Via Eugenio Checchi, Roma"
MultiformeIngegno almost 11 years

It is if you type that address and push "Vai" (Go) button
PeeHaa almost 11 years

See my previous comment: stackoverflow.com/questions/16263331/…
PeeHaa almost 11 years

Typo sorry. It should have been getElementById with an uppercase B
MultiformeIngegno almost 11 years

stackoverflow.com/a/16263930/1342772 If you help me converting it to not-inline javascript I'll accept your answer! :)
NAVNEET CHANDAN about 3 years

Is there any solution without using form tag?