Develop Reference

Remove 3 checkboxes from a table

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>

Send ajax request at table cell change

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")});

Javascript Web Crawler Confirm Confirmation box

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!

Javascript Form calculator

When I type values in the far right text boxes, then click "click to calculate" i want the values of all the text boxes to add up and display. I cannot figure it out. when i click the click to calculate button, it does nothing. not a thing!
<SCRIPT>
function add()
{
var a = document.getElementById("fscf_field4_8").value;
var b = document.getElementById("fscf_field4_10").value;
var c = document.getElementById("fscf_field4_12").value;
var d = document.getElementById("fscf_field4_14").value;
var e = document.getElementById("fscf_field4_16").value;
document.getElementById("fscf_field4_19").value =a+b+c+d+e;
}
</script>
<table>
<tr>
<td>
<div id="FSContact4" style="width:375px;">
<form action="/payment/#FSContact4" id="fscf_form4" method="post">
<input type="hidden" name="fscf_submitted" value="0">
<input type="hidden" name="fs_postonce_4" value="99193296484a8d52d2b9579199ca2f0c,1384214867">
<input type="hidden" name="si_contact_action" value="send">
<input type="hidden" name="form_id" value="4">
<div id="fscf_required4">
<span style="text-align:left;">*</span> <span style="text-align:left;">indicates required field</span>
</div>
<input type="hidden" name="mailto_id" value="1">
<div id="fscf_div_clear4_4" style="clear:both;">
<div id="fscf_div_field4_4" style="clear:left; float:left; width:99%; max-width:550px; margin-right:10px;">
<div id="fscf_label4_4" style="text-align:left; padding-top:5px;">
<label style="text-align:left;" for="fscf_field4_4">Company Name<span style="text-align:left;">*</span></label>
</div>
<div style="text-align:left;">
<input style="text-align:left; margin:0;" type="text" id="fscf_field4_4" name="company-name" value="">
</div>
</div>
</div>
<div id="fscf_div_clear4_5" style="clear:both;">
<div id="fscf_div_field4_5" style="clear:left; float:left; width:99%; max-width:550px; margin-right:10px;">
<div id="fscf_label4_5" style="text-align:left; padding-top:5px;">
<label style="text-align:left;" for="fscf_field4_5">Person Doing the Transaction<span style="text-align:left;">*</span></label>
</div>
<div style="text-align:left;">
<input style="text-align:left; margin:0;" type="text" id="fscf_field4_5" name="person-doing-the-transaction" value="">
</div>
</div>
</div>
<div id="fscf_div_clear4_6" style="clear:both;">
<div id="fscf_div_field4_6" style="clear:left; float:left; width:99%; max-width:550px; margin-right:10px;">
<div id="fscf_label4_6" style="text-align:left; padding-top:5px;">
<label style="text-align:left;" for="fscf_field4_6">email<span style="text-align:left;">*</span></label>
</div>
<div style="text-align:left;">
<input style="text-align:left; margin:0;" type="text" id="fscf_field4_6" name="email01" value="">
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<table border="1" bordercolor="#FFCC00" style="background-color:#FFFFCC" width="100%" cellpadding="3" cellspacing="3">
<tr>
<td>Invoice Number</td>
<td>Amount (USD)</td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_7 name="Invoice Number 1"></td>
<td><input type="text" id="fscf_field4_8 name="Amount 1"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_9 name="Invoice Number 2"></td>
<td><input type="text" id="fscf_field4_10 name="Amount 2"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_11 name="Invoice Number 3"></td>
<td><input type="text" id="fscf_field4_12 name="Amount 3"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_13 name="Invoice Number 4"></td>
<td><input type="text" id="fscf_field4_14 name="Amount 4"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_15 name="Invoice Number 5"></td>
<td><input type="text" id="fscf_field4_16 name="Amount 5"></td>
</tr>
<tr>
<td><input type="button" id="click" value="Click to Calculate" onclick="add();"></td>
<td><input type="text" id="fscf_field4_19"></td>
</tr>
</table>
<div id="fscf_submit_div4" style="text-align:left; padding-top:2px;">
<input type="submit" id="fscf_submit4" style="cursor:pointer; margin:0;" value="Submit">
</div>
</form>
</div>
</tr>
</td>
</table>

