asked on

javascript deciding whether to set checkbox checked

When binding to a data list i use:
Select Case e.Item.ItemType
Case ListItemType.Header
Case ListItemType.AlternatingItem, ListItemType.Item
Select Case _enmMode
Case enumScreenMode.modeEditBasket
Dim checkbox As CheckBox
checkbox = e.Item.FindControl("chkCabinSelected")

checkbox.Attributes.Add("onclick", "CheckSingleCheckbox()")

Case enumScreenMode.modeToursBooking
'todo add script to constrain number of selections to _intNoCabinsRequired
End Select
End Select

I have the javascript function(which is only half finished):
<script type="text/javascript">
var boolCabinSelected;
boolCabinSelected = false;
function CheckSingleCheckbox()
{
alert(boolCabinSelected);
if (boolCabinSelected = false)'then we can allow the checkbox to be checked
{
alert("Danny Is A James Blunt");
boolCabinSelected = true;
}
else
{
here we need to not allow the checkbox to be checked in.

I am aware that i will need to pass the name of the checkbox in but am looking for some help on this as im not overly familiar with jscript as u might be noticing.

The checkboxes as present look like:
<input id="dlCabins_ctl01_chkCabinSelected" type="checkbox" name="dlCabins$ctl01$chkCabinSelected" onclick="CheckSingleCheckbox();" />

I'd appreciate some advice.

}
}
</script>

What I need is initially the boolCabinSelected value to be false, then whenever a checkbox is clicked the checkbox name is passed into the function, so i can first say, are any checkboxes checked, i.e is boolCabinSelected = true, if they are then i want the popup to display and the tickbox that was ticked to not get ticked, i.e set to unchecked, and if false then allow the checkbox to be checked and set the value of boolCabinSelected to be true

scm0sml

ASKER

