Develop Reference

Javascript - Not Reversing the show/hide

I have created a fiddle
Would like to have the user hit 'yes' and it show the # field and then hit 'no' to hide it. Do I need another function on the 'no' to do this?
var empNumber, radios;
function showReqEmp() {
if (!radiosChecked()) {
empNumber.style.display = 'none';
} else {
empNumber.style.display = 'block';
}
}
function showReqEmp(id) {
var a = document.getElementById(id);
if (!radiosChecked())
a.style.display = 'none';
else
a.style.display = 'block';
}
function radiosChecked() {
var radios = document.getElementsByName('returning_employee');
for (var i = 0; i < radios.length; i++)
if (radios[i].checked) return true;
return false;
}
showReqEmp('requiredNum');
showReqEmp('requiredNumText');
<font color="Red">*</font>Returning Employee:</td>
<input type="radio" name="returning_employee" value="Yes" onclick="showReqEmp('requiredNum'); showReqEmp('requiredNumText')">Yes
<input type="radio" name="returning_employee" value="No" onclick="showReqEmp('requiredNumText'); showReqEmp('requiredNum')" />No
<lable id="requiredNumText" style="display:none"><font color="Red">*</font>Employee Number:</lable>
<lable id="requiredNum" style="display:none">
<input type="text" id="employee_number" name="employee_number" placeholder="123456789">
Ok so now I ran into this issue with the validation.
Fiddle2
The show/hide works but i cant get the validation to check if they entered data after hitting 'yes'
var numberExp = /^[0-9\-]+$/;
function validate()
{
if(document.newempRequest.returning_employee.checked && !(document.newempRequest.employee_number.value.match(numberExp)))
{
alert("Please provide the employee number");
document.newempRequest.employee_number.focus();
return false;
}
return true;
}
I have tried to alter the input tags to differ the yes/no but that breaks the show/hide
The HTML code is same as above.

Simply modify the radiosChecked function to return true only if the Yes checkbox is checked.
function radiosChecked() {
var radios = document.getElementsByName('returning_employee')[0];
return radios.checked;
}
The original Code:
var radios = document.getElementsByName('returning_employee');
for (var i = 0; i < radios.length; i++)
if (radios[i].checked) return true;
return false;
Would return true even if any of the check box in the group is checked. Hence the toggling would not happen.

You can do it CSS-only, without JS:
#requiredNum {
display: none;
}
#returning_employee_yes:checked ~ #requiredNum {
display: block;
}
*Returning Employee:
<input type="radio" name="returning_employee"
id="returning_employee_yes" value="Yes" />
<label for="returning_employee_yes">Yes</label>
<input type="radio" name="returning_employee"
id="returning_employee_no" value="No" />
<label for="returning_employee_no">No</label>
<label id="requiredNum">
*Employee Number:
<input type="text" id="employee_number"
name="employee_number" placeholder="123456789" />
</label>

JS: uncheck box when another is checked but also uncheck itself if checked

I have three checkboxes. I am already using a piece of code I found here to uncheck the other two when one is checked.
function cbChange(obj) {
var cbs = document.getElementsByClassName("cb");
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = false;
}
obj.checked = true;
}
I use this inside the checkbox to toggle the state: onchange="cbChange(this)".
However, I also need to provide for a situation where I don't want any of the boxes ticked. While I can do this by adding a separate button or checkbox, I wanted to know if the above code can be modified or another function added that will allow to untick the already ticked box by an onclick event.
I tried adding this function (again found here) but it won't work:
function cbUncheck(obj)
{
if (obj.checked == false)
{
document.getElementByClassName("cb").checked = false;
}
}
I use this in the checkbox code: onclick="cbUncheck(this);"
Suggestions welcome!
Thanks!

you need to check first checkbox checked or not..
if checkbox is not checked then dont need to do anything
otherwise uncheck other checkboxes
<input id="chk1" class="cb" type="checkbox" value="01" onchange='cbChange(this)' />
<label for="chk1" >1</label>
<input id="chk2" class="cb" type="checkbox" value="01" onchange='cbChange(this)' />
<label for="chk2" >1</label>
<input id="chk3" class="cb" type="checkbox" value="01" onchange='cbChange(this)' />
<label for="chk3" >1</label>
javascript
function cbChange(obj) {
if(obj.checked)
{
var cbs = document.getElementsByClassName("cb");
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = false;
}
obj.checked = true;
}
}
JS BIN JSBIN EXAMPLE

You can use radio buttons so that only one can be selected (no script required for that). Then if some other condition occurs, clear both (below uses a button as an example):
<form>
<input type="radio" name="foo" value="0">zero<br>
<input type="radio" name="foo" value="1">one<br>
<button type="button" onclick="clearRadios(this.form.foo)">Clear radios</button>
</form>
And the function:
function clearRadios(radioGroup) {
for (var i=0; i<radioGroup.length; i++) {
radioGroup[i].checked = false;
}
}
If you don't want users to check the radios at all, disable them.

