carpinteyromvs
New Member
Hi I have created a JSP page. First tab contains a SELECT field. Based on the selected value I want to show the next tab. Can anyone help me please? I tried many times, but I am not getting.\[code\]<div class="navbar btn-navbar"> <div id="tabs" class="tabbable"> <ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="http://stackoverflow.com/questions/15756817/#datacollector" target="main" data-toggle="tab">Data Collector</a></li> <li class="hidden"><a href="http://stackoverflow.com/questions/15756817/#fromDB" target="main" data-toggle="tab">Data Load</a></li> <li class="hidden"><a href="http://stackoverflow.com/questions/15756817/#fromFile" target="main" data-toggle="tab">Data Load</a></li> <li class="hidden"><a href="http://stackoverflow.com/questions/15756817/#email" target="main" data-toggle="tab">Data Load</a></li> <li><a href="http://stackoverflow.com/questions/15756817/ajax/DataFieldMapping.jsp" target="main" data-toggle="tab">Data Map</a></li> <li><a href="http://stackoverflow.com/questions/15756817/#schedule" target="main" data-toggle="tab">Schedule</a></li> </ul> <br> <br> <br> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="datacollector"> <div class="container"> <div class="row"> <div class="span8"> <form name="selectType" action="selectType" onsubmit="return validateForm()" target="#fromDB" method="get"> <fieldset> </select> <label class="control-label" for="dataloadType">Data load Type:</label> <select id="dataloadType" name="dataloadType"> <option>Choose Data load Type</option> <option value="http://stackoverflow.com/questions/15756817/fromDB">From Database</option> <option value="http://stackoverflow.com/questions/15756817/fromFile">From File</option> <option value="http://stackoverflow.com/questions/15756817/email">E-mail</option> <option value="http://stackoverflow.com/questions/15756817/webServices">Web Services</option> </select> <p> <button id="nexttab" type="submit" class="btn btn-success">Submit</button> </p> </fieldset> </form> </div> </div> </div> </div> <div class="tab-pane fade" id="fromDB"> <iframe src="http://stackoverflow.com/questions/15756817/GenericFileUpload.jsp" width="1250" height="400"></iframe> </div> <div class="tab-pane fade" id="fromFile"> <iframe src="http://stackoverflow.com/questions/15756817/GenericDB.jsp" width="1250" height="400"></iframe> </div> <div class="tab-pane fade" id="email"> <iframe src="http://stackoverflow.com/questions/15756817/EmailService.jsp" width="1250" height="400"></iframe> </div> <div class="tab-pane fade" id="datamap"> <iframe src="http://stackoverflow.com/questions/15756817/DataFieldMapping.jsp" width="1250" height="400"></iframe> </div> <div class="tab-pane fade" id="schedule"> <iframe src="http://stackoverflow.com/questions/15756817/UploadConfiguration.jsp" width="1250" height="400"></iframe> </div> </div> </div> </div>\[/code\]If the user selects from File it should show the next tab with id fromFile and also it should hide the tabs with ids fromDB and email. Can someone help me out?How to do using Jquery?