Page reloading when using jQuery?

Question

So I am currently trying to code my page to allow hidden divs to appear based on pressing buttons. I know that my code works, the first button pressed shows the hidden div. But when I press the second button it momentarily displays and then reloads the page. I don't want it to reload.

 <script>
        $(document).ready(function () {
            $(".button1").click(function () {
                $(".new-post-mid").css("display", "block");
            });
        });
    </script>
    <script>
        $(document).ready(function () {
            $(".button2").click(function () {
                $(".new-post-mid2").css("display", "block");
            });
        });
    </script>
    </div> <!-- navbar -->
    <div class="new-post-outer">
        <div class="new-post-outish">
            <button class="button1">Edit your account details</button>
            <li> Fields marked with an asterisk (*) are required.</li>
        </div>
        <div class="new-post-mid">
            <form class="abc">
                <label> Please enter your password to change your settings.</label>
                <label> Password: </label>
                <label> Repeat Password: </label>
                <label> Please complete the captcha: </label>
                <button class="button2">Submit</button>
            </form>
        </div>
        <div class="new-post-mid2">
            <form class=abc>
                <label> Username: (*) </label>
                <label> Email Address: (*) </label>
                <label> First Name: </label>
                <label> Last Name: </label>
            </form>
        </div>
    </div><!-- new-post-outer-->

The default action of any button within a `
` is to submit the form, thus reloading the page. Either intercept the form submit and prevent it, or just make the button `type="button"` so it won't try to submit at all. — Tyler Roper, Feb 26 '20 at 20:44
You need to stop the default action of the form with `event.preventDefault()`. Event is implicitly passed into the click handler. — Sterling Archer, Feb 26 '20 at 20:44
Does this answer your question? [prevent refresh of page when button inside form clicked](https://stackoverflow.com/questions/7803814/prevent-refresh-of-page-when-button-inside-form-clicked) — Tyler Roper, Feb 26 '20 at 20:47

ROOT · Accepted Answer · 2020-02-26T20:55:39.307

0

Just use e.preventDefault() or as mentioned by @Tyler Roper in the comments, you can just change the button to <input type="button ... />"

The issue you are facing caused by the button control handling the submit action of the form.

   ...
   $(document).ready(function () {
        $(".button2").click(function (e) {
            e.preventDefault()
            $(".new-post-mid2").css("display", "block");
        });
    });
    ...

edited Feb 26 '20 at 20:55

answered Feb 26 '20 at 20:44

ROOT

11,363
5
30
45

Personally, it seems a bit strange to implement a control that performs an action you don't want, only to then add more code to prevent that action from happening. You could just change the button to not be a `type="submit"` instead. (Side note: It's not necessary to do `e.preventDefault()` for `button1` because it is not wrapped in a `
`.)
– Tyler Roper Feb 26 '20 at 20:49
1

Correct, I will amend my answer and point to your comment, thanks. – ROOT Feb 26 '20 at 20:52

Page reloading when using jQuery?

1 Answers1