How can I make a server request when the contect of a table cell is changed?
i.e. on a table like this:
<form class="formclass">
<table border="1" style="float:left">
<tr>
<td><input type="text" name="country" value="USA" readonly/></td>
<td>
<input type="radio" name="enabled" value="1" checked>enabled
<input type="radio" name="enabled" value="0">disable
</td>
</tr>
<tr>
<td><input type="text" name="country" value="England" readonly/></td>
<td>
<input type="radio" name="enabled" value="1" checked>enabled
<input type="radio" name="enabled" value="0">disable
</td>
</tr>
<tr>
<td><input type="text" name="country" value="Sweden" readonly/></td>
<td>
<input type="radio" name="enabled" value="1" checked>enabled
<input type="radio" name="enabled" value="0">disable
</td>
</tr>
</table>
</form>
I tried adding an onchange function
$('.formclass').change(function() {console.log("succes")});
but this only works when every row is it's own form.
<form class="formclass">
<table border="1" style="float:left">
<tr>
<td><input type="text" name="country" value="USA" readonly/></td>
<td>
<input type="radio" name="enabled" value="1" checked>enabled
<input type="radio" name="enabled" value="0">disable
</td>
</tr>
</table>
</form>
<form class="formclass">
<table border="1" style="float:left">
<tr>
<td><input type="text" name="country" value="Englang" readonly/></td>
<td>
<input type="radio" name="enabled" value="1" checked>enabled
<input type="radio" name="enabled" value="0">disable
</td>
</tr>
</table>
</form>
<form class="formclass">
<table border="1" style="float:left">
<tr>
<td><input type="text" name="country" value="Sweden" readonly/></td>
<td>
<input type="radio" name="enabled" value="1" checked>enabled
<input type="radio" name="enabled" value="0">disable
</td>
</tr>
</table>
</form>
However this makes the styling really bad.
I just want a table where if on cell is changed it makes a server request with the data of that row. So here the country and radio button value if someone changes the the radio button.
Attach it to inputs instead of form
$('input[type=radio]').change(function() {console.log("succes")});
Related
I created a table with some checkboxes and I want to create a JavaScript that remove the ones I don't want there but I'm stuck in the JavaScript part. Could you please help me in this small challenge? Thanks!
<table class="isTable">
<tbody>
<tr>
<td>
<input id="firstCheckBox" type="checkbox" name="number1" value="All">
<label for="firstCheckBox">All</label>
</td>
</tr>
<tr>
<td>
<input id="secondCheckBox" type="checkbox" name="number2" value="Some text">
<label for="secondCheckBox">Some text</label>
</td>
</tr>
<tr>
<td>
<input id="thirdCheckBox" type="checkbox" name="number3" value="1st to be removed">
<label for="thirdCheckBox">1st to be removed</label>
</td>
</tr>
<tr>
<td>
<input id="fourthCheckBox" type="checkbox" name="number4" value="Some other text">
<label for="fourthCheckBox">Some other text</label>
</td>
<tr>
<td>
<input id="fifthCheckBox" type="checkbox" name="number5" value="2nd to be removed">
<label for="">2nd to be removed</label>
</td>
<tr>
<td>
<input id="fifthCheckBox" type="checkbox" name="number6" value="Some other text again">
<label for="">Some other text again</label>
</td>
<tr>
<td>
<input id="sixthCheckBox" type="checkbox" name="number7" value="3rd to be removed">
<label for="">3rd to be removed</label>
</td>
</tr>
</tbody>
</table>
The JS part done so far, but the way I tried to removed the tr doesn't work
let findTableOfCheckBoxes = document.getElementsByClassName('.isTable');
for (let i = 0; i < findTableOfCheckBoxes.length; i++) {
let selectTr = document.getElementsByTagName("tr")[2];
selectTr.parentNode.removeChild(selectTr);
}
You're committing the cardinal sin of assuming your selector is finding elements. It's not, because you need isTable not .isTable when using getElementsByClassName() which, since it's about classes, assumes the . for you.
There's also a more modern, cleaner way to achieve what you need. Follows:
document.querySelectorAll('.isTable').forEach(tbl => {
let row = tbl.querySelector('tr:nth-child(3)');
row && row.remove();
});
You added "." character for the getElementsByClassName. Just remove it.
let findTableOfCheckBoxes = document.getElementsByClassName('isTable');
let findTableOfCheckBoxes = document.getElementsByClassName('isTable');
for (let i = 0; i < findTableOfCheckBoxes.length; i++) {
let selectTr = document.getElementsByTagName("tr")[2];
selectTr.parentNode.removeChild(selectTr);
}
<table class="isTable">
<tbody>
<tr>
<td>
<input id="firstCheckBox" type="checkbox" name="number1" value="All">
<label for="firstCheckBox">All</label>
</td>
</tr>
<tr>
<td>
<input id="secondCheckBox" type="checkbox" name="number2" value="Some text">
<label for="secondCheckBox">Some text</label>
</td>
</tr>
<tr>
<td>
<input id="thirdCheckBox" type="checkbox" name="number3" value="1st to be removed">
<label for="thirdCheckBox">1st to be removed</label>
</td>
</tr>
<tr>
<td>
<input id="fourthCheckBox" type="checkbox" name="number4" value="Some other text">
<label for="fourthCheckBox">Some other text</label>
</td>
<tr>
<td>
<input id="fifthCheckBox" type="checkbox" name="number5" value="2nd to be removed">
<label for="">2nd to be removed</label>
</td>
<tr>
<td>
<input id="fifthCheckBox" type="checkbox" name="number6" value="Some other text again">
<label for="">Some other text again</label>
</td>
<tr>
<td>
<input id="sixthCheckBox" type="checkbox" name="number7" value="3rd to be removed">
<label for="">3rd to be removed</label>
</td>
</tr>
</tbody>
</table>
**UPDATED 3/25/20 11:20 est **
The issue I am having now is the code is not using num3 as intended. It is set up like the rest of the code in the HTML and script. This is the set up of my form:
<form name = "arrowCalc">
<table>
<caption>Weight Calculator</caption>
<tr>
<td><label>Draw Length:</label></td>
<td><input type="text" name="txtDraw"></td>
</tr>
<tr>
<td><label>Spine:</label></td>
<td>
<input type="radio" id="spine400" name="spineType" value="8.9"><label>400 Spine</label><br>
<input type="radio" id="spine350" name="spineType" value="9.8"><label>350 Spine</label><br>
<input type="radio" id="spine300" name="spineType" value="11.2"><label>300 Spine</label><br>
<input type="radio" id="spine250" name="spineType" value="12.5"><label>250 Spine</label>
</td>
</tr>
<tr>
<td><label>Nock Weight:</label></td>
</td>
<td>
<input type="radio" id="standardNock" name="nocType" checked="checked" value="6"><label>Standard</label><br>
<input type="radio" id="nockTurnal" name="nocType" value="21"><label>Nockturnal</label><br>
</td>
</tr>
<tr>
<td><label>Insert Weight:</label></td>
<td><input type="text" name="txtInsert"></td>
</tr>
<tr>
<td><label>Broadhead Weight:</label></td>
<td><input type="text" name="txtBroad"></td>
</tr>
<tr>
<td><label>Vane Weight:</label></td>
<td>
<input type="radio" id="vaneR" name="vaneType" value="6" ><label>Rapt-X</label><br>
<input type="radio" id="vaneD" name="vaneType" value="8"><label>DVX 8</label><br>
<input type="radio" id="vaneF2" name="vaneType" value="7"><label>Fusion 2.1</label><br>
<input type="radio" id="vaneF3" name="vaneType" value="7.5"><label>Fusion 3.0</label>
</td>
</tr>
<tr>
<td><label>Number of Vanes:</label></td>
<td>
<input type="radio" id="vanes3" name="vaneNumber" value="3"><label>3</label><br>
<input type="radio" id="vanes4" name="vaneNumber" value="4"><label>4</label><br>
</td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Calculate" onClick="weightFormula()" align="right"></td>
</tr>
<tr>
<td><label>Weight:</label></td>
<td><input type="text" name="txtRes"></td>
</tr>
</table>
This is my function:
function weightFormula() {
var num1, num2, num3, num4, num5, num6, num7, res;
num1=Number(document.arrowCalc.txtDraw.value)-.5;
num2=document.querySelector('input[name=spineType]:checked').value;
num3=document.querySelector('input[name=nocType]:checked').value;
num4=Number(document.arrowCalc.txtInsert.value);
num5=Number(document.arrowCalc.txtBroad.value);
num6=document.querySelector('input[name=vaneType]:checked').value;
num7=document.querySelector('input[name=vaneNumber]:checked').value;
res=(num1*num2)+num4+num5+(num6*num7)+10+num3;
document.arrowCalc.txtRes.value=res;
}
With the exception as num3, all other variables are working as expected. If I would make num3 a text input or a dropdown box, the code also works as expected. Currently num3 will just add the value to the end of the total number. For instance if I am expecting an answer of 775.25 and I select the Standard nock (value of 6) the answer would be 769.256. The same thing happens when I move num3 to other spots in the res= line, it will just place the values at the end of the decimal.
The numbers I have been using for this are:
Draw Length (num1) = 29
Spine (num2) = 12.5 (spine250)
Nock (num3) = 6 (standard)
Insert (num4) = 175
Broadhead (num5) = 200
Vane type (num6) = 7 (Fusion 2.1)
Vane number (num7) = 4
As previously stated, this should equal 775.25
Try using eval()
function weightFormula() {
var num1, num2, num3, num4, num5, num6, num7, res;
num1=document.arrowCalc.txtDraw.value-.5+"";
num2=document.querySelector('input[name=spineType]:checked').value;
num3=document.querySelector('input[name=nocType]:checked').value; /*This is part of the issue*/
num4=document.arrowCalc.txtInsert.value;
num5=document.arrowCalc.txtBroad.value;
num6=document.querySelector('input[name=vaneType]:checked').value;
num7=document.querySelector('input[name=vaneNumber]:checked').value;
debugger;
res=eval(`${num1}*${num2}+${num4}+${num5}+(${num6}*${num7})+10+${num3}`);
document.arrowCalc.txtRes.value=res;
}
function weightFormula() {
var num1, num2, num3, num4, num5, num6, num7, res;
num1=document.arrowCalc.txtDraw.value-.5+"";
num2=document.querySelector('input[name=spineType]:checked').value;
num3=document.querySelector('input[name=nocType]:checked').value; /*This is part of the issue*/
num4=document.arrowCalc.txtInsert.value;
num5=document.arrowCalc.txtBroad.value;
num6=document.querySelector('input[name=vaneType]:checked').value;
num7=document.querySelector('input[name=vaneNumber]:checked').value;
debugger;
res=eval(`${num1}*${num2}+${num4}+${num5}+(${num6}*${num7})+10+${num3}`);
document.arrowCalc.txtRes.value=res;
}
<form name = "arrowCalc">
<table>
<caption>Weight Calculator</caption>
<tr>
<td><label>Draw Length:</label></td>
<td><input type="text" name="txtDraw"></td>
</tr>
<tr>
<td><label>Spine:</label></td>
<td>
<input type="radio" id="spine400" name="spineType" value="8.9"><label>400 Spine</label><br>
<input type="radio" id="spine350" name="spineType" value="9.8"><label>350 Spine</label><br>
<input type="radio" id="spine300" name="spineType" value="11.2"><label>300 Spine</label><br>
<input type="radio" id="spine250" name="spineType" value="12.5"><label>250 Spine</label>
</td>
</tr>
<tr>
<td><label>Nock Weight:</label></td>
<td>
<input type="radio" id="standardNock" name="nocType" checked="checked" value="6"><label>Standard</label><br>
<input type="radio" id="nockTurnal" name="nocType" value="21"><label>Nockturnal</label><br>
</td>
</tr>
<tr>
<td><label>Insert Weight:</label></td>
<td><input type="text" name="txtInsert"></td>
</tr>
<tr>
<td><label>Broadhead Weight:</label></td>
<td><input type="text" name="txtBroad"></td>
</tr>
<tr>
<td><label>Vane Weight:</label></td>
<td>
<input type="radio" id="vaneR" name="vaneType" value="6" ><label>Rapt-X</label><br>
<input type="radio" id="vaneD" name="vaneType" value="8"><label>DVX 8</label><br>
<input type="radio" id="vaneF2" name="vaneType" value="7"><label>Fusion 2.1</label><br>
<input type="radio" id="vaneF3" name="vaneType" value="7.5"><label>Fusion 3.0</label>
</td>
</tr>
<tr>
<td><label>Number of Vanes:</label></td>
<td>
<input type="radio" id="vanes3" name="vaneNumber" value="3"><label>3</label><br>
<input type="radio" id="vanes4" name="vaneNumber" value="4"><label>4</label><br>
</td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Calculate" onClick="weightFormula()" align="right"></td>
</tr>
<tr>
<td><label>Weight:</label></td>
<td><input type="text" name="txtRes"></td>
</tr>
</table>
</form>
I am creating a landing page with a form. I want to set up where every 10th person who signed up links to a "special" page where they receive a prize. For example: first 9 people will redirect to thankyou.html page where the 10th person will link to prize.html page. Is this possible? Thank you in advance.
<form method="post" enctype="multipart/form-data" action="http://form.relevanttools.com/rt-cgi-bin/satellite">
<input type="hidden" name="code" value="12531"> <input type="hidden" name="db" value="project"> <input type="hidden" name="source" value="Prize"> <input type="hidden" name="optin" value=""> <input type="hidden" name="type" value="signup"> <input type="hidden" name="user_email_msg" value=""> <input type="hidden" name="admin_email_addr" value=""> <input type="hidden" name="redir" value="http://www.link.com/thankyou.html">
<table border="0">
<tr>
<td> </td>
<td>First Name*</td>
<td> </td>
<td> <input type="text" id="first_name" name="first_name*" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Last Name*</td>
<td> </td>
<td> <input type="text" id="last_name" name="last_name*" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Email*</td>
<td> </td>
<td> <input type="text" id="email" name="email*" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Age*</td>
<td> </td>
<td> <input type="text" id="age" name="age*" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Gender</td>
<td> </td>
<td>
<div class="align-left"> <input type="radio" name="gender" value="Male">Male<br> <input type="radio" name="gender" value="Female">Female<br> </div>
</td>
</tr>
<tr>
<td> </td>
<td>Zip</td>
<td> </td>
<td> <input type="text" id="zip" name="zip" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Private Policy*</td>
<td> </td>
<td> <input type="checkbox" id="private_policy" name="private_policy" value="x"> </td>
</tr>
<tr>
<td> </td>
<td>Email Subscription</td>
<td> </td>
<td> <input type="checkbox" id="email_opt_in" name="email_opt_in" value="x"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><input type="submit" value = "Submit" ></td>
</tr>
</table>
</form>
You could give the button a 10% probability of redirecting to the prize page - but that's the best without a server.
Javascript is client side. Meaning it has no way of knowing how other people have acted. The only way to know that is storing every click in a database and counting that.
I am trying to confirm a confirmation box in Javascript for a school project. The confirmation box comes up asking if you want to submit, and I would like to submit programmatically. Here is the HTML for the form:
<form action="https://weekend.lps.wels.net/lpswp/index.php" method="post" id="form_wp_entry" onsubmit="return lpswp_confirm_submission('3,4','Friday,Saturday','Sunday')" style="display: inline;">
<table class="em_table" width="100%" style="margin-bottom: 5px;">
<tbody><tr>
<th align="left" id="lpswp_night_label_title_3">
Friday
</th>
</tr>
<tr>
<td>
Location: <input type="radio" name="lpswp_nights[3][location]" id="lpswp_nights_location_dorm_3" value="dorm" checked="checked" onclick="lpswp_toggle_location(3)"> <label for="lpswp_nights_location_dorm_3">Dorm</label> |
<input type="radio" name="lpswp_nights[3][location]" id="lpswp_nights_location_home_3" value="home" onclick="lpswp_toggle_location(3)"> <label for="lpswp_nights_location_home_3">Home</label><br>
<input type="radio" name="lpswp_nights[3][location]" id="lpswp_nights_location_other_3" value="other" onclick="lpswp_toggle_location(3)"> <label for="lpswp_nights_location_other_3" id="lpswp_night_label_text_3">Other</label>:
<input type="text" size="60" name="lpswp_nights[3][other]" id="lpswp_nights_other_3"><br>
Phone Number (if known): <input type="text" size="20" name="lpswp_nights[3][phone]" id="lpswp_nights_phone_3"> (999-999-9999)
</td>
</tr>
<tr>
<th align="left" id="lpswp_night_label_title_4">
Saturday
</th>
</tr>
<tr>
<td>
<input type="checkbox" name="lpswp_nights[4][same]" id="lpswp_nights_same_4" value="1" checked="checked" onclick="lpswp_toggle_same(4)"> <label for="lpswp_nights_same_%temp_night%">Same as Friday night.</label><br>
Location: <input disabled="disabled" type="radio" name="lpswp_nights[4][location]" id="lpswp_nights_location_dorm_4" value="dorm" checked="checked" onclick="lpswp_toggle_location(4)"> <label for="lpswp_nights_location_dorm_4">Dorm</label> |
<input disabled="disabled" type="radio" name="lpswp_nights[4][location]" id="lpswp_nights_location_home_4" value="home" onclick="lpswp_toggle_location(4)"> <label for="lpswp_nights_location_home_4">Home</label><br>
<input disabled="disabled" type="radio" name="lpswp_nights[4][location]" id="lpswp_nights_location_other_4" value="other" onclick="lpswp_toggle_location(4)"> <label for="lpswp_nights_location_other_4" id="lpswp_night_label_text_4">Other</label>:
<input disabled="disabled" type="text" size="60" name="lpswp_nights[4][other]" id="lpswp_nights_other_4"><br>
Phone Number (if known): <input disabled="disabled" type="text" size="20" name="lpswp_nights[4][phone]" id="lpswp_nights_phone_4"> (999-999-9999)
</td>
</tr>
<tr>
<th align="left" id="lpswp_final_dinner_label_title">
Sunday Dinner
</th>
</tr>
<tr>
<td id="lpswp_final_dinner_label_text" style="border: 0px;">
I WILL be eating in the cafeteria: <input type="radio" name="lpswp_final_dinner" id="lpswp_final_dinner_1" value="1"><br>
I will NOT be eating in the cafeteria: <input type="radio" name="lpswp_final_dinner" id="lpswp_final_dinner_0" value="0"><br>
<input type="hidden" name="lpswp_final_dinner_night" value="5">
</td>
</tr>
</tbody></table>
<input type="submit" value="Submit Weekend Plans">
<!--input type="reset" value="Cancel" /-->
</form>
Here is my current code that does not do anything to the confirmation box:
mWebView.loadUrl("javascript:(function(){" +
"document.getElementById('form_wp_entry').setAttribute('onsubmit','return true;');" +
";})()");
Please help me, I am new to javascript... and coding in general.
You're looking for .submit().Note that this won't trigger any functionality that's hooked up to the onsubmit of the form:
function output() {
console.log('Submitted');
return false;
}
// Forcibly submit the form
function customSubmit() {
document.getElementsByTagName('form')[0].submit();
}
<form name="a_form" onsubmit="return output()">
<button type="submit">Submit</button>
</form>
<br />
<button onclick="customSubmit()">Submit Programmatically</button>
Hope this helps!
Goal: I need to auto-calculate a "subtotal" field based off clicking a yes/no radio button.
There are two issues I am having
Being able to initiate the "recalc" function based off clicking the yes/no radio button
Being able to elimate relying on the "Unplug" column, which I would like to get rid of.
The 'Yes/No' values are '1/0' respectively. The formula is (Watts on Standby * (1 or 0)).
Test example: http://www.ppleasysavings.com/testsurvey/
Here is the HTML
<form method="post" action="" id="surveyForm">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<thead>
<th><div align="center">Home Appliance</div></th>
<th><div align="center">Test device?</div></th>
<th><div align="center">Watts on Standby</div></th>
<th><div align="center">Unplug when not used?</div></th>
<th><div align="center">Unplug</div></th>
<th><div align="center">Watts Saved!</div></th>
</thead>
<tr>
<td>50" Plasma TV (191-474 watts)</td>
<div class="option-group">
<td><div align="center">Yes
<input name="didTest1" type="radio" value="1" checked/>
No
<input name="didTest1" type="radio" value="0" />
</div></td>
<td><div align="center">
<input name="standbyWatts1" id="standbyWatts1" value="0.75" size="7" maxlength="8" type="text" style="text-align:center;" class="required"/>
</div></td>
</div>
<td><div align="center">Yes
<input name="didUnplug1" id="didUnplug1" type="radio" value="1" checked/>
No
<input name="didUnplug1" id="didUnplug1" type="radio" value="0" />
</div></td>
<td id="unplug_item_1"> 1 </td>
<td><div align="center">
<input name="wattsSaved1" id="wattsSaved1" value="0.75" size="7" type="text" style="text-align:center;" readonly="readonly" />
</div></td>
</tr>
<tr>
<td>Microwave Oven (1440 watts)</td>
<div class="option-group">
<td><div align="center"> Yes
<input name="didTest2" type="radio" value="1" checked/>
No
<input name="didTest2" type="radio" value="0" />
</div></td>
<td><div align="center">
<input name="standbyWatts2" id="standbyWatts2" value="20.00" size="7" maxlength="8" type="text" style="text-align:center;" class="required"/>
</div></td>
</div>
<td><div align="center">Yes
<input name="didUnplug2" id="didUnplug2" type="radio" value="1" />
No
<input name="didUnplug2" id="didUnplug2" type="radio" value="0" checked/>
</div></td>
<td id="unplug_item_2"> 0 </td>
<td><div align="center">
<input name="wattsSaved2" id="wattsSaved2" value="0.00" size="7" type="text" style="text-align:center;" readonly="readonly" />
</div></td>
</tr>
<tr>
<td>Computer (250-400 watts)</td>
<div class="option-group">
<td><div align="center"> Yes
<input name="didTest3" type="radio" value="1" checked/>
No
<input name="didTest3" type="radio" value="0" />
</div></td>
<td><div align="center">
<input name="standbyWatts3" id="standbyWatts3" value="9.00" size="7" maxlength="8" type="text" style="text-align:center;" class="required"/>
</div></td>
</div>
<td><div align="center"> Yes
<input name="didUnplug3" id="didUnplug3" type="radio" value="1" checked/>
No
<input name="didUnplug3" id="didUnplug3" type="radio" value="0" />
</div></td>
<td id="unplug_item_3"> 1 </td>
<td><div align="center">
<input name="wattsSaved3" id="wattsSaved3" value="9.00" size="7" type="text" style="text-align:center;" readonly="readonly" />
</div></td>
</tr>
<tfoot>
<td colspan="5" align="right"><div align="right"><b>Total Watts Saved!</b></div></td>
<td><div align="center">
<input type="text" readonly="readonly" maxlength="8" size="7" value="9.75" id="grandTotal" name="grandTotal">
</div></td>
</tfoot>
</table>
<div align="right">
<input name="reset" type="reset" value="Reset" />
<input type="submit" name="scodeEntry" class="button" value="Submit Results" onclick="return submitSurvey();"/>
</div>
</form>
Here is the jQuery
//Auto calculation
var bIsFirebugReady = (!!window.console && !!window.console.log);
$(document).ready(
function (){
// bind the recalc function to the quantity fields
$("input[name^=standbyWatts]").bind("keyup", recalc);
$("input[name^=didUnplug]").bind("click", recalc);
// run the calculation function now
recalc();
}
);
// used for the survey page
function recalc(){
$("[id^=wattsSaved]").calc(
// the equation to use for the calculation
"sbw * unplug",
// define the variables used in the equation, these can be a jQuery object
{
sbw: $("input[name^=standbyWatts]"),
unplug: $("[id^=unplug_item_]")
},
// define the formatting callback, the results of the calculation are passed to this function
function (s){
// return the number as a integer
return s.toFixed(2);
},
// define the finish callback, this runs after the calculation has been complete
function ($this){
// sum the total of the $("[id^=total_item]") selector
var sum = $this.sum();
$("#grandTotal").val(
// round the results to 0 digits
sum.toFixed(2)
);
}
);
Some browsers won't like the extra comma here:
unplug: $("[id^=unplug_item_]"),
Otherwise, I'm seeing the calc function fire when the checkbox selection changes.
As far as removing the unplug column, you can get the value of the selected checkbox using something similar to your bind query:
$("input[name^=didUnplug]:checked")