CODEWITHSUNDEEP
javascripthtmltwitter-bootstrapbootstrap-4bootstrap-modal
Temak
Temak

Reputation: 47

Page keeps refreshing when I click on a Bootstrap Modal

I have a page with two buttons connected to two different bootstrap modals. They were all working fine but all of a sudden stopped. Whenever I click on either button now, the page just keeps refreshing as opposed to displaying the respective modal. I do not know what the problem is as there is no error in the console.

The site is hosted on https://storzy.netlify.app/

I have searched high and low but can't seem to find what might be stopping the modal from displaying correctly now.

Please how do I go about stopping the page from refreshing and showing the correct modal instead?

Thank you.

Upvotes: 2

Views: 3673

Answers (2)

Siona Fernandes
Siona Fernandes

Reputation: 375

If the button is within a form, the default behavior is submit. If the button is not within a form, it will do nothing. Hence to avoid the page refresh, add type="button" to the buttons to prevent it.

<button class="btn btn-outline-primary" data-toggle="modal" data-target="#loginModal" type="button">login</button>
<button class="btn btn-primary ml-3" data-toggle="modal" data-target="#signupModal" type="button">Sign up</button>

Upvotes: 3

sonesh-aps
sonesh-aps

Reputation: 96

change the form to div for your login and signup parents

<div class="form-inline mt-3 mt-lg-0">
    <button class="btn btn-outline-primary" data-toggle="modal" data-target="#loginModal">login</button>
    <button class="btn btn-primary ml-3" data-toggle="modal" data-target="#signupModal">Sign up</button>
</div>

Upvotes: 5

Related Questions