Menu icon Foundation
data-toggle not working with form tag

I am using data-toggle within a form. When I click the button you can see the callout for a moment and then the page reloads. I found out that <form> is causing the issue, but I am not sure how to fix it. I am using Foundation 6.3.0

Code:

<form runat="server">

<button class="button" data-toggle="panel">Add Guest</button>

<div class="callout" id="panel" data-toggler=".is-shown" >
  <h4>Hello!</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta quas optio alias voluptas nobis iusto mollitia asperiores incidunt reprehenderit doloribus voluptatibus officiis minus, inventore, quasi nisi. Consequuntur, quidem. Sint, dicta?</p>
</div>

</form>

 

CSS:

.callout{
  display:none !important;
}

.callout.is-shown {
    display:block !important;
  }

data-toggleformCalloutbutton

I am using data-toggle within a form. When I click the button you can see the callout for a moment and then the page reloads. I found out that <form> is causing the issue, but I am not sure how to fix it. I am using Foundation 6.3.0

Code:

<form runat="server">

<button class="button" data-toggle="panel">Add Guest</button>

<div class="callout" id="panel" data-toggler=".is-shown" >
  <h4>Hello!</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta quas optio alias voluptas nobis iusto mollitia asperiores incidunt reprehenderit doloribus voluptatibus officiis minus, inventore, quasi nisi. Consequuntur, quidem. Sint, dicta?</p>
</div>

</form>

 

CSS:

.callout{
  display:none !important;
}

.callout.is-shown {
    display:block !important;
  }
Rafi Benkual 3 months ago

Using a `<button>` tag in a form is typically reserved for submitting a form. You might use prevent default in a normal situation.

The easy fix is to use an `<a>` tag:
https://codepen.io/rafibomb/pen/YBEZpQ

Melissa LaFave 2 months ago

That worked! Thank you!

Melissa LaFave 2 months ago

That worked! Thank you!