CODEWITHSUNDEEP
javascriptjquery
CnuVas
CnuVas

Reputation: 141

How to get html element id using jquery

I am need to get the id before and after html element of dropdown list on change. Please see blow source code.
When Fund name selected I need to get the previous selected checkbox id or name ( Cash / Epf ) & after selected checkbox id or name ( No.of Units Reedem / Amount Reedem / All units).
Thanks in advance.

$(document).ready(function () {
            $('.units').change(function () {
                alert($(this).attr('id'));
                alert($(this).before().parent().parent().html());
                
            });	
  });
<html>
  <head>
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    </head>
  <body>
<div class="setup-content" id="form-3">
        <div id="repurchase">
            <div class="lblHead">REPURCHASE REQUEST</div>
            <div class="form-group">
                1.<input type="checkbox" name="Fm3CheckBoxList1[]" id="fm3chk11" value="CashPlan" class="singlecheckbox plan" /><label for="fm3chk11">Cash Plan</label>
                  <input type="checkbox" name="Fm3CheckBoxList1[]" id="fm3chk12" value="EPFPlan" class="singlecheckbox plan" /><label for="fm3chk12">EPF Plan</label>
            </div>
            <div class="form-group">
                <div class="col-lg-6">
                    <label>Fund Name</label>
                    <select id="fundId" class="form-control drplst units"  AppendDataBoundItems="true">
                        <option Value=""></option>
                        <option Value="123">123</option>
                        <option Value="369">369</option>
                    </select>
                </div>                
                <div class="col-lg-6">
                    <div class="clearfix"></div>
                    <input type="checkbox" name="Fm3CheckBoxList2[]" id="fm3chk21" value="No_OfUnitToRedeem" class="singlecheckbox" /><label for="fm3chk21">No. of Unit to Redeem</label>
                    <input type="checkbox" name="Fm3CheckBoxList2[]" id="fm3chk22" value="Amount_ToRedeem" class="singlecheckbox" /><label for="fm3chk22">Amount to Redeem</label>
                    <input type="checkbox" name="Fm3CheckBoxList2[]" id="fm3chk23" value="All_Units" class="singlecheckbox" /><label for="fm3chk23">All Units</label>
                    <asp:TextBox ID="Fm3TextBox2" runat="server" class="form-control" placeholder="AMOUNT"></asp:TextBox>
                </div>
                <div class="clearfix"></div>
            </div>
	</div>
    </div>

Upvotes: 0

Views: 185

Answers (2)

Eric Lease
Eric Lease

Reputation: 4194

Assuming your plans are mutually exclusive, you would want radio buttons to represent them, unless that F3m... indicates some JS framework that would turn appropriately decorated checkboxes into mutually exclusive selections. Maybe you don't want them to be mutually exclusive. If that's the case I'll update my answer. Either way, you can use another attribute on the group of checkboxes to aggregate them all, such as name. See my changes to the code snippet (below) for using name to find the selected plan. You could assign all checkboxes in a particular group a name, class, or modify their IDs to include some base to use in a selector. You could put them inside a container element (div) for easier reference, and then bind your inputs' events...

var lastPlanSelection = "none";
$('input[name=targetSet]').on('click', function() { lastPlanSelection = $(this).val(); });

Modifying your snippet to find the selected radio button...same principle could be applied to checkboxes using class attribute.

$(document).ready(function () {
            $('.units').change(function () {
                var selectedPlan = $('input[name=plan]:checked');

                alert("Selected Plan: " + 
                    (selectedPlan.length === 1 ? selectedPlan.val() : "none"));
            });	
  });
<html>
  <head>
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    </head>
  <body>
<div class="setup-content" id="form-3">
        <div id="repurchase">
            <div class="lblHead">REPURCHASE REQUEST</div>
            <div class="form-group">
                1.<input type="radio" id="cashPlan" name="plan" value="Cash"><label for="cashPlan">Cash Plan</label><br/>
                  <input type="radio" id="epfPlan" name="plan" value="EPFPlan"><label for="epfPlan">EPF Plan</label>
            </div>
            <div class="form-group">
                <div class="col-lg-6">
                    <label>Fund Name</label>
                    <select id="fundId" class="form-control drplst units"  AppendDataBoundItems="true">
                        <option Value=""></option>
                        <option Value="123">123</option>
                        <option Value="369">369</option>
                    </select>
                </div>                
                <div class="col-lg-6">
                    <div class="clearfix"></div>
                    <input type="checkbox" name="Fm3CheckBoxList2[]" id="fm3chk21" value="No_OfUnitToRedeem" class="singlecheckbox" /><label for="fm3chk21">No. of Unit to Redeem</label>
                    <input type="checkbox" name="Fm3CheckBoxList2[]" id="fm3chk22" value="Amount_ToRedeem" class="singlecheckbox" /><label for="fm3chk22">Amount to Redeem</label>
                    <input type="checkbox" name="Fm3CheckBoxList2[]" id="fm3chk23" value="All_Units" class="singlecheckbox" /><label for="fm3chk23">All Units</label>
                    <asp:TextBox ID="Fm3TextBox2" runat="server" class="form-control" placeholder="AMOUNT"></asp:TextBox>
                </div>
                <div class="clearfix"></div>
            </div>
	</div>
    </div>

Upvotes: 0

Norlihazmey Ghazali
Norlihazmey Ghazali

Reputation: 9060

Try this :

$(document).ready(function () {
        $('.units').change(function () {
            alert($(this).closest('.form-group').prev().find('.singlecheckbox:checked').attr('id'));
            alert($(this).parent().next().find('.singlecheckbox:checked').attr('id'));

        }); 
});

This is working for single checked box, if more than one checkbox was chekced, you need to iterate that and doing something with that.

Upvotes: 1

Related Questions