I am trying to make an attendance page with html radio buttons. So when i submit it, I want it to return how many radio buttons with title as present are checked and how many radio buttons with title as absent ae checked.
Extra info: I am using Mac OS X El Capitan, Bootstrap and tomcat for localhost and java for backend support
Please suggest answers with javascript only
HTML
<label>Present<input type="radio" name="optradio" class="radiobtn" onclick =" // please help "></label>
<label>Absent<input type="radio" name="optradio" class="radiobtn" onclick =" // please help "></label>
Use querySelectorAll('.present:checked') to select all the elements that are checked and have the class present. You can then get the length of the returned node list.
document.querySelector('form').addEventListener('submit', e => {
e.preventDefault()
let present = document.querySelectorAll('.present:checked').length
let absent = document.querySelectorAll('.absent:checked').length
console.clear()
console.log('present:', present)
console.log('absent:', absent)
})
table {
width: 100%;
}
<form>
<table>
<tr>
<td>Billy</td>
<td><label>Present<input type="radio" name="optradio[1]" class="radiobtn present"></label></td>
<td><label>Absent<input type="radio" name="optradio[1]" class="radiobtn absent"></label></td>
</tr>
<tr>
<td>Bobby</td>
<td><label>Present<input type="radio" name="optradio[2]" class="radiobtn present"></label></td>
<td><label>Absent<input type="radio" name="optradio[2]" class="radiobtn absent"></label></td>
</tr>
<tr>
<td>Joey</td>
<td><label>Present<input type="radio" name="optradio[3]" class="radiobtn present"></label></td>
<td><label>Absent<input type="radio" name="optradio[3]" class="radiobtn absent"></label></td>
</tr>
<tr>
<td>Samantha</td>
<td><label>Present<input type="radio" name="optradio[4]" class="radiobtn present"></label></td>
<td><label>Absent<input type="radio" name="optradio[4]" class="radiobtn absent"></label></td>
</tr>
</table>
<p>
<input type="submit" value="Submit">
</p>
</form>
Related
I'm trying to make it where the user can only select 1 checkbox at a time on a page.
Here's my code so far:
function onlyOne(checkbox) {
var checkboxes = document.getElementsByName('active', 'inactive',
'showall')
checkboxes.forEach((item) => {
if (item !== checkbox) item.checked = false
})
}
<strong>Active</strong>
<input type="checkbox" name="active" value="Yes" onclick="onlyOne(this)">
<strong>Inactive</strong>
<input type="checkbox" name="inactive" value="Yes" onclick="onlyOne(this)">
<strong>Show All</strong>
<input type="checkbox" name="showall" value="Yes" onclick="onlyOne(this)">
What keeps happening is it will work sometimes and sometimes they can select more than 1 checkbox. What do I need to tweak to get it working all the time.
HTML DOM getElementsByName() Method Gets all elements with the specified name
So In your code It's getting only the first name active ;
as a result the length of the list of checkboxs is 1 this is why your code doesn't work correctly.
If you want to make sure that what i am saying is true change your code to this and your logic will work just fine:
function onlyOne(checkbox) {
var checkboxes = document.getElementsByName('active');
checkboxes.forEach((item) => {
if (item !== checkbox)
item.checked = false;
})
}
<strong>Active</strong>
<input type="checkbox" name="active" value="Yes" onclick="onlyOne(this)">
<strong>Inactive</strong>
<input type="checkbox" name="active" value="Yes"
onclick="onlyOne(this)">
<strong>Show All</strong>
<input type="checkbox" name="active" value="Yes" onclick="onlyOne(this)">
As the others recommended use the radio buttons it's much easier I just wanted to clear this for you.
EDIT :
If you still want to use checkbox use querySelectorAll instead of your getElementsByName
var checkboxes = document.querySelectorAll('[name="active"], [name="inactive"], [name="showall"]');
You can use radio buttons to do this, it needs no JavaScript and is supported by pretty much everything, Internet Explorer included. They can be used like so:
<div>
<strong>Active</strong>
<input type="radio" name="select" id="active" checked> <!-- Checked means that it is initially selected -->
</div>
<div>
<strong>Inactive</strong>
<input type="radio" name="select" id="inactive">
</div>
<div>
<strong>Show All</strong>
<input type="radio" name="select" id="showall">
</div>
Notice how because they are all technically the same input, they all have to have the same name, but you can instead use IDs to tell between them if you really need to.
Using radio buttons would be the preferred choice. But if you do want to use checkboxes, you can use the following approach.
<strong>Active</strong>
<input type="checkbox" name="chkbox" value="Yes" onclick="onlyOne(this)">
<strong>Inactive</strong>
<input type="checkbox" name="chkbox" value="Yes"
onclick="onlyOne(this)">
<strong>Show All</strong>
<input type="checkbox" name="chkbox" value="Yes" onclick="onlyOne(this)">
<script>
function onlyOne(checkbox) {
var checkboxes = document.getElementsByName('chkbox')
checkboxes.forEach((item) => {
item.checked = false
})
checkbox.checked = true
}
</script>
Note that the name attribute for all the input fields are the same.
getElementsByName() only takes one argument. The other arguments you're giving are being ignores, so you're only processing the active checkbox.
Give all your checkboxes the same class, and use getElementsByClassName() instead.
function onlyOne(checkbox) {
var checkboxes = Array.from(document.getElementsByClassName('radio'))
checkboxes.forEach((item) => {
if (item !== checkbox) item.checked = false
})
}
<strong>Active</strong>
<input type="checkbox" name="active" value="Yes" class="radio" onclick="onlyOne(this)">
<strong>Inactive</strong>
<input type="checkbox" name="inactive" value="Yes" class="radio" onclick="onlyOne(this)">
<strong>Show All</strong>
<input type="checkbox" name="showall" value="Yes" class="radio" onclick="onlyOne(this)">
You are using getElementsByName incorrectly as you can only pass one name to it and it is not an Array so you can't forEach it.
You can use querySelectorAll to query by multiple names and use forEach from the Array prototype.
function onlyOne(checkbox) {
var checkboxes = document.querySelectorAll('[name=active],[name=inactive],[name=showall]')
Array.prototype.forEach.call(checkboxes, (item,i) => {
if (item !== checkbox) item.checked = false
})
}
<strong>Active</strong>
<input type="checkbox" name="active" value="Yes" onclick="onlyOne(this)">
<strong>Inactive</strong>
<input type="checkbox" name="inactive" value="Yes"
onclick="onlyOne(this)">
<strong>Show All</strong>
<input type="checkbox" name="showall" value="Yes" onclick="onlyOne(this)">
While using a radio button control might be the way to go, that just really a comment and not an answer.
in our html we have a document with a radio button and a value.
This Code opens a popup:
<tr>
<td><input id="vname" name="vname"></td>
<td>Cell</td>
<td id="eins"><button id="a1" class="button button-block"/ onclick="popup1()" name="button1">Eintragen</button></td>
</tr>
function popup1(){
a1.name = "b1"
window.open('schadensausmass.html', "popup", "width=700,height=600");
alert("t")
}
This is the separate Html File (popup):
<form name="myForm">
<td><input type="radio" id = "radio1" name= "gleich" value="2"></td>
<td><input type="radio" id = "radio2" name= "gleich" value="1"></td>
<td><input type="radio" id = "radio3" name= "gleich" value="3"></td>
</form>
</table>
<button type="button" onclick="meineFunktion()"></button>
We want the radio button value to be set in the innerhtml of <td id="eins">. So we tried this.
function meineFunktion() {
if (opener.document.getElementById("a1").name == "b1"){
window.close('schadensausmass.html')
opener.document.getElementById("eins").innerHTML= document.myForm.elements[1].value
}
Unfortunately the innerHtml doesnt change. If we do it like this
opener.document.getElementById("eins").innerHTML="Foo"
the innerHTML does change.
So the problem has something to do with document.myForm.elements[1].value
Any tips what could be wrong here?
Change
document.myForm.elements[1].value
to
document.forms.myForm.elements[1].value
You have to specify that you would like to get a form in the document. Make sure myform matches the name attribute of the form.
You can read more about forms and how to get its elements here
<input id="rdBtnDigitize" type="radio" name= "gleich" value="1">
Script
$(function () {
$('#rdBtnDigitize')[0].nextSibling.data = 'Foo'
});
General issue: I cannot set a default radio button in my radio groups unless I remove the value attribute from the inputs.
Specifics: Each input has a value that is needed as it is being used by angular in other places in the app. So, I need to know how to set an input to default checked while retaining the values on the inputs. It has the same behavior if I try to add checked with jQuery instead of in HTML.
I have looked at several related questions including here. The specific issue is I need to have values and be able to set one input to checked as a default. The first input is set to checked, but it does not actually work unless I remove the value from that input.
Here is the HTML:
<div class="radio">
<label>
<input type="radio" ng-model="optionsRadios" id="new" value="new" checked>
New
</label>
<label>
<input type="radio" ng-model="optionsRadios" id="used" value="used">
Used
</label>
<label >
<input type="radio" ng-model="optionsRadios" id="broken" value="broken">
Broken
</label>
</div>
You have to use ng-checked="true" instead of checked
<input type="radio" ng-model="optionsRadios" id="new" value="new" ng-checked="true">
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<p>My cars:</p>
<input type="radio" ng-model="all" value="Volvo" ng-checked="true">Volvo<br>
<input type="radio" ng-model="all" value="Ford">Ford<br>
<input type="radio" ng-model="all" value="Mercedes">Mercedes
</body>
</html>
If you have a group of radio button and you want to set radio button checked based on model, then radio button which has same
value and ng-model is checked automatically.
<input type="radio"
ng-model="optionsRadio" value="1" >
<input type="radio"
ng-model="optionsRadio" value="2" >
<input type="radio"
ng-model="optionsRadio" value="3" >
If the value of optionsRadio is "2" then second radio button will be selected automatically.
In Your Case:
When u r initiating the controller all u have to do is to assign a value to your model to keep atleast one radio button selected.
Controller part:
$scope.optionsRadio = "new";
Form part:
<input type="radio" ng-model="optionsRadio" value="new" >
<input type="radio" ng-model="optionsRadio" value="used" >
<input type="radio" ng-model="optionsRadio" value="broken" >
First radio button will be selected automatically.
Note:
If value doesn't work u can use ng-value.
First, i have checked several tutorial sites to clarify syntax such as the OnClick event and the prompt property and relocated the javascript from body to head (I heard this can fix browser-related problems).
For some reason OnClick event does nothing. I have tested website in-browser and radio buttons load correctly.
<!DOCTYPE html>
<html>
<head>
<script>
function checkSkillLevel() {
if(document.getElementById('skill_Easy').checked) {
var ok = prompt("You chose Easy");
}
else if(document.getElementById('skill_Medium').checked) {
var ok = prompt("You chose Medium");
}
else if document(getElementById('skill_Hard').checked) {
var ok = prompt("You chose Hard");
}
else {
var ok = prompt("Welcome to my tic tac toe game! To get started, please pick a skill level.");
}
}
</script>
</head>
<body>
<table cellpadding="10">
<tr>
<td><h1>Tic Tac Toe</h1></td>
</tr>
<tr>
<td>
<form action="" onclick="checkSkillLevel()">
<input type="radio" name="skill" value="Easy" id="skill_Easy" onclick="checkSkillLevel();">Easy<br>
<input type="radio" name="skill" value="Medium" id="skill_Medium">Medium<br>
<input type="radio" name="skill" value="Hard" id="skill_Hard">Hard<br>
</td>
</tr>
Also, I would prefer pure Javascript (no JQuery please) for any ideas.
You should add onclick to all the inputs, and correct the typo in the following line :
else if document(getElementById('skill_Hard').checked) {
Should be :
else if(document.getElementById('skill_Hard').checked) {
Hope this helps.
Snippet
function checkSkillLevel() {
if(document.getElementById('skill_Easy').checked) {
var ok = prompt("You chose Easy");
}
else if(document.getElementById('skill_Medium').checked) {
var ok = prompt("You chose Medium");
}
else if(document.getElementById('skill_Hard').checked) {
var ok = prompt("You chose Hard");
}
else {
var ok = prompt("Welcome to my tic tac toe game! To get started, please pick a skill level.");
}
}
<table cellpadding="10">
<tr>
<td><h1>Tic Tac Toe</h1></td>
</tr>
<tr>
<td>
<input type="radio" name="skill" value="Easy" id="skill_Easy" onclick="checkSkillLevel();"/>Easy<br/>
<input type="radio" name="skill" value="Medium" id="skill_Medium" onclick="checkSkillLevel();"/>Medium<br/>
<input type="radio" name="skill" value="Hard" id="skill_Hard" onclick="checkSkillLevel();"/>Hard<br/>
</td>
</tr>
</table>
Add an onclick-attr or an onchange-attr with the function to each radio-button and it will work.
It's all about which elements are listening to the onclick event. The form does not have onclick, it has onsubmit. The buttons have onclick, though.
<td>
<form action="" onclick="checkSkillLevel()">
<input type="radio" name="skill" value="Easy" id="skill_Easy" onclick="checkSkillLevel();">Easy<br>
<input type="radio" name="skill" value="Medium" id="skill_Medium">Medium<br>
<input type="radio" name="skill" value="Hard" id="skill_Hard">Hard<br>
</td>
Becomes:
<td>
<form action="">
<input type="radio" name="skill" value="Easy" id="skill_Easy" onclick="checkSkillLevel();">Easy<br>
<input type="radio" name="skill" value="Medium" id="skill_Medium" onclick="checkSkillLevel();">Medium<br>
<input type="radio" name="skill" value="Hard" id="skill_Hard" onclick="checkSkillLevel();">Hard<br>
</td>
Additionally, I have one other thing. Why are you using prompt() for showing the user their selection? Use alert() instead.
I need to update a hidden field based on user selected button
Code:
<div id="bankRadioButtons">
<table>
<tr><td><input type="radio" id="Bank1" name="bankRadioButtons" /><label for="Bank1">Bank1</label></td></tr>
<tr><td><input type="radio" id="Bank2" name="bankRadioButtons" /><label for="Bank2">Bank2</label></td></tr>
<tr><td><input type="radio" id="Bank3" name="bankRadioButtons" /><label for="Bank3">Bank3</label></td></tr>
</table>
</div>
<input type="hidden" name="selectedBank" value="" />
Javascript code:
$("#bankRadioButtons").buttonset();
$("#bankRadioButtons").buttonset().bind('click', function(event) {
// I need to write code here to update the hidden field 'selectedBank' based on user selected bank radio button
}
Description
Give your radio buttons a value then you can use jQuery's change() and val() methods.
jQuery.change() Bind an event handler to the "change" JavaScript event, or trigger that event on an element.
jQuery.val() Get the current value of the first element in the set of matched elements.
Check out my sample and this jsFiddle Demonstration
Sample
<div id="bankRadioButtons">
<table>
<tr><td><input type="radio" id="Bank1" value="Bank1" name="bankRadioButtons" /><label for="Bank1">Bank1</label></td></tr>
<tr><td><input type="radio" id="Bank2" value="Bank2" name="bankRadioButtons" /><label for="Bank2">Bank2</label></td></tr>
<tr><td><input type="radio" id="Bank3" value="Bank3" name="bankRadioButtons" /><label for="Bank3">Bank3</label></td></tr>
</table>
</div>
<input type="hidden" name="selectedBank" value="" />
$("input[type='radio'][name='bankRadioButtons']").change(function(event) {
$("input[type='hidden'][name='selectedBank']").val($(this).val());
});
More Information
jQuery.change()
jQuery.val()
Update
The following would will in better performance. Use class and the id attribute in html.
<div id="bankRadioButtons">
<table>
<tr><td><input type="radio" id="Bank1" value="Bank1" name="bankRadioButtons" class="bankRadioButtons" /><label for="Bank1">Bank1</label></td></tr>
<tr><td><input type="radio" id="Bank2" value="Bank2" name="bankRadioButtons" class="bankRadioButtons"/><label for="Bank2">Bank2</label></td></tr>
<tr><td><input type="radio" id="Bank3" value="Bank3" name="bankRadioButtons" class="bankRadioButtons"/><label for="Bank3">Bank3</label></td></tr>
</table>
</div>
<input type="hidden" name="selectedBank" id="selectedBank" value="" />
$(".bankRadioButtons").change(function(event) {
$("#selectedBank").val($(this).val());
});
Updated jsFiddle
You can do:
$("#bankRadioButtons").buttonset();
$("#bankRadioButtons").buttonset().bind('click', function(event) {
switch(this.id)
{
case "Bank1" : $("#selectedBank").val("Bank1");
break; // and then case "Bank2" etc.
}
}
Try this:
var value = $("input[#name=bankRadioButtons]:checked").val();
$("input[#name=selectedBank]").val(value);
Good-Luck !