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>
Related
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");
}
}
function validate()
{
var a = document.getElementById("a");
var b = document.getElementById("b");
var valid = true;
if(a.value.length<=0 || b.value.length<=0 || a.value.trim()=="" || b.value.trim()=="")
{
alert("Don't leave the field empty!");
valid = false;
}
if(isNaN(a.value) || isNaN(b.value))
{
alert("Enter a proper number!");
valid = false;
}
for(var i=0; i<form.elements.length; i++)
{
if(form.elements[i].checked)
{
valid = true;
}
else
{
alert("No option selected!");
valid = false;
}
}
return valid;
};
This is my JavaScript function to validate group of radio buttons to check if atleast one of them is selected. And, the one below is my form.
<form name="myForm" font-size="75px;" action ="serv" method="get" onsubmit="return validate();" >
<hr/>
Enter the 1st number: <input type="text" name="a" id="a" /><br/>
Enter the 2st number: <input type="text" name="b" id="b"/><br/><br/>
<label>Add</label><input type="radio" name="option" value="Add" id="r1" /><br/>
<label>Subtract</label><input type="radio" name="option" value="Subtract" id="r2" /><br/>
<label>Multiply</label><input type="radio" name="option" value="Multiply" id="r3" /><br/>
<label>Divide</label><input type="radio" name="option" value="Divide" id="r4" /><br/>
<input type="submit" value="Submit" />
</form>
When i give input and no radio button is selected it should alert the user, but its not happening. Can someone guide where I've gone wrong? And help me out with this? I know there might be lot of duplicates, but I've tried them all to no avail. When i click submit without selecting the radio button it gives me a blank page. Any help is appreciated. Thanks.
Try this, Check the demo here Fiddle
function validate()
{
var a = document.getElementById("a");
var b = document.getElementById("b");
var valid = true;
if(a.value.length<=0 || b.value.length<=0 || a.value.trim()=="" || b.value.trim()=="")
{
alert("Don't leave the field empty!");
valid = false;
}
if(isNaN(a.value) || isNaN(b.value))
{
alert("Enter a proper number!");
valid = false;
}
var ele = document.getElementsByName("option");
var flag=0;
for(var i=0; i<ele.length; i++)
{
if(ele[i].checked)
{
flag=1;
break;
}
}
if(flag == 0)
{
alert("No option selected!");
valid = false;
}
return valid;
};
Hi,
I want to check/uncheck all the checkboxes with the same class as well as disable\enable the associated text fields when checking/unchecking a checkbox.
I managed to write a code using document.activeElement and document.getElementsByClassName that'll do exactly that, except that it doesn't work on Chrome. It's a reported bug in Chrome that it returns body instead of the actual activeElement unless the activeElement is a text field.
Is there a workaround that I can use until the bug is fixed?
My code:
JS:
function changeAll(variable) {
var current = document.activeElement;
var checkboxes = variable + "_g";
var text = variable + "_v";
var i;
if (current.checked === true) {
for (i = 0; i < document.getElementsByClassName(checkboxes).length; i++) {
document.getElementsByClassName(checkboxes)[i].checked = true;
}
for (i = 0; i < document.getElementsByClassName(text).length; i++) {
document.getElementsByClassName(text)[i].disabled = false;
}
} else {
for (i = 0; i < document.getElementsByClassName(checkboxes).length; i++) {
document.getElementsByClassName(checkboxes)[i].checked = false;
}
for (i = 0; i < document.getElementsByClassName(text).length; i++) {
document.getElementsByClassName(text)[i].disabled = true;
}
}
}
HTML:
<input type="checkbox" class="y_g" onClick="changeAll('y')">
<input type="text" class="y_v" disabled>
<input type="checkbox" class="y_g" onClick="changeAll('y')">
<input type="text" class="y_v" disabled>
<br>
<input type="checkbox" class="x_g" onClick="changeAll('x')">
<input type="text" class="x_v" disabled>
<input type="checkbox" class="x_g" onClick="changeAll('x')">
<input type="text" class="x_v" disabled>
Pass in the reference
HTML:
<input type="checkbox" class="y_g" onClick="changeAll(this,'y')">
JavaScript:
function changeAll(current, variable) {
//var current = document.activeElement;
ideally you would not be using inline events.
here am trying to display divs ClinicFieldSet and HospitalFieldset by selecting the given text boxes. If both are selected, both ClinicFieldset and HospitalFieldset should display and if one of the check box is selected it should show which div is selected.
The problem with my script is, when one of the checkboxes are clicked, both checkboxes are getting selected and it is not posible to uncheck them also. So please suggest me an idea to fix this problem :(
I used Javascript onClick in both checkboxes to apply on both of them.
<script type="text/javascript>
var clinic = document.getElementById('clinic');
var visit = document.getElementById('visit');
if((clinic.checked = true) && (visit.checked = true) )
{
document.getElementById('ClinicFieldSet').style.display='block';
document.getElementById('HospitalFieldSet').style.display='block';
}
else if((clinic.checked = true) && (visit.checked = false))
{
document.getElementById('ClinicFieldSet').style.display='block';
document.getElementById('HospitalFieldSet').style.display='none';
}
else if((clinic.checked = false) && (visit.checked = true))
{
document.getElementById('ClinicFieldSet').style.display='none';
document.getElementById('HospitalFieldSet').style.display='block';
}
else
{
document.getElementById('ClinicFieldSet').style.display='none';
document.getElementById('HospitalFieldSet').style.display='none';
}
HTML
<input type="checkbox" name="type" id="clinic" onClick="dispp();" >Clinic Practice
<input type="checkbox" name="type" id="visit" onClick="dispp();" >Visiting Hospital
In your if statement use the == equality operator.
The single = is used to assign a value, not test its equality.
May I suggest a revised approach (not using in-line click-handlers) with a slightly amended html, just to make the JavaScript somewhat more simple:
HTML:
<input type="checkbox" name="type" id="clinic" /><label for="clinic">Clinic Practice</label>
<input type="checkbox" name="type" id="hospital" /><label for="hospital">Visiting Hospital</label>
<div id="clinicInfo">
<h2>Clinic information</h2>
</div>
<div id="hospitalInfo">
<h2>Hospital information</h2>
</div>
JavaScript:
document.getElementById('hospitalInfo').style.display = 'none';
document.getElementById('clinicInfo').style.display = 'none';
var inputs = document.getElementsByTagName('input');
function dispp() {
if (this.checked) {
document.getElementById(this.id + 'Info').style.display = 'block';
}
else {
document.getElementById(this.id + 'Info').style.display = 'none';
}
}
for (i = 0; i < inputs.length; i++) {
if (inputs[i].type.toLowerCase() == 'checkbox') {
inputs[i].onchange = dispp;
}
}
JS Fiddle demo.
Try this
if(clinic.checked == true)
{
document.getElementById('ClinicFieldSet').style.display='block';
}
else
{
document.getElementById('ClinicFieldSet').style.display='none';
}
if(visit.checked == true)
{
document.getElementById('HospitalFieldSet').style.display='block';
}
else
{
document.getElementById('HospitalFieldSet').style.display='none';
}
var form=document.forms.add
form.elements.check.addEventListener('change',function(e) {
e.preventDefault()
var check=document.querySelector('.check')
if(check.checked=true)
{
document.querySelector('.inside').style.display='block'
}
else{
document.querySelector('.inside').style.display='none'
}
})
I've spent over three hours on this trying to work with the code I've been given. I've never done javascript. Please help.
I have a form with 4 radio buttons, one specifying "other" and next to a text box that is supposed to post the user specified value. Here's what I've tried.
HTML:
<td id="amount_container">
<input name="chargetotal" type="radio" value="75.00" onclick="donation_value();" />$75<br />
<input name="chargetotal" type="radio" value="125.00" onclick="donation_value();" />$125<br />
<input name="chargetotal" type="radio" value="250.00" onclick="donation_value();" />$250<br />
<input name="chargetotal" type="radio" value="other" />other
<input type="text" name="specified" size="10" />
</td>
javascript:
<script type="text/javascript">
function donation_value(){
var val = 0;
for( i = 0; i < document.form1.chargetotal.length; i++ ) {
if( document.form1.chargetotal[i].checked == true ) {
val = document.form1.chargetotal[i].value;
if(val=='other') {
document.form1.specified.disabled=false;
document.form1.specified.focus();
document.form1.chargetotal.value=document.form1.specified.value;
} else {
document.form1.specified.disabled=true;
}
}
}
}
</script>
It seems, you forgot to add onclick handler to "other" radio.
I think it should be
<input name="chargetotal" type="radio" value="other" onclick="donation_value();"/>
Update
I think I understood what your problem is :)
You can add callback, whick will be invoked when page is submitted. This callback will set value for "other" radio if it is selected. Something like
function assignOtherValue() {
for( i = 0; i < document.form1.chargetotal.length; i++ ) {
if( document.form1.chargetotal[i].checked == true ) {
var val = document.form1.chargetotal[i].value;
if(val=='other') {
document.form1.chargetotal[i].value=document.form1.specified.value;
}
}
}
return true;
}
And add to form:
<form name="form1" onSubmit="return assignOtherValue();">
Fix your js:
function donation_value(){
var val = 0;
var the_form = document.forms['form1'];
for( i = 0; i < the_form.chargetotal.length; i++ ) {
if( the_form.chargetotal[i].checked == true ) {
val = the_form.chargetotal[i].value;
if(val=='other') {
the_form.specified.disabled=false;
the_form.specified.focus();
the_form.chargetotal.value=the_form.specified.value;
} else {
the_form.specified.disabled=true;
}
}
}
}
fiddle: http://jsfiddle.net/maniator/vQNyY/