sorry the function should read something like:
function CheckSingleCheckbox()
{
if (boolCabinSelected = false)'then we can allow the checkbox to be checked
{
boolCabinSelected = true;
}
else
{
here we need to not allow the checkbox to be checked

SOLUTION

pkumarra

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

scm0sml

ASKER

Ok i have the following and it is working upto a point.

When first selecting an option it allows as there are no others selecting - fine.

But in the else statement i can never hit allert 3.

What is the ordering of when the checkbox gets ticked etc, as if boolCabinSelected = true then we jump into the else, but if the tickbox we have just ticked is not currently ticked then we should be hitting alert 3, this never happens.

Is the checkbox being checked before this statement?

<script type="text/javascript">
        var boolCabinSelected;
        boolCabinSelected = false;
        
        function CheckSingleCheckbox(obj)
        {   
            alert(boolCabinSelected);
            if (!boolCabinSelected) 
            {     
                alert("1");          
                boolCabinSelected = true; 
                obj.selected = true;          
            }
            else 
            {
                if (obj.selected = true)'will handle unticking the selected checkbox to allow for a new one to be selected.
                {
                    alert("2");          
                   boolCabinSelected = false ;
                   obj.selected = false;
                }
                else
                {
                    alert("3");          
                    alert("Only one cabin may be selected. You must de-select your previous choice before being able to select this cabin");
                   obj.selected = false;
                }
            }            
        }
    </script>

Open in new window

b0lsc0tt

scm0sml,

You need to use the comparison operator in your Ifs. For example ...

if (obj.selected == true)

Of course this is assuming you are really trying to use Javascript. The "comment" after that if isn't commented out. Javascript comments use // instead of '.

Let me know if you have any questions or need more information.

b0lsc0tt

ASKER CERTIFIED SOLUTION

b0lsc0tt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

scm0sml

ASKER

yeah i had put the comment in just for this post, it isnt in my code.

Ok almost there now.

The only problem now is that when it hits the alert 3 section, it should b setting the obj.selected = false but the checkbox stays checked.

so basically they have tried to select a checkbox when one is already checked, they get the popup to tell them they cant do this, but the checkbox stays checked anyway?

any ideaS?

b0lsc0tt

It is probably obj. What is used to call that function?

To test this theory try to reference the element with the document collection instead. For example, instead of obj on that line use ...

document.forms[0].fieldName[0].checked = false;

This assumes it is in the first (or only form) and the checkbox is named fieldName and is the first box.

Let me know what you find out or if you have a question.

bol

scm0sml

ASKER

it is called using
<input id="dlCabins_ctl02_chkCabinSelected" type="checkbox" name="dlCabins$ctl02$chkCabinSelected" onclick="CheckSingleCheckbox(this);" />

b0lsc0tt

Thanks. What is the result if you use ...

document.getElementById('dlCabins_ctl02_chkCabinSelected').checked = false;

bol

b0lsc0tt

Actually are you sure about the alert 3 thing?? Going from the code as I last saw it (see my post) alert 3 should only appear if that box isn't checked. Please either update the code or clarify the problem you just asked about. Alert 2 and 3 seem to do the same thing to the checkbox.

bol

scm0sml

ASKER

Ok function attached.

For what was alert 2, we were saying, ok a checkbox that IS checked has just been unchecked so untick it.

For what was alert 3 we were saying ok this checkbox has been checked, but another checkbox has already been checked so we give an error popup message and make sure the checkbox that was just ticked doesnt actually get set as ticked.

Comprende? :)

function CheckSingleCheckbox(checkbox,newcabinid)
        {   
            
            if (!boolCabinSelected)//if no cabin has been selected 
            {                     
                boolCabinSelected = true; //set our global flag
                checkbox.selected = true;
                form1.hddnCabinID.value = newcabinid //populate our hidden field with the cabin id.
            }
            else 
            {
                if (checkbox.selected == true)//we are unchecking the currently ticked checkbox
                {                    
                   boolCabinSelected = false ;//set flag to allow other cabins to be selected
                   checkbox.selected = false;
                   form1.hddnCabinID.value = 0 //reset hidden field value
                }
                else //else the user is trying to select a 2nd cabin which is not allowed so we prompt the user advising.
                {                    
                    alert("Only one cabin may be selected. You must de-select your previous choice before being able to select this cabin.");                    
                    checkbox.selected = false; //and de-select the choice they have just made.
                }
            }            
        }

Open in new window

scm0sml

ASKER

and what is happening at the moment is that theuy get the popup fine saying they cannot enter more than 2....

the next line is then:
checkbox.selected = false

but for whatever reason the checkbox stays checked?

b0lsc0tt

I will look over your last posts. What was the result of trying http:#20746784 ?

bol

b0lsc0tt

You use a variable name that will probably cause problems. Change checkbox to something else. For example (see snippet). Let me know if that works.

bol

function CheckSingleCheckbox(checkbox,newcabinid)
        {   
            
            if (!boolCabinSelected)//if no cabin has been selected 
            {                     
                boolCabinSelected = true; //set our global flag
                checkbox.selected = true;
                form1.hddnCabinID.value = newcabinid //populate our hidden field with the cabin id.
            }
            else 
            {
                if (checkbox.selected == true)//we are unchecking the currently ticked checkbox
                {                    
                   boolCabinSelected = false ;//set flag to allow other cabins to be selected
                   checkbox.selected = false;
                   form1.hddnCabinID.value = 0 //reset hidden field value
                }
                else //else the user is trying to select a 2nd cabin which is not allowed so we prompt the user advising.
                {                    
                    alert("Only one cabin may be selected. You must de-select your previous choice before being able to select this cabin.");                    
                    checkbox.selected = false; //and de-select the choice they have just made.
                }
            }            
        }

Open in new window

scm0sml

ASKER

am i being an idiot or has your snippet not changed?

scm0sml

ASKER

this seems to be having a better affect:
document.getElementById('dlCabins_ctl02_chkCabinSelected').checked = false;

but obviously for the one checkbox, how do i refereence which ever one i passed in.

I'm trying to use:
document.getElementById(checkbox).checked = false; where checkbox was the parameter passed in.

but this isnt working, do i need to reference checkbox.name or .id somehow instead?

b0lsc0tt

You aren't an idiot at all; I messed up trying to do a copy and just copied your code instead of my modified version. I have posted the code I meant to post in the snippet below. Basically I renamed the checkbox variable to myCheckbox.

Since my other recommendation worked then it probably is the name you used for the variable. If that is the problem then this will fix it (using myCheckbox instead of checkbox). The word checkbox is a reserved word in some ways and should not be used for a variable name.

bol

function CheckSingleCheckbox(myCheckbox,newcabinid)
        {   
            
            if (!boolCabinSelected)//if no cabin has been selected 
            {                     
                boolCabinSelected = true; //set our global flag
                myCheckbox.selected = true;
                form1.hddnCabinID.value = newcabinid //populate our hidden field with the cabin id.
            }
            else 
            {
                if (myCheckbox.selected == true)//we are unchecking the currently ticked checkbox
                {                    
                   boolCabinSelected = false ;//set flag to allow other cabins to be selected
                   myCheckbox.selected = false;
                   form1.hddnCabinID.value = 0 //reset hidden field value
                }
                else //else the user is trying to select a 2nd cabin which is not allowed so we prompt the user advising.
                {                    
                    alert("Only one cabin may be selected. You must de-select your previous choice before being able to select this cabin.");                    
                    myCheckbox.selected = false; //and de-select the choice they have just made.
                }
            }            
        }

Open in new window

scm0sml

ASKER

still no joy im afraid?

seems strange that the checks using myCheckbox.selected are working fine but then setting the actual value doesnt.......

any ideas?

SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

scm0sml

ASKER

nope still leaving the checkbox checked?

this is driving me nuts......

Why is the check if (myCheckbox.checked == true) working but then using the same thing to set the checked value not?

scm0sml

ASKER

i was being an idiot hielo, it did work.

Cheers for finishing this off for me!

b0lsc0tt

I'm glad I could help. Thanks for the grade, the points and the fun question.

bol