Button input submit not doing

Question

In all the codes that I wrote, the button does not work. The site simply reloads and that's it. Maybe this is an error not in the code, but in something else, please help This is my code

<!DOCTYPE html>
<html lang="'en">
    <head>
        <title>Hello</title>
        <script>

            document.addEventListener('DOMContentLoaded', function() {
                document.querySelector('form').onsubmit = function() {
                    const name = document.querySelectr('#name').value;
                    alert(`Hello, ${name}!`);
                };
            });

        </script>
    </head>
    <body>
        <h1>Hello!</h1>
        <form>
            <input autofocus id="name" placeholder="Name" type="text">
            <input type="submit">
        </form> 
    </body>
</html>

Your form without method will be submit using GET by default. Your JS event handler did not prevent default action for the form submit, that's why when you click button and it's just like reload. — vee
– vee, Commented Aug 17, 2022 at 19:14
Does this answer your question? Prevent Default on Form Submit jQuery — Heretic Monkey
– Heretic Monkey, Commented Sep 7, 2022 at 0:39

Ryan M · Accepted Answer · 2022-09-07 00:34:27Z

1

By default, a submit button will reload the page to send a request. This can be prevented with e.preventDefault(). Here's an example with your code:

document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('form').onsubmit = function(e) {
        e.preventDefault();
        const name = document.querySelector('#name').value;
        alert(`Hello, ${name}!`);
    };
});

edited Sep 7, 2022 at 0:34

Ryan M♦

20.6k35 gold badges75 silver badges85 bronze badges

answered Aug 17, 2022 at 19:14

Michael M.

11.2k11 gold badges22 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Юра Логін Over a year ago

It doesn't solved

Michael M. Over a year ago

There was also a typo in querySelector, but I've updated my answer. It should now work.

Юра Логін Over a year ago

e.preventDefault() do not need, problem was with missed o is querySelector. Thank you for your answer.

Collectives™ on Stack Overflow

Button input submit not doing

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related