We Keep Coding

How do I check 1 checkbox or radial button as N/A and make all the items in the same table also get checked N/A automatically?

I have a simple table with 4 columns.
A row label and 1 column for PASS, FAIL AND N/A.
I have it so each row only allows 1 selection which seems to be working fine.
My header row only has N/A. I want it so if I check N/A in my header row all other rows below in the same table will also be marked N/A automatically.
I'm a novice to HTML and scripts FYI :(
Any help you can provide would be greatly appreciated!
This is what I tried.
<table>
<tr>
<TD><label>HEADING:</label> </td>
<TD><label></label></td>
<TD> </td>
<TD> </td>
<TD><label></label></td>
<TD> </td>
<TD><label>N/A</label></td>
<TD><input type="checkbox" name="HEADING1"id="is_HEADING1"/></td>
</tr>
<tr>
<TD><label>Q1:</label> </td>
<TD><label>PASS</label></td>
<TD><input type="radio" name="Q1" id="is_PASS" /></td>
<TD> </td>
<TD><label>FAIL</label></td>
<TD><input type="radio" name="Q1" id="is_FAIL" /></td>
<TD><label>N/A</label></td>
<TD><input type="radio" name="Q1" id="is_N/A" /></td>
</tr>
<tr>
<TD><label>Q2:</label> </td>
<TD><label>PASS</label></td>
<TD><input type="radio" name="Q2" id="is_PASS" /></td>
<TD> </td>
<TD><label>FAIL</label></td>
<TD><input type="radio" name="Q2" id="is_FAIL" /></td>
<TD><label>N/A</label></td>
<TD><input type="radio" name="Q2" id="is_N/A" /></td>
</tr>
</table>
<script>
function valueChanged() {
if (document.getElementByid("is_PASS").checked == true) {
document.getElementById("is_FAIL").value = 1;
document.getElementById("is_N/A").value = 0;
} else {
document.getElementById("is_PASS").value = 0;
document.getElementById("is_FAIL").value = 1;
document.getElementById("is_N/A").value = 1;
}
console.log(document.getElementById("is_PASS").value);
console.log(document.getElementById("is_FAIL").value)
console.log(document.getElementById("is_N/A").value)
}
<script>
function valueChanged() {
if (document.getElementByNameId("is_PASS").checked == true) {
document.getElementById("is_FAIL").value = 1;
document.getElementById("is_N/A").value = 0;
} else {
document.getElementById("is_PASS").value = 0;
document.getElementById("is_FAIL").value = 1;
document.getElementById("is_N/A").value = 1;
}
console.log(document.getElementById("is_PASS").value);
console.log(document.getElementById("is_FAIL").value)
console.log(document.getElementById("is_N/A").value)
}
</script>
I believe I need an if then else scenario that will state
if (document.getElementByid("is_HEADING1").checked == true) {
NAME "Q1" ID"N/A".VALUE = 0
NAME "Q2" ID"N/A".VALUE = 0
: } else {
:}
:<script>
I just don't know the correct syntax to reference an element Name and ID

Can I use "if else statement" inside row.add()?

Can I use if else statement inside row.add()?
My html code:
<table id="myTableSub">
<thead>
...
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="insert" id="insert" /></td>
<td><input type="checkbox" name="select" id="select"/></td>
<td><input type="checkbox" name="update" id="update"/></td>
<td><input type="checkbox" name="delete" id="delete"/></td>
</tr>
</tbody>
<tfoot>...</tfoot>
</table>
My js:
var tableSub = $('#myTableSub').DataTable();
...
if (data) {
$.each(data, function (i, tdData) {
var insert = tdData['INSERT'];
tableSub.row.add(
if (insert == 1)
document.getElementById("insert").checked = true,
tdData['SELECT'],
tdData['UPDATE'],
tdData['DELETE']]).draw().node();
});
} else {
....
}
I want if insert is equal to 1, checkbox will be checked.

Acting on the rows in a gridview based on a checkbox field