This below code simply give solutions to what you need.
this.scan=function(index)
{
if( this.boxGroup[ index ].checked )
for(var i=0, g=this.boxGroup, len=g.length; i<len; i++)
if( i != index )
g[i].checked = false;
}
for working demo see jsfiddle

Using document.getElementsByClass with Checkboxes

I have cut this code and I'm not that familiar using Class.
<form>
<input type="checkbox" name="Symptom1" class=sound value="case1"> Poor Sound Quality<br>
<input type="checkbox" name="Symptom2" class=sound value="case2"> Only One Speaker is Working<br>
<input type="checkbox" name="Symptom3" class=sound value="case3"> No Sound<br>
<input type="checkbox" name="Symptom4" class=sound value="case4"> Low Volume<br>
<input type="checkbox" name="Symptom5" class=sound value="case5"> Crackling Sound<br>
<input type="checkbox" name="Symptom6" class=battery value="case6"> Drain Easily<br>
<input type="checkbox" name="Symptom7" class=battery value="case7"> Flickering Screen<br>
<input type="checkbox" name="Symptom8" class=battery value="case8"> Battery Physically Wobbled<br>
<input type="checkbox" name="Symptom9" class=battery value="case9"> Turn Off from Now and Then<br>
<input type="checkbox" name="Symptom10" class=battery value="case10"> Does not Charge<br>
</form>
<button onclick="Submit()">Submit</button>
Here is my submit function that I am working on.
function Submit() {
if (document.getElementsByClassName('sound').checked) {
alert("You Picked Sound");}
} else {
alert("none");
}
}
What I wanted to do is if the user checked at least one of the checkboxes under the same class (i.e. sound) then pressed submit. It would alert the user that he/she picked that class. But apparently it would not and rather it always alert me with none.
Help?

You have to loop through the collection document.getElementsByClassName returns and check the checked attribute. Here's one way to do it (untested):
function Submit() {
var pickedOne = false;
var inputs = document.getElementsByClassName('sound');
for(var i = 0, l = inputs.length; i < l; ++i) {
if(inputs[i].checked) {
pickedOne = true;
alert('You picked ' + inputs[i].className);
break;
}
}
if(!pickedOne) {
alert('none');
}
}
If you can use jQuery, you can probably do something like this instead:
function Submit() {
var selectedClass = $('input[type=checkbox]:checked').attr('class');
if(selectedClass) {
alert('You picked ' + selectedClass);
}
else {
alert('none');
}
}

"document.getElementsByClassName" return a list of nodes.
For example document.getElementsByClassName('sound') will return an array 5 checkboxes. So you can use it like this:
var sounds = document.getElementsByClassName('sound');
// Now you can access one of them through it's index
function Submit() {
if (document.getElementsByClassName('sound')[0].checked) {
alert("You Picked Sound");}
} else {
alert("none");
}
}

document.getElementsByClassName() returns an array instead of an object. You need to loop through the array.
function Submit() {
var allCheckBox = document.getElementsByClassName('sound');
var allPick = false;
for(var i = 0; i < allCheckBox.length ; i++) {
if (allCheckBox[i].checked) {
allPick = true;
break;
}
}
if(allPick) {
alert("You Picked Sound");
} else {
alert("none");
}
}

Javascript validation for multiple textboxes

I am having some trouble figuring out how to validate my textboxes using js. I have 10 textboxes, the user can fill out any number 1-10, but cant fill out 0. Here is the js that I have written, but it only returns true if all 10 textboxes are filled, rather than just checking if one is filled.
function submitIt() {
if (document.isForm.Student_ID.value == null) {
alert ("You must enter a Colleague ID.");
return false;
} else {
return true;
}
}
And here is the form.....
<form name="isForm" onSubmit="return submitIt()">
<input name="Student_ID" type="text" id="idField1" />
<input name="Student_ID" type="text" id="idField2" />
<input name="Student_ID" type="text" id="idField3" />
<input name="Student_ID" type="text" id="idField4" />
<input name="Student_ID" type="text" id="idField5" />
<input name="Student_ID" type="text" id="idField6" />
<input name="Student_ID" type="text" id="idField7" />
<input name="Student_ID" type="text" id="idField8" />
<input name="Student_ID" type="text" id="idField9" />
<input name="Student_ID" type="text" id="idField10" />
<input name="SUBMIT" type="submit" />
</form>
I realize that I could change all of the names, and check each one, but I am trying to avoid that much clutter in my code, and am curious the best way to do this. Any help is appreciated, thanks!

You can get a collection of all these textboxes with document.getElementsByName. Then loop through them, and make sure at least one is filled in:
var allTbs = document.getElementsByName("Student_ID");
var valid = false;
for (var i = 0, max = allTbs.length; i < max; i++) {
if (allTbs[i].value) {
valid = true;
break;
}
}
DEMO

Function is iterating by all of the student text boxes and return true if some element is filled out. Protected against that if input contain only spaces :)
function submitIt() {
for( var i = 0, t = document.getElementsByName( "Student_ID" ), l = t.length; i < l; i++ )
if( t[i].value && !/^\s+$/.test( t[i].value ) )
return true;
return false
}
Demo on: http://jsfiddle.net/hhD2x/

