Jquery show and hide causing form submit

Question

Ok, so i have a form and it has several groups of fields, like a facebook account settings edit, to show when you click it.

  <form id="test" action="#" method="POST">
    <ul class="items">
        <li>
            <button class="show-content-button">Show</button>
            <div class="form-content ui-helper-hidden">
                Hello
            </div>
        </li>
        <li>
            <button class="show-content-button">Show</button>
            <div class="form-content ui-helper-hidden">
                Hello
            </div>
        </li>
        <li>
            <button class="show-content-button">Show</button>
            <div class="form-content ui-helper-hidden">
                Hello
            </div>
        </li>
    </ul>
</form>
<script type="text/javascript">
    $(function() {
        $("form#test").submit(function() {
            alert("hello i have been submitted");
        })
        $(".show-content-button").click(function() {
            var $button = $(this);
            if ($button.text() === "Show") {
                $(".form-content", $button.parent()).fadeIn(400);
                $button.html("Hide");
            } else if ($button.text() === "Hide") {
                $(".form-content", $button.parent()).fadeOut(200);
                $button.html("Show");
            }
        })
    })
</script>

When i click one of the shows, it causes the form to be submitted... why? I can fix this problem by returning false on the button click event, BUT, i feel that this is a hack and not a solution. Anyone help?

score 2 · Answer 1 · answered May 30 '11 at 22:55

2

event.preventDefault() should be what you're looking for: http://api.jquery.com/event.preventDefault/

<script type="text/javascript">
$(function() {
    $("form#test").submit(function() {
        alert("hello i have been submitted");
    })
    $(".show-content-button").click(function(event) {
        event.preventDefault();
        var $button = $(this);
        if ($button.text() === "Show") {
            $(".form-content", $button.parent()).fadeIn(400);
            $button.html("Hide");
        } else if ($button.text() === "Hide") {
            $(".form-content", $button.parent()).fadeOut(200);
            $button.html("Show");
        }
    })
})
</script>

answered May 30 '11 at 22:55

Ron DeFreitas

629
3
12

Ok, i put in my comments that i put a return false and it did the trick. I am not asking how to fix it, i am asking why? Why does showing content based off a button click that has NOTHING to do with a form submit causes the form to submit? – ThePrimeagen May 30 '11 at 23:02
@Michael See my answer - it has to do with the default `type` for ` – no.good.at.coding May 30 '11 at 23:06

no.good.at.coding · Accepted Answer · 2011-05-30T23:14:09.377

2

I believe the problem is that by default (in browsers other than IE) the type of the button is submit - for your use case, you want it to be button. Adding an attribute type="button", should fix it.

Here's a working example showing the effect of [the lack of] the type attribute for <button>s. You'll have to see the network activity in your browser's development tool (Firebug in FF, Developer Tools in Chrome)

edited May 30 '11 at 23:14

answered May 30 '11 at 23:04

no.good.at.coding

20,221
2
60
51

You are correct my friend. That is strange default behavior, kind of stupid. Ohh well. I like my button way because it makes html styling easy within the button. Thanks for the correct solution!! – ThePrimeagen May 30 '11 at 23:16

score 0 · Answer 3 · answered May 30 '11 at 23:00

you just need to add return false; it stops form submitting

<script type="text/javascript">
    $(function() {
        $("form#test").submit(function() {
            alert("hello i have been submitted");
        })
        $(".show-content-button").click(function() {
            var $button = $(this);
            if ($button.text() === "Show") {
                $(".form-content", $button.parent()).fadeIn(400);
                $button.html("Hide");
            } else if ($button.text() === "Hide") {
                $(".form-content", $button.parent()).fadeOut(200);
                $button.html("Show");
            }
    return false;
        })
    })
</script>

Read my comment above please! :) thanks for answer and giving your attempt, but maybe i was not clear about my question — ThePrimeagen, May 30 '11 at 23:02

score 0 · Answer 4 · edited May 23 '17 at 10:00

0

I added your code to jsFiddle (linked if you want to stuff around some more), however even if I remove the click event for the button, the submit still fires. It looks like in the absense of a proper submit button, HTML picks one of the buttons. (I can't find this behavior specific to buttons in the spec).

As the other "answerers" have now suggested since I'm a slow typer, you should use preventDefault.

You may find this useful - How is the default submit button on an HTML form determined?

edited May 23 '17 at 10:00

Community

1
1

answered May 30 '11 at 23:04

Ben J

5,811
2
28
32

even when i add a submit button the problem persists. and it does not pick 1 button, it picks all 3 buttons – ThePrimeagen May 30 '11 at 23:06
Bah, I should've tested more than the first one when I was playing around with it! – Ben J May 30 '11 at 23:08

Jquery show and hide causing form submit

4 Answers4