Tabs in combination with forms

Topic: Tabs in combination with forms

Tklaversma free asked 7 years ago

I'm using Tabs with 2 panes. In each tab-pane I have a form with two inputs. When I switch to the non-active tab-pane and go back to the other, both forms are visible :S. I used this method exactly as described on https://mdbootstrap.com/components/tabs/. I think combing this with forms somehow messes it up. Anyone got an idea?

Add comment

Marta Wierzbicka staff answered 7 years ago

1 0 Best answer

Hi, this is a similar issue like here: https://mdbootstrap.com/support/nested-carousel-inside-tab-pane/, so this tabs problem is a Bootstrap bug but it’s fixed already in Bootstrap 4 beta-2. Now we are working on MDB update that contains the latest version of Bootstrap. Best, Marta

Add comment

Neal Creapeau pro answered 7 years ago

1 0 Best answer

<p>I hope the staff at MDB can comment on this with some insight. Using the Classic Tabs from https://mdbootstrap.com/components/tabs/ example. The following code will NOT work properly with the value attribute set on the input on pane 3. However if you remove the value attribute completely, all tabs work correctly. Why and how is the value attribute affecting the other tabs?</p>
<p> </p>
<pre>
<form method="post" action="" id="contactadd">
  
  <div class="tabs-wrapper">
    <ul class="nav classic-tabs tabs-cyan" role="tablist">
      <li class="nav-item">
        <a class="nav-link waves-light active" data-toggle="tab" href="#panel1" role="tab">Profile</a>
      </li>
      <li class="nav-item">
        <a class="nav-link waves-light" data-toggle="tab" href="#panel2" role="tab">Follow</a>
      </li>
      <li class="nav-item">
        <a class="nav-link waves-light" data-toggle="tab" href="#panel3" role="tab">Contact</a>
      </li>
      <li class="nav-item">
        <a class="nav-link waves-light" data-toggle="tab" href="#panel4" role="tab">Be awesome</a>
      </li>
   </ul>
 </div>
 
 <div class="tab-content card">
 
 <div class="tab-pane fade in show active" id="panel1" role="tabpanel">
    <div class="md-form">
      <input type="text" id="fname" name="firstname" class="form-control">
      <label for="fname">First Name</label>
   </div>
 </div>

<div class="tab-pane fade" id="panel2" role="tabpanel">
  <div class="md-form">
    <input type="text" id="lname" name="lastname" class="form-control">
    <label for="lname">Last Name</label>
  </div>
</div>

<div class="tab-pane fade" id="panel3" role="tabpanel">
  <p>This belongs on Pane 3 - Contact</p>
  <div class="md-form">
    <input type="text" id="street" name="address" class="form-control" value="somevalue">
    <label for="street">Street</label>
  </div>
</div>

<div class="tab-pane fade" id="panel4" role="tabpanel">
  <p>This belongs on Pane 4 - Be awesome </p>
  <div class="md-form">
    <input type="text" id="citylabel" name="city" class="form-control">
    <label for="citylabel">City</label>
 </div>
</div>

</div>
</form></pre>
<p> </p>

Please insert min. 20 characters.

I hope the staff at MDB can comment on this with some insight. Using the Classic Tabs from https://mdbootstrap.com/components/tabs/ example. The following code will NOT work properly with the value attribute set on the input on pane 3. However if you remove the value attribute completely, all tabs work correctly. Why and how is the value attribute affecting the other tabs?

<form method="post" action="" id="contactadd">
  <!-- Nav tabs -->
  <div class="tabs-wrapper">
    <ul class="nav classic-tabs tabs-cyan" role="tablist">
      <li class="nav-item">
        <a class="nav-link waves-light active" data-toggle="tab" href="#panel1" role="tab">Profile</a>
      </li>
      <li class="nav-item">
        <a class="nav-link waves-light" data-toggle="tab" href="#panel2" role="tab">Follow</a>
      </li>
      <li class="nav-item">
        <a class="nav-link waves-light" data-toggle="tab" href="#panel3" role="tab">Contact</a>
      </li>
      <li class="nav-item">
        <a class="nav-link waves-light" data-toggle="tab" href="#panel4" role="tab">Be awesome</a>
      </li>
   </ul>
 </div>
 <!-- Tab panels -->
 <div class="tab-content card">
 <!--Panel 1-->
 <div class="tab-pane fade in show active" id="panel1" role="tabpanel">
    <div class="md-form">
      <input type="text" id="fname" name="firstname" class="form-control">
      <label for="fname">First Name</label>
   </div>
 </div>
 <!--/.Panel 1-->

 <!--Panel 2-->
<div class="tab-pane fade" id="panel2" role="tabpanel">
  <div class="md-form">
    <input type="text" id="lname" name="lastname" class="form-control">
    <label for="lname">Last Name</label>
  </div>
</div>
<!--/.Panel 2-->

<!--Panel 3-->
<div class="tab-pane fade" id="panel3" role="tabpanel">
  <p>This belongs on Pane 3 - Contact</p>
  <div class="md-form">
    <input type="text" id="street" name="address" class="form-control" value="somevalue">
    <label for="street">Street</label>
  </div>
</div>
<!--/.Panel 3-->

<!--Panel 4-->
<div class="tab-pane fade" id="panel4" role="tabpanel">
  <p>This belongs on Pane 4 - Be awesome </p>
  <div class="md-form">
    <input type="text" id="citylabel" name="city" class="form-control">
    <label for="citylabel">City</label>
 </div>
</div>
<!--/.Panel 4-->

</div>
</form>

Add comment

Neal Creapeau pro answered 7 years ago

0 0 Best answer

Please insert min. 20 characters.

I have run into this same problem. I have multiple tab panes with multiple inputs on each tab pane. All the inputs belong to a parent form that the tabs-wrapper is a child of. After endless hours of exploring why content from the last 2 tab panes show up in the the other tabs once visited, i found that it happens when you add the value attribute to an input element. I removed all the value attributes from all the inputs and the problem went away. However, not being able to set a value to an input element??? Not very useful. Any ideas on how to fix this?

Tklaversma free commented 7 years ago

In my case the values do not appear on the wrong input, but both tab panes become visible when switching between them. I think you problem lies more in the way of using label for attribute in combination with the right input id. For example. I have an input with id A. Then my label for that input should have for="A". But when you apply this also to another label, your described problem occurs.

Neal Creapeau pro commented 7 years ago

I don't have values appearing in the wrong inputs, All inputs have distinct ids that match the appropriate labels. However, if a you set the value attribute on one of those inputs, once the tab pane that holds that input is viewed, it shows up (not only the input but other elements as well) start showing on other tabs

Add comment

Marta Wierzbicka staff answered 7 years ago

0 0 Best answer

Hi,

could you send me the file with your code with this problem to m.szymanska@mdbootstrap.com? I'll try to help you. And if you downloaded MDB package from our website then you have free version and tabs are pro components, so they won't work within free version.

Best,

Marta

Tklaversma free commented 7 years ago

Thanks for you response. I just mailed you my code example. I use the MDB Pro version.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Tklaversma

12Support score
1Questions 1Answers 0Snippets