As I have generated HTML Table (Asp.net Table),
now I need the value of the Cell One when that respective checkBox is checked.
Suppose the second check box is clicked I need the value of the second row
E.g. if month 2 is clicked I need the value 553.5000
USING JAVA SCRIPT.
As well as the total of the same..
Total of the check value..
<table border="2" id="ctl00_ctl00_B_A_ucStudentRegistration1_TblTotalPay">
<tbody><tr>
<td class="caption">Total Amount</td><td class="caption">Paid Fees</td>
</tr><tr style="border-width: 3px; border-style: solid;">
<td>5889.2400</td><td><span disabled="disabled"><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" disabled="disabled" checked="checked" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth1" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth1"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth1">Month1</label></span></td>
</tr><tr>
<td>553.5000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth2" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth2"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth2">Month2</label></td>
</tr><tr>
<td>885.6000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth3" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth3"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth3">Month3</label></td>
</tr><tr>
<td>553.5000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth4" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth4"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth4">Month4</label></td>
</tr><tr>
<td>553.5000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth5" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth5"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth5">Month5</label></td>
</tr><tr>
<td>553.5000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth6" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth6"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth6">Month6</label></td>
</tr><tr>
<td>553.5000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth7" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth7"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth7">Month7</label></td>
</tr>
</tbody></table>
Your question doesn't disclose what you're really after and doesn't provide a dev-friendly example, but let's try anyway, shall we?
Check out the Working Demo (open the console).
Here's the JS for your convenience
$('.TotalPay input[type=checkbox]').change(function(){
var amount = $(this).parent().siblings().text();
console.log(amount);
});
Using JavaScript, we can bind event handlers to DOM elements from outside the markup, thus leaving the HTML clean and semantic. onXXXXX attributes might work, but you should really read about Unobtrusive JS.
In my example I chose jQuery, which greatly simplifies tedious tasks like DOM traversal. Basically, here's what this snippet do:
Grab the relevant checkboxes by CSS selector,
attach an anonymous handler to their 'change' event.
in it, traverse for the checkbox's 'uncle' and store its text in the amount variable
p.s. Please use semantic classnames for your elements. .net screws up your IDs, so IMO just rely more heavily on classes.
Also, "jQuery is great, learn JavaScript first"™.
Related
I have literally no experience. I'm a paramedic, and I have to fill out hundreds of patients forms using a redundant form with many superfluous fields.
I am trying to write a script to prefill some of the fields that stay the same for most patients, for example, "age units." Almost all of our patient's ages are in "years" but the software fields listed include "minutes, hours, days, weeks, months, years, cancel the selection, etc." The field is required for completion of a report, yet the default is set to "cancel selection", which will prevent completion of the report.
I have attached the code as it is. I literally had to google what (language?) this was even written in. First, I figured that I could inspect the default element, inspect the desired element, and just modify the values so that the desired element was checked. Then, I tried to use an autofill extension that allowed me to select a form field and modify the value. I tried to modify it as a checkbox/radio. I tried to use javascript. I yelled. I have been wildly unsuccessful. If someone could point me in the right direction, I'd be eternally grateful. I don't even know what I'm trying to modify. Is it a radio/checkbox? Is it a button? Is it text?
I have tried as much as my feeble brain is capable of.
This is what one of the offending elements of the form looks like.
<div class="radio_checkbox_div_container">
<table class="table_radio">
<tbody>
<tr>
<td class="td_radio ui-state-highlight"><input type="radio" name="ePatient_16" id="ePatient_16_cancel" value="" checked=""> Cancel Selection </td>
<td colspan="2"> </td>
</tr>
<tr>
<td class="td_radio td_3col"><input type="radio" class="reg_option" name="ePatient_16" id="ePatient_16_0" value="2516001"> Days </td>
<td class="td_radio td_3col"><input type="radio" class="reg_option" name="ePatient_16" id="ePatient_16_1" value="2516003"> Hours </td>
<td class="td_radio td_3col"><input type="radio" class="reg_option" name="ePatient_16" id="ePatient_16_2" value="2516005"> Minutes </td>
</tr>
<tr>
<td class="td_radio td_3col"><input type="radio" class="reg_option" name="ePatient_16" id="ePatient_16_3" value="2516007"> Months </td>
<td class="td_radio td_3col"><input type="radio" class="reg_option" name="ePatient_16" id="ePatient_16_4" value="2516009"> Years </td>
<td class="td_radio td_3col"><input type="radio" class="nil_option" name="ePatient_16" id="ePatient_16_5" value="7701001"> Not Applicable </td>
</tr>
<tr>
<td class="td_radio td_3col"><input type="radio" class="nil_option" name="ePatient_16" id="ePatient_16_6" value="7701003"> Not Recorded </td>
</tr>
</tbody>
</table>
</div>
I want to modify some form fields (all similar to above) so that my most used selections are the default values.
He Hi Hello,
I create one jsfiddle for you, just copy paste html tags and replace ids in script to select radio buttons and other elements
this will give you basic idea
https://jsfiddle.net/1efx59vn/
<div class="radio_checkbox_div_container"><table class="table_radio"><tbody><tr><td class="td_radio ui-state-highlight"><input type="radio" name="ePatient_16" id="ePatient_16_cancel" value="" > Cancel Selection </td><td colspan="2"> </td></tr>
<script>
$('#ePatient_16_cancel').attr('checked', 'true')
</script>
As i can see, you are new, have no knowledge about javascript, so this will be tough for you to understand. But try to understand just few things like in this script tag $('#ePatient_16_cancel').attr('checked', 'true') _ePatient_16_cancel_ is an id of radio button, id means your unique account number, that no one will have, find ids for other elemets too and put inside $('#') replace with element ID.
So the script will look like this
$('#ePatient_16_cancel').attr('checked', 'true')
open form in chrome browser and press F12 key, navigate to console tab and paste the script in console then press enter, this will select radio button for you
Given the following HTML:
<table class="cat_list">
<tr>
<td>
<input type="checkbox" name="filter_cat[1]" id="cat_1" value="1"/>
<label for="cat_1">Music</label>
</td>
<td>
<input type="checkbox" name="filter_cat[2]" id="cat_2" value="1"/>
<label for="cat_2">Applications</label>
</td>
<td>
<input type="checkbox" name="filter_cat[3]" id="cat_3" value="1"/>
<label for="cat_3">E-Books</label>
</td>
<td>
<input type="checkbox" name="filter_cat[4]" id="cat_4" value="1"/>
<label for="cat_4">Audiobooks</label>
</td>
<td>
<input type="checkbox" name="filter_cat[5]" id="cat_5" value="1"/>
<label for="cat_5">E-Learning Videos</label>
</td>
<td>
<input type="checkbox" name="filter_cat[6]" id="cat_6" value="1"/>
<label for="cat_6">Magazines</label>
</td>
<td>
<input type="checkbox" name="filter_cat[7]" id="cat_7" value="1"/>
<label for="cat_7">Comics</label>
</td>
</tr>
The following script should uncheck all checkboxes in the table row, then check the one specific one with id cat_1.
$(".cat_list input[type='checkbox']").attr("checked",false);
$("#cat_1").attr("checked",true);
In Greasemonkey, it checks the one box for a millisecond then just unchecks all boxes. The second command alone DOES check the cat_1 box when executed alone, but when you add the line above it, they all get unchecked after...
So, is Greasemonkey executing things incorrectly or what? it looks like it's running the script backwards or there's a timing issue, like it's starting the unchecks async then finishing the check before the uncheck can finish.
It may be that your script's jQuery and the page are conflicting. A simple #grant GM_addStyle may ix it. Post your complete script.
Otherwise, that jQuery code operates synchronously. The page's javascript is interfering with what you are trying to do, or something key was omitted from the question.
Possibly, your script is firing before the page is done setting itself up. Link to the actual target page if you can.
Analyze the page's javascript that acts on those inputs, and consider using the page's own JS to make the changes. The page may need/expect states to be set, not just checkboxes toggled.
Use the page's JS via script injection or via unsafeWindow.
Using a timer, like in psyjoniz's answer, might be sufficient. Might not. But, it's easy enough to try. I'd use a longer interval though:
$(".cat_list input[type='checkbox']").attr ("checked", false);
//-- Give the page's JS time to react and settle.
setTimeout ( function () { $("#cat_1").attr ("checked", true); }, 100);
Try this ..
setTimeout(function(){$("#cat_1").attr("checked",true);},0);
If it is a race condition of some kind this will put your command at the bottom of the stack.
Assume that, there are many checkboxes in any site and they are unchecked. Site works in any server. I have not site code. I want to make checked some of those checkboxes. To find checkboxes by value of <td> Can I do this with JavaScript? How can I run JavaScript code in that site code? My aim is to show checkboxes as "checked".
<tr>
<td id ="id1" name"name1">value1</td>
<td><input id="checkid1" name="checkname1" type="checkbox" value="false"></td>
</tr>
<tr>
<td id ="id2" name"name2">value2</td>
<td><input id="checkid2" name="checkname2" type="checkbox" value="false"></td>
</tr>
<tr>
<td id ="id3" name"name3">value3</td>
<td><input id="checkid3" name="checkname3" type="checkbox" value="false"></td>
</tr>
If it is possible, I want to enter, value1, value2 and JavaScript will make checked related checkboxes.
You can achieve this with JQuery.
Check if a checkbox is checked and than set checked true for the desired other checkboxes.
http://jquery-howto.blogspot.be/2008/12/how-to-check-if-checkbox-is-checked.html
To search by value you can do something like this:
$("input:checkbox[value=val]").attr("checked", true);
I am experiencing some unusual results with my jQuery and was hoping that somebody could enlighten me as to why. I am sure that jQuery is powerful enough to do this, so I wonder what I am doing wrong. Here is what I have (some seemingly simple and easy to understand code):
///////////reset default search entries/////////////
$("#sOrderByDLM").attr('checked', 'checked');
$("#sOrderByID").attr('checked', '');
$("#sOrderByPOIName").attr('checked', '');
$("#sOrderByAge").attr('checked', '');
$("#sOrderByOfficer").attr('checked', '');
$("#sOrderByDesc").attr('checked', 'checked');
$("#sOrderByAsc").attr('checked', '');
I have this inside a simple javaScript function that is called on the click of a non-submit type (normal) button. The problem is that when I click this, instead of it filling the sOrderByDLM radio button, it actually fills the sOrderByOfficer button and likewise with the bottom two jQuery statements (e.g., sOrderByAsc becomes 'checked' instead of sOrderByDesc) Am I not blatantly telling jQuery to reset the 'checked' attribute to that of the second argument, which is blank, except in the cases where I specifically set it to 'checked' for the fields I intend to be default?
I experienced a similar problem with checkboxes, but I found a work around by simply calling the same statements in reverse order, but that doesn't seem to work here, though. If I set 'checked="checked"' in razor everything is fine, but I need this button to work on the client side.
Anyway, if the HTML is necessary, I will provide it, but I doubt it is needed since the I have triple checked the ids to be sure.
Thanks for any help!
(And God Bless Stack Overflow, I don't know what I would do without you! :D)
UPDATE:
<tr>
<td class="orderlineupColor"><label for="sOrderByDLM">Date Last Modified</label><br/><input type="radio" id="sOrderByDLM" name="sOrderBy" style="margin-left: 115px;" value="OrderByDLM" #OrderByFiller[0] /></td>
<td class="orderlineupColor"><label for="sOrderByID">Entry ID</label><br/><input type="radio" id="sOrderByID" name="sOrderBy" style="margin-left: 115px;" value="OrderByID" #OrderByFiller[1] /></td>
<td class="orderlineupColor"><label for="sOrderByPOIName">POI Name</label><br/><input type="radio" id="sOrderByPOIName" name="sOrderBy" style="margin-left: 115px;" value="OrderByPOIName" #OrderByFiller[2] /></td>
<td class="orderlineupColor"><label for="sOrderByAge">Age</label><br/><input type="radio" id="sOrderByAge" name="sOrderBy" style="margin-left: 115px;" value="OrderByAge" #OrderByFiller[3] /></td>
<td class="orderlineupColor"><label for="sOrderByOfficer">Officer</label><br/><input type="radio" id="sOrderByOfficer" name="sOrderBy" style="margin-left: 115px;" value="OrderByOfficer" #OrderByFiller[4] /></td>
</tr>
<tr>
<td class="orderlineupColor2">In Descending Or<br/>Ascending Order:</td>
<td class="orderlineupColor2"><label for="sOrderByDesc">Descending Order</label><br/><input type="radio" id="sOrderByDesc" name="sAscOrDesc" style="margin-left: 115px;" value="OrderByDesc" #OrderByAscOrDescFiller[0] /></td>
<td class="orderlineupColor2"><label for="sOrderByAsc">Ascending Order</label><br/><input type="radio" id="sOrderByAsc" name="sAscOrDesc" style="margin-left: 115px;" value="OrderByAsc" #OrderByAscOrDescFiller[1] /></td>
<td class="orderlineupColor2"><button type="button" class="smallbtn" onclick="clearSortEntries()">Reset Sort Entries</button></td>
<td class="orderlineupColor2"></td>
</tr>
Try using bools and .prop()
$("#sOrderByDLM").prop('checked', true); // To check
$("#sOrderByID").prop('checked', false); // To Uncheck
To uncheck, try:
$("#sOrderByAsc").removeAttr('checked', '');
checked and selected are binary properties, not true/false attributes.
$("#sOrderByDLM").attr('checked', 'checked'); is correct.
So is: .attr('selected', 'selected');
If you want to used 'checked' and '' then use removeAttr jquery function instead of assigning '' blank to checked attribute but I do not prefer this one. As assigning true and false looks more symmetrical to me then assigning checked and removing attribute.
$("#sOrderByDLM").attr('checked', 'checked');
$("#sOrderByID").removeAttr('checked');
Use true or false instead of 'checked' and ''
$("#sOrderByDLM").attr('checked', true);
$("#sOrderByID").attr('checked', false);
there is a difference between .attr() and .prop()
http://api.jquery.com/prop/
http://api.jquery.com/attr/
I am working with a SharePoint site and I cannot change the HTML. What I am trying to do is to get which radio button is selected but they are wrapped in span's. If I go by title on the span and then .next() I get the next element after the span which is incorrect so how should I do this?
HTML:
<span dir="none"><table cellpadding="0" cellspacing="1">
<tr>
<td><span class="ms-RadioText" title="Tasmania"><input id="ctl00_m_g_f1c8ac33_8a36_42be_8901_5201d5b9eede_ctl00_ctl04_ctl02_ctl00_ctl00_ctl04_ctl00_ctl00" type="radio" name="ctl00$m$g_f1c8ac33_8a36_42be_8901_5201d5b9eede$ctl00$ctl04$ctl02$ctl00$ctl00$ctl04$ctl00$RadioButtons" value="ctl00" /><label for="ctl00_m_g_f1c8ac33_8a36_42be_8901_5201d5b9eede_ctl00_ctl04_ctl02_ctl00_ctl00_ctl04_ctl00_ctl00">Tasmania</label></span></td>
</tr><tr>
<td><span class="ms-RadioText" title="Greenland"><input id="ctl00_m_g_f1c8ac33_8a36_42be_8901_5201d5b9eede_ctl00_ctl04_ctl02_ctl00_ctl00_ctl04_ctl00_ctl01" type="radio" name="ctl00$m$g_f1c8ac33_8a36_42be_8901_5201d5b9eede$ctl00$ctl04$ctl02$ctl00$ctl00$ctl04$ctl00$RadioButtons" value="ctl01" /><label for="ctl00_m_g_f1c8ac33_8a36_42be_8901_5201d5b9eede_ctl00_ctl04_ctl02_ctl00_ctl00_ctl04_ctl00_ctl01">Greenland</label></span></td>
</tr><tr>
<td><span class="ms-RadioText" title="Hawaii"><input id="ctl00_m_g_f1c8ac33_8a36_42be_8901_5201d5b9eede_ctl00_ctl04_ctl02_ctl00_ctl00_ctl04_ctl00_ctl02" type="radio" name="ctl00$m$g_f1c8ac33_8a36_42be_8901_5201d5b9eede$ctl00$ctl04$ctl02$ctl00$ctl00$ctl04$ctl00$RadioButtons" value="ctl02" /><label for="ctl00_m_g_f1c8ac33_8a36_42be_8901_5201d5b9eede_ctl00_ctl04_ctl02_ctl00_ctl00_ctl04_ctl00_ctl02">Hawaii</label></span></td>
</tr>
</table></span>
I am trying to not use the name of the radio button group as this can change.
Thanks in advance.
$('span > input:radio:checked')
This will select all input elements, which are checked, and are direct child of span elements.
Demo
If you want the selected radio buttons:
$(".ms-RadioText input:radio:checked")
$(".ms-RadioText > input[type='radio']:checked").val();
Like this for example:
$("span.ms-RadioText input[type=radio]:checked") // returns list of all inputs that are children of spans.
$("span.ms-RadioText input[type='radio']:checked").value('this one is selected');