onClick event doesn't work inside form tag

Asked 21/4, 2016 at 13:5 Answered 7/9, 2019 at 14:42

Solved javascript html dom onclick onsubmit

<!DOCTYPE html>
<html>
    <head>
    </head>
    <script>    
        function removeP2() {
            var parent = document.getElementById("section");
            var child = document.getElementById("p2");
            parent.removeChild(child);
        }
    </script>
    <body>
        <nav>
            <form>
               <button onclick="removeP2();">Remove</button> 
            </form>
        </nav>
        <section id="section">
            <p id="p1">Paragraph One.</p>
            <p id="p2">Paragraph Two.</p>
        </section>
    </body>
</html>

When I click the submit button, the function executes as usual, but after the function executes, the page reloads itself (removed P2 for a second).

I found a solution which is to delete the "Form" inside the "nav" tag, and it works fine. Just want to ask what is the problem cause that, and if I need to have the "Form" tag inside the "nav" tag, which part I need to fix?

Flambeau answered 21/4, 2016 at 13:5 Comment(3)

try to laod the script under the section and it will work – Monochromatic 21/4, 2016 at 13:6

The page reloads because the button submits the form. – Shanly 21/4, 2016 at 13:14

You should also move that script inside your head tags, so that it preloads. It's sitting between the head and body, which is wrong. – Mcclendon 21/4, 2016 at 13:25

The form is getting submitted and your page is reloaded. You need to stop the form submit.

Solution 1: Add a type attribute to your button.

<button type="button" onclick="removeP2();">Remove</button>

This will make sure that the button is not of submit type (which is the default type for buttons inside form tag when type is not specified), and that the form is not submitted on click.

Solution 2: Prevent the Submit event in javascript. So make these changes.

<button onclick="removeP2(event);">Remove</button>

and in the script prevent this event

 function removeP2(event) {
   event.preventDefault(); // prevent the event , ie form submit event
   var parent = document.getElementById("section");
   var child = document.getElementById("p2");
   parent.removeChild(child);
 }

Solution 3: I dont see any need of the form tag over there in the HTML. If its the exact syntax of yours and you really dont have any other elements or purpose with the form submission then you can remove the form tag.

 <nav>
   <button onclick="removeP2();">Remove</button>         
 </nav>

Dichroic answered 21/4, 2016 at 13:19 Comment(0)

Use the code below. It won't submit the form.

<button type="button">My Button</button>

Hyonhyoscine answered 21/4, 2016 at 13:13 Comment(0)

See this code:

https://jsfiddle.net/y7mhu3oL/1/

The solution is onsubmit in form tag:

<script>    
    function removeP2() {
        document.getElementById("p2").remove();
        }   
    </script>
<body>
    <nav>
        <form method="POST" onsubmit="removeP2(); return false;">
           <button>Remove</button> 
        </form>
    </nav>
    <section id="section">
        <p id="p1">Paragraph One.</p>
        <p id="p2">Paragraph Two.</p>
    </section>
</body>

Chiron answered 21/4, 2016 at 13:18 Comment(0)

Because you are not defining a button type, your browser is assuming that the button is type="submit" and attempting to "submit" the form (even though you haven't defined any method or action).

If you add type="button" to the button tag, it overrides the default assumption of submit and won't attempt to submit the form.

jsfiddle: https://jsfiddle.net/hdpk8c3n/

Paramagnetic answered 21/4, 2016 at 13:22 Comment(0)

event.preventDefault() is the correct answer. When you press a button inside a form, it will automatically submit that form, unless you prevent the default action with event.preventDefault;

function removeP2(event) {
    event.preventDefault()
    var parent = document.getElementById("section");
    var child = document.getElementById("p2");
    parent.removeChild(child);
}

Consumption answered 21/4, 2016 at 13:18 Comment(3)

This won't work unless you also update the way the function is called to pass the event object as a parameter. But isn't it simpler just to use a non submit button? – Shanly 21/4, 2016 at 13:28

What is a non-submit button. Doesn't that depend on the browser? – Consumption 21/4, 2016 at 14:1

<button type="button">Label here</button> gives you a button with no default action at all. If you omit the type attribute (as in the OP's markup) the button becomes type=submit by default. – Shanly 21/4, 2016 at 14:23

Add type="button" to your button tag. In form tag, button's default type is submit. That is why when you click on the button, form is submitted and the page reloads.

Masteratarms answered 7/9, 2019 at 14:42 Comment(0)

Recommended topics

Hot tags