Selecting ONE radio out of many - javascript

I'm trying to "modify/change" the way this code works, I want it to only allow ONE radio button selection out of 30 or more choices. as it is written now, it looks for all selected before submitting. im a noob, please be kind.
<script type="text/javascript">
function checkform() {
//make sure all picks have a checked value
var f = document.entryForm;
var allChecked = true;
var allR = document.getElementsByTagName('input');
for (var i=0; i < allR.length; i++) {
if(allR[i].type == 'radio') {
if (!radioIsChecked(allR[i].name)) {
allChecked = false;
}
}
}
if (!allChecked) {
return confirm('One or more picks are missing for the current week. Do you wish to submit anyway?');
}
return true;
}
function radioIsChecked(elmName) {
var elements = document.getElementsByName(elmName);
for (var i = 0; i < elements.length; i++) {
if (elements[i].checked) {
return true;
}
}
return false;
}
</script>

Use a counter instead of a flag for "allChecked".
Set it to zero. If the element is checked, use allChecked++ then check to see if the value is ONE at the end.

Related

Check Box Validation error

I am using below code for validating the check box
if(!validateForm())
{
alert("Please select intrested in required service");
return false;
}
return true;
}
function validateForm()
{
var c = document.getElementsByTagName('input');
for (var i = 0; i < c.length; i++)
{
if (c[i].type == 'checkbox')
{
if (c[i].checked) {return true}document.myForm.action="thankyou-enquiry-hrservice.php" ;
}
}
return false;
}
I have about 5 check boxes. If checked only 1 then it will go to thankyou-enquiry-hrservice.php. If i select multiple check boxes its not redirecting to that page instead its refreshing the current page with empty fields in website.
when you do:
if (c[i].checked) {return true}document.myForm.action="thankyou-enquiry-hrservice.php"
On the first checked ítem the function will return true and the:
document.myForm.action="thankyou-enquiry-hrservice.php"
Part wont be executed.
As for the 1 checked ítem sending you to the page you want, I'd bet that it's not the first chechbox that you're selecting. So when at least evaluate to false once, it's sending you where you want to go.
As requested a quick fix could be:
function validateForm()
{
var answer = false;
var c = document.getElementsByTagName('input');
for (var i = 0; i < c.length; i++)
{
if (c[i].type == 'checkbox')
{
if (c[i].checked) {
answer = true;
document.myForm.action="thankyou-enquiry-hrservice.php";
}
}
}
return answer;
}
But without knowing anything else of your intentions for this code I can't do anything else.

I am not able to set the Global variable in the following code. What am i doing wrong?

