html - jQuery on click with radio button should show the particular div -
in html markup this
<div id="sales-menu-wrp"> <div class="radio-buttons-wrap"> <input type="radio" id="create_sales" name="toggler"/>create sales <input type="radio" id="manage-sales" name="toggler" checked="checked" /> manage sales </div><!--.radio-buttons-wrap--> <div id="sales-details-form" style="display:none;" > <div class="sales-product-details-wrap"> <table id="sales-details-heading"> <tr> <th>products</th> <th>description</th> <th>unit cost</th> <th>quantity</th> <th>discount type</th> <th>discount price</th> <th>price</th> </tr> </table> <table id="sales-product-details"> <tr> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> </tr> </table><!--#sales-product-detail--> </div><!--.sales-product-details-wrap--> </div><!--#sales-details-form--> <div id="sales-details-managment" style="" > <div class="managment-header"> <ul> <li>store name</li> <li>store location</li> <li>store code</li> <li>products</li> </ul> </div> <table class="sales-total-desc"> <tr> <td>store test</td> <td>store test</td> <td>store test</td> <td>store test</td> </tr> </table> </div><!--#sales-details-managment--> </div><!--#sales-menu-wrap--> here can see have 2 radio buttons. 1 create sales means when 1 click button show create sales form , other 1 sales managment on click show managment section. in final want when go page show sales managment section , sales create form hidden default. used jquery code
jquery(document).ready(function() { jquery("input:radio").click(function(){ $('#sales-details-form').toggle(); $('#sales-details-managment').toggle(); }); }); it's working here when refresh page sales create button works managment div , managment radio button on click shows sales create form. can kindly tell me how fix issue when click sales managment radio button should show managment section , click create sales show sales create form. , suggestions appreciable. thanks
you can test of radio buttons clicked , .hide() or .show() accordingly:
jquery(document).ready(function () { jquery('input[name="toggler"]').click(function () { if (this.id === "create_sales") { $('#sales-details-form').show(); $('#sales-details-managment').hide(); } else { $('#sales-details-form').hide(); $('#sales-details-managment').show(); } }); }); demo: http://jsfiddle.net/cx5rh/
or, more compact code can take advantage of fact .toggle() optionally accepts boolean indicating whether show or hide:
jquery(document).ready(function () { jquery('input[name="toggler"]').click(function () { var iscreate = (this.id === "create_sales"); $('#sales-details-form').toggle(iscreate); $('#sales-details-managment').toggle(!iscreate); }); }); 
Comments
Post a Comment