CODEWITHSUNDEEP
jqueryhtml
NewUser
NewUser

Reputation: 13323

jQuery on click with radio button should show the particular div

In html markup is something like 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 you can see that I have two radio buttons. One is for Create Sales means when one will click that button it will show the create sales form and other one is for Sales Managment which will on click show the managment section. So in final I want that when someone will go to the page it will show the sales managment section and the sales create form will be hidden by default. So for all that I just used jQuery code like this 

jQuery(document).ready(function() {
  jQuery("input:radio").click(function(){
    $('#sales-details-form').toggle(); 
    $('#sales-details-managment').toggle(); 
  });
});

It's working here but when someone will refresh the page then the Sales create button works with managment div and managment radio button on click shows the sales create form. So can someone kindly tell me how to fix this issue so that when some will click sales managment radio button then it should only show the managment section and someone will click create sales then it will show the sales create form. Any help and suggestions will be really appreciable. Thanks

Upvotes: 0

Views: 1379

Answers (2)

Nono
Nono

Reputation: 7302

Use 'Change' instead of 'Click'

// set display none on sales-details-managment instead of 'sales-details-form'

<div id="sales-details-managment" style="display:none;" >

Java Script Code:

$(document).ready(function () {
    $("#manage-sales").trigger('click');
    $("input:radio").change(function () {
        $('#sales-details-form, #sales-details-managment').toggle();
    });
  });

Upvotes: 1

nnnnnn
nnnnnn

Reputation: 150080

You can test which of the radio buttons was clicked and .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, for more compact code you can take advantage of the fact that .toggle() optionally accepts a boolean indicating whether to 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);
    });
});

Demo: http://jsfiddle.net/Cx5rH/1/

Upvotes: 3

Related Questions