Here is the issue: I am trying check and uncheck the check boxes by a group.
So if you select G1 and G2, it throws a message that you cant mix groups. If you uncheck all of them, i am trying to clear the existing grouping and that is where the code seems to fail.
Any thoughts? (also,i might be having a wrong idea about that global var at the beginning. so please suggest)
<HTML>
<script language="javascript">
var prodSel="";
function VerifyGroup(a,b)
{
ClearAllSelectionsA(); // check if this is the last unselect and clear the prodSel variable
if (prodSel == "")
{
prodSel = a;
}else
{
if (prodSel != a)
{
alert ( "Please ensure that the groups are same for the items you select");
//alert(b);
document.getElementById(b).checked = false;
}
}
}
function ClearAllSelections()
{
var inputs = document.getElementsByTagName("input");
var cbs = [];
for (var i = 0; i < inputs.length; i++)
{
if (inputs[i].type == "checkbox")
{
inputs[i].checked = false;
}
}
prodSel=""; // Clear the variable; allow new selections
}
/*loop through and if all of them are unchecke,d clear the variable*/
function ClearAllSelectionsA()
{
var clre = true;
var inputs = document.getElementsByTagName("input");
var cbs = [];
for (var i = 0; i < inputs.length; i++)
{
if (inputs[i].type == "checkbox")
{
if (inputs[i].checked){clre= false;}
}
}
if (clre){
prodSel=""; // Clear the variable; allow new selections
alert(window.prodSel);
}
}
</script>
<body>
G1<input type="checkbox" value="zxc" id="12" onclick="javascript:VerifyGroup('g1',12);"><BR>
G1<input type="checkbox" value="zxcw" id="123" onclick="javascript:VerifyGroup('g1',123);"><BR>
G1<input type="checkbox" value="zxcdw" id="124" onclick="javascript:VerifyGroup('g1',124);"><BR>
G2<input type="checkbox" value="zxcf" id="125" onclick="javascript:VerifyGroup('g2',125);"><BR>
G2<input type="checkbox" value="zxcfg" id="126" onclick="javascript:VerifyGroup('g2',126);"><BR>
clear group
</body>
</html>
When you call ClearAllSelectionsA, if all the checkboxes are unchecked, then prodSel gets cleared. Then back in VerifyGroup, prodSel is immediately being reassigned to a. My recommendation would be to return true or false from ClearAllSelectionsA and act based upon that value.
<script language="javascript">
var prodSel="";
function VerifyGroup(a,b)
{
var cleared = ClearAllSelectionsA(); // check if this is the last unselect and clear the prodSel variable
if (prodSel == "" && !cleared) //only reset prodSel if there is a checkbox checked
{
prodSel = a;
}else
{
if (prodSel != a)
{
alert ( "Please ensure that the groups are same for the items you select");
//alert(b);
document.getElementById(b).checked = false;
}
}
}
function ClearAllSelections()
{
var inputs = document.getElementsByTagName("input");
var cbs = [];
for (var i = 0; i < inputs.length; i++)
{
if (inputs[i].type == "checkbox")
{
inputs[i].checked = false;
}
}
prodSel=""; // Clear the variable; allow new selections
}
/*loop through and if all of them are unchecke,d clear the variable*/
function ClearAllSelectionsA()
{
var clre = true;
var inputs = document.getElementsByTagName("input");
var cbs = [];
for (var i = 0; i < inputs.length; i++)
{
if (inputs[i].type == "checkbox")
{
if (inputs[i].checked){clre= false;}
}
}
if (clre){
prodSel=""; // Clear the variable; allow new selections
alert(window.prodSel);
}
return clre;
}
</script>

set first check box checked and others disable from checkbox list in clientside

I have a Checkbox list. On the load of a page i want my first checkbox true and others are disable.I need to check only one checkbox from checkbox list and others should be disable.If use unchecked the checked checkbox then others should be enable means allowed only one check box checked.
My javascript code is here but on the load of page its not checked the first checkbox, also i want the id of each checkbox while using checkboxlist.
function CheckOptions(CheckBoxList) {
var checkboxlist = document.getElementById('CheckBoxList1');
var checkedCount = 0;
var options = CheckBoxList.getElementsByTagName('input');
for (var i = 0; i < options.length; i++) {
if (options[i].checked) {
checkedCount += 1;
}
}
if (checkedCount > 0) {
for (var j = 0; j < options.length; j++) {
if (!options[j].checked)
options[j].disabled = true;
} }
else {
for (var k = 0; k < options.length; k++) {
options[k].disabled = false;
}
}
}
If you're only wanting one checked at a time, it sounds like a group of radio buttons would better serve your purposes.
$(function() {
var checkboxes = $("input[type=checkbox]");
// select the first one on load
checkboxes.eq(0).attr("checked", "checked");
checkboxes.each(function(i, e) {
if (i > 0) {
$(e).attr("disabled", "disabled");
}
})
// handle further selections:
checkboxes.click(function() {
if ($(this).attr("checked")) {
var t = this;
checkboxes.each(function(i, e) {
if (e != t) {
$(e).attr("disabled", "disabled");
}
});
} else {
checkboxes.attr("disabled", null)
}
});
});

Can we get radiobuttonList.Items.Count in .aspx page