I have a GridView, where the first field is a checkbox. I want to take action client-side (show or hide rows) depending on the state of the checkboxes.
Thanks to my previous StOf posting, I have a RadioButtonList properly firing my Javascript. Now it's a matter of obtaining a reference to the appropriate rows.
I have relied on several questions and answers to build my current Javascript:
$(function () {
$("#RadioButtonList1 input[id^=Radio]").click(function () {
var grd = $("#my_gridview");
var rows = $("#my_gridview tr:gt(0)");
switch (this.value) {
case "All":
{
$("#my_gridview tr").show();
}
case "HideRequested":
{
var rowToShow = rows.find("td:eq(0)").filter(checked != "checked");
rows.show().not(rowToShow).hide();
}
case "ShowRequested":
{
var rowToShow = rows.find("td:eq(0)").filter(checked == "checked");
rows.show().not(rowToShow).hide();
}
}
})
});
But when I run this, I get an error in the JS console: ReferenceError: checked is not defined. Which is odd, because it works in the other questions, and the generated HTML (as confirmed in the console) includes the checked property in the input element. The HTML is:
<table cellspacing="0" cellpadding="2" id="gv_grid" style="border-color:Black;border-width:1px;border-style:None;width:100%;border-collapse:collapse;">
<tr class="grGridViewHeader" style="white-space:nowrap;">
<th align="center" scope="col" style="width:100px;white-space:nowrap;">Select Entry</th><th scope="col">Entry Name</th><th align="left" scope="col">Type</th><th align="left" scope="col">Details</th>
</tr><tr valign="top" style="background-color:#BED3FC;border-style:None;">
<td align="center" valign="middle" style="white-space:nowrap;">
<input id="gv_grid_chk_selected_0" type="checkbox" name="gv_grid$ctl02$chk_selected" checked="checked" />
</td><td>Entry 1</td><td style="font-size:Small;">Foo</td><td style="font-size:Small;">Assorted text.</td>
</tr><tr valign="top" style="background-color:White;border-style:None;">
<td align="center" valign="middle" style="white-space:nowrap;">
<input id="gv_grid_chk_selected_1" type="checkbox" name="gv_grid$ctl03$chk_selected" checked="checked" />
</td><td>Entry 2</td><td style="font-size:Small;">Bar</td><td style="font-size:Small;">Assorted text.</td>
</tr><tr valign="top" style="background-color:#BED3FC;border-style:None;">
<td align="center" valign="middle" style="white-space:nowrap;">
<input id="gv_grid_chk_selected_2" type="checkbox" name="gv_grid$ctl04$chk_selected" checked="checked" />
</td><td>Entry 3</td><td style="font-size:Small;">Baz</td><td style="font-size:Small;">Assorted text.<br /></td>
</tr>
</table>
I have also tried:
var checkboxArray = $('#my_gridview td input:checkbox');
Which did produce an array of the checkbox elements, but I still couldn't figure out how to correctly filter for the checked property nor how to get back to the governing tr element.
Sources:
https://stackoverflow.com/a/6013026/2615836
https://stackoverflow.com/a/6068768/2615836

Here you go... http://jsfiddle.net/tdyhq8z7/2/
$(function () {
$("#RadioButtonList1 :radio").click(function () {
var $rows = $("#gv_grid tr:gt(0)").show();
switch (this.value) {
case "HideRequested":
$rows.filter(function(){
return $('td:first>:checkbox',this).is(":checked")
}).hide();
break;
case "ShowRequested":
$rows.filter(function(){
return !$('td:first>:checkbox',this).is(":checked")
}).hide();
break;
}
})
});
//another solution:
$(function () {
$("#RadioButtonList1 :radio").click(function () {
var $rows = $("#gv_grid tr:gt(0)").show(), $val=this.value;
if(this.value != "All"){
$rows.filter(function(){
var $checked = $('td:first>:checkbox',this).is(":checked");
if($val == "HideRequested") return $checked;
else if($val == "ShowRequested") return !$checked;
}).hide();
}
})
});

OCR Web Validation using Javascript

