<input> text box question

1

Hi. I hope you can help me.
My problem is probably a very simple one, but I can’t figure out how to solve it.
I’m working on my Weather App and I use standard bootstrap navbar with a simple text box and a button to submit it.
After some problems I realized that the was of type “submit” and every time I clocked it the whole web site reloaded and I was loosing global variables. After a few hours of struggling with that I realized what was happening. I changed the type of the button to “button” instead of “submit” and I could easily dealing with request, until…

I realized, that the input text box has got the same behaviour as the button element before. If I type in some text and instead of using the button to submit it I use “Enter” key on keyboard it reloads the web page. The page basically restarts. How I can change the behaviour so I can read the text using javascript/jquery?

2

You can use JavaScript’s Event.preventDefault() method in the button click handler to prevent the button from reloading the page, which is its default behavior.

3

Thanks. I need to fix the <input type="text"> element from the same behaviour. Can I use the same method (Event.preventDefault()) for <input>?

4

You should be able to call it on the input’s keydown event, yes. :slightly_smiling_face:

5

Thanks, it works. Unfortunately I can’t make it working as I want. But I think it’s good enough.

6

If you post your code here, there are always people who are happy to help you getting it working as you intend. :+1:

7

Cool! You can check it out there:
My Weather App