1

I dont' know if anybody is willing to help me out on a bit on Javascript? I am working on a Webapp with Flask.
To get the user info and a googlemaps load I have to use pure Javascript.
This is what I got for my onClick event and it works just fine.

// Google Map initialize
function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: { lat: 47.2172500, lng: -1.5533600 }
    });

    document.getElementById('submit').addEventListener('click', function () {
        var userQuestion = document.getElementById('userQuestion').value;
        requestQuestionMap( map, userQuestion);
    });
}

Now I also would like that if the user hits the "enter" key that my function works the same way (sending the user search to my API). I tried some solutions but none seem to work for me. I am probably getting something wrong!

my field for user search in HTML is a classic "input" like this:

<form>
    <input type="text" name="question" id="userQuestion" required>
    <input type="button" value="Dit moi tout ! " id="submit">            
</form>

Of course I did some research here and on google and tried out some solution. none of them seem to fit.

Yannu Driever
  • 11
  • 3
  • Does this answer your question? [Prevent form submission on Enter key press](https://stackoverflow.com/questions/905222/prevent-form-submission-on-enter-key-press) – pilchard Jan 22 '21 at 11:54
  • It looks like the code fails in the ENTER listener, you should show the code for that listener. – Teemu Jan 22 '21 at 12:03
  • Lol my bad ! That's the real problem. I tried to add this part of the code, but it never worked. That's my quesiton how to integrate in a good way the code so that the "enter" key and the "click" result in the same :) – Yannu Driever Jan 22 '21 at 12:51
  • Just put the code of the current submit handler to a declared function, and add a `keydown` listener to the form, which has the same handler function attached as the submit event. Add an even type check, and if keydown, check if enter was pressed, otherwise return early. You also has to change the submit button to the type of submit, and prevent the default in the handler. – Teemu Jan 22 '21 at 15:35
  • Thanks I will try that ! would it bother you if I don't succeed with it to show me your explanation in code? But I wanna try first !! :) – Yannu Driever Jan 22 '21 at 15:54

1 Answers1

1

https://stackoverflow.com/a/57226770/5011051

This will help you.

<form onsubmit="return false">
    <input type="text"/>
    <input type="submit"/>
</form>

or

you can try following prevent from js as well

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: { lat: 47.2172500, lng: -1.5533600 }
    });

    document.getElementById('submit').addEventListener('click', function (e) {
        e.preventDefault();
        var userQuestion = document.getElementById('userQuestion').value;
        requestQuestionMap( map, userQuestion);
    });
}
Kesavan R
  • 649
  • 1
  • 5
  • 23
  • Thank you ! helps already but I guess that I wasn't very clear in my question. I also wanted to add in the same function the fact that if you click with the mouse to submit, or hit the enter key, both will do the same (sending the search to my api) – Yannu Driever Jan 22 '21 at 12:25
  • we are happy to help you. Please let us know if any help required further – Kesavan R Jan 22 '21 at 12:29