Can we get the count of total radiobuttonlist items from .aspx page. I have to call a javascript function onclientclick of a button and i want to loop through the total number of radiobuttonlist items. So can anyone tell me that can we get it from .aspx page. Because in my scenario i can not use code behind for this.
function ClearRBL() {
for (i = 0; i < RBLCOUNT; i++) {
document.getElementById('rblWorkerList_' + [i]).checked = false;
}
}
How can i get RBLCOUNT here from .aspx page only? If not possible then in Javascript please.
I don't know how the aspx side would work, but if you want to do it just in JavaScript you could do something like the following that doesn't need to know the total number of elements in advance:
function ClearRBL() {
var i = 0,
rbl;
while (null != (rbl = document.getElementById('rblWorkerList_' + i++)))
rbl.checked = false;
}
The above assumes that the element ids end in numbers beginning with 0 counting up by 1s; the while loop will keep going until document.getElementById() doesn't find a matching element (in which case it returns null). A less cryptic way of writing it is as follows:
function ClearRBL() {
var i = 0,
rbl = document.getElementById('rblWorkerList_' + i);
while (null != rbl) {
rbl.checked = false;
i++;
rbl = document.getElementById('rblWorkerList_' + i);
}
}
P.S. When the while loop finishes i will be equal to the number of radio buttons, which may be useful if you want to do something with that number afterwards.
Try this:- This is not exactly what you want but hope it will help you.
function GetRBLSelectionID(RadioButtonListID) {
var RB1 = document.getElementById(RadioButtonListID);
var radio = RB1.getElementsByTagName("input");
var isChecked = false;
var retVal = "";
for (var i = 0; i < radio.length; i++) {
if (radio[i].checked) {
retVal = radio[i].id;
break;
}
}
return retVal;
}
you can give a name all radio button and then get them like this.
var RBLCOUNT= document[groupName].length;
or
var RBLCOUNT= 0;
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; ++i) {
if(inputs[i].type =="radio"){
RBLCOUNT++;
}
}
I just created a javascript function as mentioned by Karthik Harve and found the total number of rows generated dynamically as below: -
function ClearRBL() {
var rblLen = document.getElementById('rblWorkerList');
for (i = 0; i < rblLen.rows.length; i++) {
document.getElementById('rblWorkerList_' + [i]).checked = false;
}
}
It's working on both Mozila and IE.
Thanks alot to all who tried to help.

javascript to create multiple checkboxes in for statement

Hi I am trying to create a bunch of checkboxes without having to make each one currently I have:
function test(obj) {
if (document.getElementByID("info").checked == true) {
document.getElementById("gender")[0].disabled = true;
}
}
and it works for one checkbox but I have been trying to use the code below:
function test(obj) {
var x = obj.name;
var rowCount = $('#List tr').length;
for (var i = 0; i rowCount-1; i++) {
if (x == document.getElementByID("info"["+i+"]).checked == true) {
document.getElementById("gender"["+i+"]).disabled = true;
}
}
}
to create as many checkboxes as I want without me having to make each one but it doesn't seem to be working.
Ok, lets start from the beginning:
To create a check-box in javascript you must do something like this:
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
Then to add your checkbox into a div on your webpage you would do something like:
document.getElementById("your_div_id").appendChild(checkbox);
Then to see if the checkbox is checked you look at the "checked" property like so:
var isChecked = !!document.getElementById("your_checkbox").checked;
if(isChecked == true){
// Do whatever you want
}
Here's a function that would loop through a bunch of checkboxes
function testCheckBoxes(container_id){
var checkboxes = document.querySelector("#" + container_id + " > input[type='checkbox']");
for(var i = 0; i < checkboxes.length; i++){
if(!!checkboxes[i].checked == true){
// Your code
}
}
[Side Note: I'm using document.querySelector for consistency but since I think you're using jquery then use $ instead]
If you want to do something when someone clicks on your checkbox the use an event listener:
var list = document.getElementsByClassName("checkbox");
for(var i = 0; i < list.length; i++){
list[i].addEventListener('click', function(event){
if(!!event.target.checked == true){
// Do something
}
}, true);
}
Hopefully this is enough to get you started. Good Luck =)

Categories