javascript - How to get html element id using jquery -
i need id before , after html element of dropdown list on change. please see blow source code.
when fund name selected need previous selected checkbox id or name ( cash / epf ) & after selected checkbox id or name ( no.of units reedem / amount reedem / units).
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 redeem</label> <input type="checkbox" name="fm3checkboxlist2[]" id="fm3chk22" value="amount_toredeem" class="singlecheckbox" /><label for="fm3chk22">amount 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>
assuming plans mutually exclusive, want radio buttons represent them, unless f3m...
indicates js framework turn appropriately decorated checkboxes mutually exclusive selections. maybe don't want them mutually exclusive. if that's case i'll update answer. either way, can use attribute on group of checkboxes aggregate them all, such name
. see changes code snippet (below) using name
find selected plan. assign checkboxes in particular group name, class, or modify ids include base use in selector. put them inside container element (div) easier reference, , bind inputs' events...
var lastplanselection = "none"; $('input[name=targetset]').on('click', function() { lastplanselection = $(this).val(); });
modifying snippet find selected radio button...same principle applied 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 redeem</label> <input type="checkbox" name="fm3checkboxlist2[]" id="fm3chk22" value="amount_toredeem" class="singlecheckbox" /><label for="fm3chk22">amount 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>
Comments
Post a Comment