CODEWITHSUNDEEP
javascriptjqueryjsp
Learner
Learner

Reputation: 547

Javascript : how to know which tab is active

In my code i am using six tabs now i want to know which tab is active .one more thing is that each tab call the same function on clicking and i want to check activation tab(either tab1,tab2 ..) on button click which call other function and in that function i want to check active tab below i explain my problem with code

If i say my problem in one line that want to know active tab on clicking button which call javascript function ,function not on tab clicking*

here i m not putting all code of pages but only require code ,Hope you understand my problems and i provide needed code Thanks in advance

Add.jsp

  This is the page on which i am using tabs


   <form action="AddInspServlet" method="Post" enctype="multipart/form-data"> <div>
                <div id="slider">
                    <div class="form-step" >

                        <div class="row">
                            <div class="form-left">container Number *</div>
                            <div class="form-right"><input type="text" id="fname" name="contno" class="form-input" onblur="sending(this.value)"/></div>
                            <div class="form-error"></div>
                        </div>
                        <div class="row">
                            <div class="form-left">Container type *</div>
                            <div class="form-right"><input type="text" id="lname" name="conttype" disabled="disabled" class="form-input" /></div>
                            <div class="form-error"></div>
                        </div>
                        <div class="row">
                            <div class="form-left">Inspection type *</div>
                            <div class="form-right">
                                <select id="gender" name="insptype">
                                    <option value="0">Select</option>
                                    <option value="Gate In">Gate In</option>
                                    <option value="Gate Out">Gte Out</option>
                                </select>
                            </div>
                            <div class="form-error"></div>
                        </div>
                        <div class="row">
                            <div class="form-left">Place</div>
                            <div class="form-right"><input type="text" id="places" name="places" class="form-input" /></div>
                            <div class="form-error"></div>
                        </div>
                    </div>

                    <div class="form-step" >                                
                            <div class="form-left1">                                    
                           <div class="container1">
                                <ul class="tabs">

                                    <li><a href="#tab1" onclick="return ValidateFileUpload('img1')">Left</a></li>
                                    <li><a href="#tab2" onclick="return ValidateFileUpload('img2')">Right</a></li>
                                    <li><a href="#tab3" onclick="return ValidateFileUpload('img3')">Top</a></li>
                                    <li><a href="#tab4" onclick="return ValidateFileUpload('img4')">Bottom</a></li>
                                    <li><a href="#tab5" onclick="return ValidateFileUpload('img5')">Front</a></li>
                                    <li><a href="#tab6" onclick="return ValidateFileUpload('img6')">Rear</a></li>

                                </ul>
                                <div class="tab_container">
                                    <div id="tab1" class="tab_content">
                                    <div id="hidendiv"></div>
                                        <h2>Left Side</h2>
                                        <div id="leftside">
                                        </div>
                                         <input type="file" name="img1" id="img1" onchange="return ValidateFileUpload('img1')" />

                                    </div>

                                    <div id="tab2" class="tab_content">
                                        <h2>Right Side</h2>
                                        <div id="rightside">
                                        </div>      
                                        <input type="file" name="img2" id="img2" onchange="return ValidateFileUpload('img2')" />
                                    </div>

                                    <div id="tab3" class="tab_content">
                                        <h2>Top Side</h2>
                                        <div id="topside">
                                        </div>  
                                        <input type="file" name="img3" id="img3" onchange="return ValidateFileUpload('img3')" />
                                   </div>

                                    <div id="tab4" class="tab_content">
                                        <h2>Bottom Side</h2>
                                        <div id="bottomside">
                                        </div>  
                                         <input type="file" name="img4" id="img4" onchange="return ValidateFileUpload('img4')" />
                                   </div>

                                   <div id="tab5" class="tab_content">
                                        <h2>Front Side</h2>
                                        <div id="frontside">
                                        </div>  
                                        <input type="file" name="img5" id="img5" onchange="return ValidateFileUpload('img5')" />
                                   </div>

                                   <div id="tab6" class="tab_content">
                                        <h2>Rear Side</h2>
                                        <div id="rearside">
                                        </div>  
                                        <input type="file" name="img6" id="img6" onchange="return ValidateFileUpload('img6')" />
                                   </div>
                                </div>
                        </div>
                            </div>
                            <div class="form-right1">

                                 <img src="images/noimg.jpg" height="288px" width="400px" id="blah">
                            </div>

                     <div style=" width: 200px; margin-top:225px; margin-left:300px">Remarks: <input type="text" width="100px" name="remark"/></div>

                    </div>

                </div>
         </div>

         <div class= "ash" style="width:auto; margin-left:35%; float: left;">
            <input type="submit" name="btn" id="submit" value="AddInspection" onclick="im()" />
            <input type="submit" name="btn" value="Cancel"/>    
         </div>
  </form>

JAVA Script function:

This is the function on which i want to know which tab is active that is defined in above jsp

            <script type="text/javascript">
   function im()
 {  
 /*alert("calling im function");
  var tabname = document.getElementById("tab1");
 if(tabname){
    alert("tab1 is active");
  }else{
    alert("tab 1 is not active");
  }*/

if($('#img1').val()=="" || $('#img2').val()=="" || $('#img3').val()=="" || $('#img4').val()=="" || $('#img5').val()=="" || $('#img6').val()=="")

    {
        alert("Please select image");
        $('#submit').prop('disabled',true);
    }
 else
    {
    $('#submit').prop('disabled',false);
    }
  }

Upvotes: 1

Views: 17502

Answers (4)

C Jones
C Jones

Reputation: 241

I'm new here but you could add a worthless class to the active tab on click, then on the button click retrieve the id or whatever you want.

jQuery

//edit: added function to add and remove class, replaced text to illustrate

 $(function () {

    $('.tab_content').click(function () {
       $('.tab_content').removeClass('active').text('');
       $(this).addClass('active').text('am active');
     })


    $('#button').click(function () {
        $('.tab_content').each(function () {
            if ($(this).hasClass('active')) {
                alert($(this).attr('id')+" is the active tab");
                alert($(this).text()+" is the text");
            }
        });
     });
});

html

 <div id='1' class='tab_content'>not</div>
 <div id='2' class='tab_content active'>am active</div>
 <div id='3' class='tab_content'>not</div>
 <div id='4' class='tab_content'>not</div>

<button id='button' style='width:50px; height:50px;'>Click</button>

Here is a working fiddle: http://jsfiddle.net/Lv5VJ/2/

I'm sure there are better ways but hey, I'm trying haha.

Upvotes: 0

Ramniwas chhimpa
Ramniwas chhimpa

Reputation: 205

$('.tab').click(function(){
    var x=$(this).prop('id');
    $('#lbl').html('Active Tab'+ x);
});

Upvotes: 0

Alok Pathak
Alok Pathak

Reputation: 875

you can assign same class to all tab and bind the click function in document ready, you will get the current object by 'this'.

$('.tab').click(function(){
    $(this).val();
  });

Upvotes: 0

Arunkumar Vasudevan
Arunkumar Vasudevan

Reputation: 5330

Try like

$('.tab').click(function(){
var a=$(this).attr('id');
$('#sample').html('Active Tab is'+a);
});

Fiddle

Upvotes: 1

Related Questions