you can use jquery.
add common class name for all your textboxes i.e.
<input name="Student_ID" type="text" id="idField1" class="student" />
now in js function
function submit()
{
$('.student').each(function() {
if($(this).val() == '' || $(this).val() == null)
{
// your error message
return false;
}
}
}
this function check all the elements with student class.

$('input[type="text"], select,
:input[type="date"],
:input[type="email"],
:input[type="radio"]').each(function () {
if ($.trim($(this).val()) == '' ) {
// your error message here
isValid = false;
}
});

Using JavaScript to manipulate HTML input (checkbox) elements via type instead of name

I am implementing an HTML form with some checkbox input elements, and I want to have a Select All or DeSelect All button. However, I do not want to rely on the name of the input element (like this example) but rather the type because I have multiple checkbox groups with different names. Is there a way to check and uncheck all checkbox input elements within a form with JavaScript by relying on the type instead of the name?
Edit: We rely on YUI libraries, so I have access YUI if that provides a solution.

This should do it:
<script>
function checkUncheck(form, setTo) {
var c = document.getElementById(form).getElementsByTagName('input');
for (var i = 0; i < c.length; i++) {
if (c[i].type == 'checkbox') {
c[i].checked = setTo;
}
}
}
</script>
<form id='myForm'>
<input type='checkbox' name='test' value='1'><br>
<input type='checkbox' name='test' value='1'><br>
<input type='checkbox' name='test' value='1'><br>
<input type='checkbox' name='test' value='1'><br>
<input type='checkbox' name='test' value='1'><br>
<input type='button' onclick="checkUncheck('myForm', true);" value='Check'>
<input type='button' onclick="checkUncheck('myForm', false);" value='Uncheck'>
</form>

function findCheckBoxes(el, check) {
for(var i=0;el.childNodes[i];i++)
{
var child = el.childNodes[i];
if (child.type=="checkbox")
{
child.checked = check;
}
if (child.childNodes.length > 0)
this.findCheckBoxes(child, check);
}
}

iterate through the form.elements collection and check .type == "checkbox".
var button = getSelectAllButtonInFormSomeHow();
/*all formelements have a reference to the form. And the form has an elements-collection.*/
var elements = button.form.elements;
for(var i = 0; i < elements.length;i++) {
var input = elements[i];
if (input.tagName == "input" && input.type == "checkbox") input.checked = true;
}

Every input element has an attribute, type, which for checkboxes is "checkbox" so you could try something like this:
for (var i = 0; i < document.myForm.elements.length; i++) {
if (document.myForm.elements[i].type == "checkbox") {
document.myForm.elements[i].checked = true;
}
}

If jQuery is an option you can do this rather easily.
See the documentation on jQuery selectors. (The last example in the section shows how to do it with radio buttons but just replace that with check boxes.)

Is assigning a class to all required checkbox elements an option? If yes, then this is how I would do it (assuming "class_name" is the name of the css class present in all checkbox elements in question):
function selectCheckBoxes(bChecked) {
var aCheckBoxes = YAHOO.util.Dom.getElementsByClassName('class_name', 'input');
for (var i = 0; i < aCheckBoxes.length; i++) {
aCheckBoxes[i].checked = bChecked;
}
}
If you want to stay away from classes, but can get parent element by ID (or any other method, I will use ID in the example, though), than you can do this:
function selectCheckBoxes(bChecked) {
var oParent = document.getElementById('parentsID');
var aElements = oParent.getElementsByTagName('input');
for (var i = 0; i < aElements.length; i++) {
if (aElements[i].type == 'checkbox') {
aElements[i].checked = bChecked;
}
}
}
I would stick to the "class" method, however.

<html>
<head>
<script>
function selectCheckBox()
{
if(document.getElementById('id11').checked==true)
{
document.frm.id2.checked=true
document.frm.id3.checked=true
document.frm.id4.checked=true
}
if(document.getElementById('id11').checked==false)
{
document.frm.id2.checked=false
document.frm.id3.checked=false
document.frm.id4.checked=false
}
}
function selectCheckBox1()
{
if(document.getElementById('id12').checked==false)
{
document.frm.id1.checked=false
}
}
function selectCheckBox2()
{
if(document.getElementById('id13').checked==false)
{
document.frm.id1.checked=false
}
}
function selectCheckBox3()
{
if(document.getElementById('id14').checked==false)
{
document.frm.id1.checked=false
}
}
</script>
</head>
<body>
<form name="frm">
All :<input type="checkbox" id="id11" name="id1" value="1" onClick="selectCheckBox()"><br>
A. :<input type="checkbox" id="id12" name="id2" value="2" onClick="selectCheckBox1()"><br>
B. :<input type="checkbox" id="id13" name="id3" value="3" onClick="selectCheckBox2()"><br>
C. :<input type="checkbox" id="id14" name="id4" value="4" onClick="selectCheckBox3()"><br>
</form>
</body>
</html>