I am a Computing teacher trying to stay one step ahead of my pupils whom are working on a assessment to with validating web forms using HTML and JavaScript. So far, I have managed to do the following but can no longer move forward:
<head>
<title>Exam entry</title>
<script language="javascript" type="text/javascript">
function validateForm() {
var result = true;
var msg="";
if (document.ExamEntry.name.value=="") {
msg+='You must enter your name';
document.ExamEntry.name.focus();
document.getElementById("name").style.color="#FF0000";
result = false;
}
if (document.ExamEntry.subject.value=="") {
msg+=' You must enter the subject';
document.ExamEntry.subject.focus();
document.getElementById("subject").style.color="#FF0000";
result = false;
}
if (document.ExamEntry.examnumber.value=="") {
msg+=' You must enter the examination number';
document.ExamEntry.examnumber.focus();
document.getElementById("examnumber").style.color="#FF0000";
result = false;
}
if(document.getElementById("examnumber").value.length!=4)
{
msg+='You must have exactly 4 digits in the examination number textbox';
document.ExamEntry.examnumber.focus();
document.getElementById("examnumber").style.color="#FF0000"
result = false;
}
function checkRadio() {
var user_input = "";
var len = document.ExamEntry.entry.length;
var i;
for (i=0;i< len;i++) {
if (document.ExamEntry.entry[i].length.checked) {
user_input = document.ExamEntry.entry[i].value;
break;
}
}
if (msg==""){
return result;
}
else
{
alert(msg);
return result;
}
}
function resetForm()
{
document.getElementById('ExamEntry').reset();
document.getElementById("name").style.color="#000000";
document.getElementById("subject").style.color="#000000";
document.getElementById("examnumber").style.color="#000000";
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name='ExamEntry' method='post' action='success.html'>
<table width='50%' border='0'>
<tr>
<td id='name'>Name</td>
<td><input type='text' name='name' /></td>
</tr>
<tr>
<td id='subject'>Subject</td>
<td><input type='text' name='subject' /></td>
</tr>
<tr>
<td id='examnumber'>Examination Number</td>
<td><input type='text' name='examnumber'></td>
</tr>
<tr>
<td id='entry'>Level of Entry</td>
<td><input type='radio' name='entry' value='gcse'>GCSE<BR></td>
<td><input type='radio' name='entry' value='as'>AS<BR></td>
<td><input type='radio' name='entry' value='a2'>A2<BR></td>
</tr>
<tr>
<td><input type='submit' name='Submit' value='Submit' onclick='return (validateForm());'></td>
<td><input type='reset' name='Reset' value='Reset' onclick=' (resetForm());'></td>
</tr>
</table>
</form>
</body>
What I want to do and what I am trying to do are two different things and it's now hit the point where I am banging my head against a brick wall.
What I WANT to do is be able to:
Extend the Javascript code to make sure that the user’s examination number is exactly 4 digits.
Add a set of radio buttons to the form to accept a level of entry such as GCSE, AS or A2. Write a function that displays the level of entry to the user in an alert box so that the level can be confirmed or rejected.
Can anyone help me before I totally lose the plot?

It's been a long time I have tried pure JS. It's a pleasure to try it out anytime though. So, someone's lukcy and I had some free time. I am a very tiny bit OCD when it comes to coding and I ended up cleaning a lot of your code, such as
Always enclose HTML attributes in double quotes - not a hard rule though.
Always close the input attributes - /> - not a hard rule though.
Define your elements and resue where needed in JS
Alwayst try and keep your JS separate from HTML - it's a good practice.
And follow the good old basics
As a result, here we go:
Demo: Fiddle
HTML:
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="#">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<tr>
<td id="examnumber">Examination Number</td>
<td><input type="text" name="examnumber" /></td>
</tr>
<tr>
<td id="entry">Level of Entry</td>
<td><input type="radio" name="entry" value="gcse" />GCSE<BR></td>
<td><input type="radio" name="entry" value="as" />AS<BR></td>
<td><input type="radio" name="entry" value="a2" />A2<BR></td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit" /></td>
<td><input type="reset" name="Reset" value="Reset" onclick="resetForm();"></td>
</tr>
</table>
</form>
JS:
var form = document.forms['ExamEntry'];
var iName = form.elements['name'];
var iSubject = form.elements['subject'];
var iExamNumber = form.elements['examnumber'];
var iLevel = form.elements['entry'];
function validateForm() {
var result = true;
var msg = "";
if (iName.value=="") {
msg+='You must enter your name';
iName.focus();
iName.style.color="#FF0000";
result = false;
} else if (iSubject.value=="") {
msg+=' You must enter the subject';
iSubject.focus();
iSubject.style.color="#FF0000";
result = false;
} else if (iExamNumber.value=="" || !/^\d{4}$/.test(iExamNumber.value)) {
msg+=' You must enter a valid examination number';
iExamNumber.focus();
iExamNumber.style.color="#FF0000";
result = false;
} else if(!checkEntry()) {
msg+=' You must select a level';
result = false;
} else {
var cfm = confirm("You have selected " + checkEntry() + ". Are you sure to punish yourself?");
if (!cfm) {
result = false;
}
}
if (!result && msg != "") alert (msg);
return result;
}
function checkEntry() {
for (var i=0; i<iLevel.length; i++) {
if (iLevel[i].checked) {
return iLevel[i].value.toUpperCase();
}
}
return false;
}
function resetForm() {
form.reset();
iName.style.color="#000000";
iSubject.style.color="#000000";
iExamNumber.style.color="#000000";
}
form.onsubmit = validateForm;
form.onreset = resetForm;

First you added the function checkRadio inside of function validateForm
Also, this line
if(document.getElementById("examnumber").value.length!=4)
actually points to this piece of html
<td id='examnumber'>Examination Number</td>
The td element can't hold values... You need to change the line to this:
if (document.ExamEntry.examnumber.value.length!=4) {
This jsfiddle should help you out...

textboxes are not displaying one by one on tabclick using jquery

Hi i want to show textboxes one by one on tab press.
First i need t display 1 textbox then after pressing tab 2nd textbox will display with focus .then 3rd and 4th with same process.
I am able to display textboxes but after 1st textbox when i press tab instead of textbox ,all textboxes are displaying.
Here is my code:
function showstep2() {
document.getElementById('step2').style.visibility = 'visible'
document.getElementById('newOrdQuan').focus();
}
function showstep3() {
document.getElementById('step3').style.visibility = 'visible';
document.getElementById('takeOutAmt').focus();
}
function showstep4() {
document.getElementById('step4').style.visibility = 'visible';
document.getElementById('compsPerWeek').focus();
}
<table style="width: 270px; border: 2px navy solid;">
<tbody>
<tr>
<td><form name="form1">
<table style="width: 100%;" align="left">
<tbody>
<tr>
<td>How many TakeOut Orders do You do each week?</td>
<td><input tabindex="1" type="text" name="prevOrdQuan" id="prevOrdQuan" size="6" value="7" onblur=" doCalc1(); showstep2();" /></td>
</tr>
</tbody>
</table>
<table id="step2" style="width: 100%; visibility: hidden;" align="left">
<tbody>
<tr>
<td>How many NEW TakeOut Orders do You expect each week? (15% Expected)</td>
<td><input tabindex="2" type="text" name="newOrdQuan" id="newOrdQuan" size="6" value="7" onblur="doCalc(); showstep3();" /></td>
</tr>
</tbody>
</table>
<table id="step3" style="width: 100%; visibility: hidden;" align="left">
<tbody>
<tr>
<td>How Much Is Your Average Takeout Order?</td>
<td>
<input tabindex="3" type="text" name="takeOutAmt" id="takeOutAmt" size="6" value="20" onblur="doCalc2(); showstep4();" /></td>
</tr>
</tbody>
</table>
<table id="step4" style="width: 100%; visibility: hidden;" align="left">
<tbody>
<tr>
<td>How Many Times a Week do You Comp an Order? (5% expected)</td>
<td><input tabindex="4" type="text" name="compsPerWeek" id="compsPerWeek" size="6" value="1" onblur="doCalc(); showstep5();" /></td>
</tr>
</tbody>
</table>

this might be what you are looking for.. http://jsbin.com/oBeritE/1
here's the code.. remove the onblur="" scripts.. jQuery can handle events..
// the next step to be shown
var nextStep = 2 ;
// first 2 blank to equal with nextStep..
var focusArr = ['', '' ,'newOrdQuan' , 'takeOutAmt', 'compsPerWeek','avgProfitPerOrder'];
// put your do functions inside the function() {} ..
var doFuncs = {
do1 : function() {
//alert('function 1') ;
} ,
do2 : function() {
//alert('put function 2 ' );
},
do3 : function() {
//alert('function 3 here' ) ;
},
do4 : function() {
//alert('function 4 here' ) ;
}
};
// storing functions in array..
// first two zeros to equal with nextStep..
var doArr= [0,0] ;
var i = 2 ;
for(var d in doFuncs ) {
doArr[i] = d ; i++ ;
}
// simple function to show steps..
function showStep(index) {
$('#step' + index).css('visibility','visible');
// focus next textbox ..
$('#' + focusArr[index]).focus() ;
// the apporipriate function will be called...
doFuncs[doArr[index]]() ;
}
$(document).ready(function() {
// put focus on first
$('#prevOrdQuan').focus();
// check for keypress
$('body').bind('keyup',
function(e){
// all you need is tab, right? so we call showStep whenever it is pressed..
if(e.keyCode === 9) {
showStep(nextStep) ;
nextStep++ ; }
// remove checking for keypress after all steps have finished
if(nextStep > 6) $('body').unbind('keyup') ;
});
});