I have a Twitter Bootstrap tab like this: /

   <div class="my-example">

    <ul id="myTab" class="nav nav-tabs">
      <li class=""><a href="#home" data-toggle="tab">Home</a></li>
      <li class=""><a href="#profile" data-toggle="tab">Profile</a></li>
      <li class="dropdown active">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li class="active"><a href="#dropdown1" data-toggle="tab">@fat</a></li>
          <li><a href="#dropdown2" data-toggle="tab">@mdo</a></li>
        </ul>
      </li>
    </ul>

    <div id="myTabContent" class="tab-content">
      <div class="tab-pane fade" id="home">
          <p>Raw denim you probably haven't heard of them jean shorts Austin.</p>
          <p style="display: none">mytext1</p>
      </div>
      <div class="tab-pane fade" id="profile">
        <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.</p>
        <p style="display: none">mytext2</p>
      </div>
      <div class="tab-pane fade active in" id="dropdown1">
        <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.</p>
        <p style="display: none">mytext3</p>
      </div>
      <div class="tab-pane fade" id="dropdown2">
        <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater.</p>
        <p  style="display: none">mytext4</p>
      </div>
    </div>

    <button onclick="sendTextToServer('aaaa')"   
             id="sendButton"  status="initial">
        Send now
    </button>

</div>

When user clicks button, I need to find the active tab and get its hidden paragraph content and pass this to button onClick code.

For example when user clicks "Profile" tab, button's onClick code will be like this:

sendTextToServer("mytext2");

When user selects "@mdo" from Dropdown tab, button's onClick code will be like this:

sendTextToServer("mytext4");

I have a Twitter Bootstrap tab like this: http://jsfiddle/mavent/MgcDU/7100/

   <div class="my-example">

    <ul id="myTab" class="nav nav-tabs">
      <li class=""><a href="#home" data-toggle="tab">Home</a></li>
      <li class=""><a href="#profile" data-toggle="tab">Profile</a></li>
      <li class="dropdown active">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li class="active"><a href="#dropdown1" data-toggle="tab">@fat</a></li>
          <li><a href="#dropdown2" data-toggle="tab">@mdo</a></li>
        </ul>
      </li>
    </ul>

    <div id="myTabContent" class="tab-content">
      <div class="tab-pane fade" id="home">
          <p>Raw denim you probably haven't heard of them jean shorts Austin.</p>
          <p style="display: none">mytext1</p>
      </div>
      <div class="tab-pane fade" id="profile">
        <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.</p>
        <p style="display: none">mytext2</p>
      </div>
      <div class="tab-pane fade active in" id="dropdown1">
        <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.</p>
        <p style="display: none">mytext3</p>
      </div>
      <div class="tab-pane fade" id="dropdown2">
        <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater.</p>
        <p  style="display: none">mytext4</p>
      </div>
    </div>

    <button onclick="sendTextToServer('aaaa')"   
             id="sendButton"  status="initial">
        Send now
    </button>

</div>

When user clicks button, I need to find the active tab and get its hidden paragraph content and pass this to button onClick code.

For example when user clicks "Profile" tab, button's onClick code will be like this:

sendTextToServer("mytext2");

When user selects "@mdo" from Dropdown tab, button's onClick code will be like this:

sendTextToServer("mytext4");

• javascript
• jquery
• html
• twitter-bootstrap

3 Answers 3

Try

function sendTextToServer(){
    var $tab = $('#myTabContent'), $active = $tab.find('.tab-pane.active'), text = $active.find('p:hidden').text();
    alert(text)
}

Demo: Fiddle

Add the jQuery click handler for your button

$('#sendButton').click(function(){
    sendTextToServer($('.tab-pane.active').find('p:hidden').text())
});

and change

<button onclick="sendTextToServer('aaaa')"   
         id="sendButton"  status="initial">
    Send now
</button>

to

<button id="sendButton"  status="initial">
    Send now
</button>

Doing this will remove the onclick handler from your button and replace it with a jQuery click handler. The jQuery click handler will then call your sendTextToServer function with the hidden text as a parameter

From here should be easy:

$('#myTab a[href="#profile"]').click(function() { 

    alert("You clicked Profile tab!");

});