You are not closing the id value of your table properly.
Error:<input type="text" id="fscf_field4_7 name="Invoice Number 1">
There is no closing Quotes for id value(fscf_field4_7)
above. try to close id value if all TextBox's properly.
Replace your table with following:
<table border="1" bordercolor="#FFCC00" style="background-color:#FFFFCC" width="100%" cellpadding="3" cellspacing="3">
<tr>
<td>Invoice Number</td>
<td>Amount (USD)</td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_7" name="Invoice Number 1"/></td>
<td><input type="text" id="fscf_field4_8" name="Amount 1"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_9" name="Invoice Number 2"></td>
<td><input type="text" id="fscf_field4_10" name="Amount 2"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_11" name="Invoice Number 3"></td>
<td><input type="text" id="fscf_field4_12" name="Amount 3"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_13" name="Invoice Number 4"></td>
<td><input type="text" id="fscf_field4_14" name="Amount 4"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_15" name="Invoice Number 5"></td>
<td><input type="text" id="fscf_field4_16" name="Amount 5"></td>
</tr>
<tr>
<td><input type="button" id="click" value="Click to Calculate" onclick="add()"></td>
<td><input type="text" id="fscf_field4_19"></td>
</tr>
</table>

To start with, you forgot to close the quotation marks of all the IDs of inputs. Try doing it.
i.e.
<input type="text" id="fscf_field4_8 name="Amount 1">
needs to be:
<input type="text" id="fscf_field4_8" name="Amount 1">
Also you need to add parseInt() when you parsing string's int value. below i put the new code snippet
Confirmation: Just tried your code with proper quotation marks and intParse(),it works
Your final code for integer parse:
<SCRIPT>
function add()
{
var a = parseInt(document.getElementById("fscf_field4_8").value);
var b = parseInt(document.getElementById("fscf_field4_10").value);
var c = parseInt(document.getElementById("fscf_field4_12").value);
var d = parseInt(document.getElementById("fscf_field4_14").value);
var e = parseInt(document.getElementById("fscf_field4_16").value);
document.getElementById("fscf_field4_19").value =a+b+c+d+e;
}
</script>

Please check this working sample http://jsfiddle.net/6AYFg/
Properly close all your tags and attributes first
parse values from all elements to int
<td><input type="text" id="fscf_field4_7 name="Invoice Number 1"></td>
function add()
{
var a = document.getElementById("fscf_field4_8").value;
var b = document.getElementById("fscf_field4_10").value;
var c = document.getElementById("fscf_field4_12").value;
var d = document.getElementById("fscf_field4_14").value;
var e = document.getElementById("fscf_field4_16").value;
document.getElementById("fscf_field4_19").value =a+b+c+d+e;
}

Html Quote calculations - javascript

I am trying to calculate my html form values.
I have tried the following javascript calculation, but it is not calculating a value into my total field ('total1'). Is there perhaps a problem with the javascript or am I not referencing the form correctly?
<form action="" method="get" id="quote">
<table width="532" border="1" cellspacing="1" cellpadding="0.5">
<tr>
<th width="109" scope="col"><div align="center">Date</div></th>
<th width="158" scope="col"><div align="center">Half day</div></th>
<th width="112"><div align="center">Full day</div></th>
<th width="134"><div align="center">Total for the day</div></th>
</tr>
<tr>
<td><div align="center">
<input name="date1" type="text" size="15" />
</div></td>
<td><div align="center">
<input name="halfday1" type="text" size="15" maxlength="10" />
</div></td>
<td><div align="center">
<input name="fullday1" type="text" size="15" />
</div></td>
<td><div align="center">
<input name="total1" type="text" size="15" />
</div></td>
</tr>
<tr>
<td><div align="center">
<input name="date2" type="text" size="15" />
</div></td>
<td><div align="center">
<input name="halfday2" type="text" size="15" />
</div></td>
<td><div align="center">
<input name="fullday2" type="text" size="15" />
</div></td>
<td><div align="center">
<input name="total2" type="text" size="15" />
</div></td>
</tr>
<tr>
<td><div align="center">
<input name="date3" type="text" size="15" />
</div></td>
<td><div align="center">
<input name="halfday3" type="text" size="15" />
</div></td>
<td><div align="center">
<input name="fullday3" type="text" size="15" />
</div></td>
<td><div align="center">
<input name="total3" type="text" size="15" />
</div></td>
</tr>
<tr>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
</tr>
</table>
</form>
function doTotal(quote) {
var a = (form.halfday1.value != '') ? eval(form.halfday1.value) : 0;
var b = (form.fullday1.value != '') ? eval(form.fullday1.value) : 0;
form.total1.value = a + b + c + d + e;
}
http://jsfiddle.net/ZR5LD/

http://jsfiddle.net/ZR5LD/2/
function doTotal(form) {
var a = (+form.halfday1.value);
var b = (+form.fullday1.value);
form.total1.value = a + b ;
}
document.getElementById("quote").onclick = function (){doTotal(this)};
I don't know what c,d,e were, but form was not defined, I assume you meant the form "quote".
also I added the call to doTotal in the onclick property of the form