Checkbox Behavior 1

rfreshour · Jan 22, 2008

Something isn't right with my JS checkbox code. Here is the code for my 5 checkboxes:

alert('Returning: ' + tag_email_chk + tag_phone_chk + tag_voice_chk + tag_fax_chk + tag_done_chk);
document.getElementById('tagEmailChk').checked = tag_email_chk;
document.getElementById('tagPhoneChk').checked = tag_phone_chk;
document.getElementById('tagVoiceChk').checked = tag_voice_chk;
document.getElementById('tagFaxChk').checked = tag_fax_chk;
document.getElementById('tagDoneChk').checked = tag_done_chk;

The alert() function displays: falsetruefalsefalsefalse

and yet ALL checkboxes get checked!! What am I missing?

kaht · Jan 22, 2008

If you isolate your problem, you'll see that nothing is wrong with the code you posted:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

function blah() {
   var tag_email_chk = false;
   var tag_phone_chk = true;
   var tag_voice_chk = false;
   var tag_fax_chk = false;
   var tag_done_chk = false;
   alert('Returning: ' + tag_email_chk + tag_phone_chk + tag_voice_chk + tag_fax_chk + tag_done_chk);
   document.getElementById('tagEmailChk').checked = tag_email_chk;
   document.getElementById('tagPhoneChk').checked = tag_phone_chk;
   document.getElementById('tagVoiceChk').checked = tag_voice_chk;
   document.getElementById('tagFaxChk').checked = tag_fax_chk;
   document.getElementById('tagDoneChk').checked = tag_done_chk;  
}

</script>
<style type="text/css"></style>
</head>
<body>

<input type="button" value="click me" onclick="blah()" /><br />
<input type="checkbox" id="tagEmailChk" />email<br />
<input type="checkbox" id="tagPhoneChk" />phone<br />
<input type="checkbox" id="tagVoiceChk" />voice<br />
<input type="checkbox" id="tagFaxChk" />fax<br />
<input type="checkbox" id="tagDoneChk" />done<br />

</body>
</html>

The above example works just fine. This means that the error is in something else that you're not showing us.

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small] <.[/small]

Ascalonian · Jan 22, 2008

Can you post how the declaration and initialization of all the tag_X_chk variables please?

BabyJeffy · Jan 22, 2008

You'll have to post more of your code (like the whole page, for instance)... and some details on what browser and operating system you are working with. You will also need to explain your problem - the expected outcome and the actual outcome.

Try installing Firefox with the Firebug extension. And make sure your code validates before you bother debugging any further.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

rfreshour · Jan 22, 2008

Yes @kaht your code works for me too. I think the problem with my code is that it's being generated from Ajax on the fly and I'm thinking that may be why it isn't working right.

I'm using the latest Firefox browser and IE7 and WindowsXP with the same results.

I'm trying to check any of the boxes and then hide them - then show them again with the same checkbox states.

Here is the whole JS Ajax function:
function show_hide_tag_links_ClickEvent(show_hide_flag)
{
document.getElementById("ajax_image").src="ajax_ progress.gif";

if (show_hide_flag == 'show')
{
var email_chk = document.getElementById('hiddenTagEmailChk').value;
var phone_chk = document.getElementById('hiddenTagPhoneChk').value;
var voice_chk = document.getElementById('hiddenTagVoiceChk').value;
var fax_chk = document.getElementById('hiddenTagFaxChk').value;
var done_chk = document.getElementById('hiddenTagDoneChk').value;
//alert('1Sending: ' + email_chk + phone_chk + voice_chk + fax_chk + done_chk);
}
else
{
var email_chk = document.getElementById('tagEmailChk').checked;
var phone_chk = document.getElementById('tagPhoneChk').checked;
var voice_chk = document.getElementById('tagVoiceChk').checked;
var fax_chk = document.getElementById('tagFaxChk').checked;
var done_chk = document.getElementById('tagDoneChk').checked;
//alert('2Sending: ' + email_chk + phone_chk + voice_chk + fax_chk + done_chk);
}

http.open('get', 'TaskEditAjaxTagLinksClickServer.php?iState=' + show_hide_flag + '&email_chk=' + email_chk + '&phone_chk=' + phone_chk + '&voice_chk=' + voice_chk + '&fax_chk=' + fax_chk + '&done_chk=' + done_chk, true);
http.onreadystatechange = returnTagLinksClickData;
http.send(null);
}

function returnTagLinksClickData()
{
if (http.readyState == 4) //Finished loading the response
{
var response = http.responseText;
var results_array = new Array();
results_array = response.split("~@~");

// Note: these PHP variables (below) can dynamically change after this form loads, therefore,
// in order for the form to reflect these changes, we have to update the PHP variables in
// the php ajax script and then pass them back to this form via JS's "Ajax Data Tunnel".
var table_structure = results_array[0];
var tag_email_chk = results_array[1];
var tag_phone_chk = results_array[2];
var tag_voice_chk = results_array[3];
var tag_fax_chk = results_array[4];
var tag_done_chk = results_array[5];
var tag_links_state = results_array[6];

//alert('Returning: ' + response);
//alert('Returning: ' + tag_email_chk + tag_phone_chk + tag_voice_chk + tag_fax_chk + tag_done_chk);

document.getElementById("tableStructureTagLinks").innerHTML = table_structure;

if (tag_links_state == 'show')
{
document.getElementById('tagLinksClickShowHideLink').innerHTML = " <A HREF='javascript:show_hide_tag_links_ClickEvent("+'"hide"'+")'>hide tag links</A>";
}
else
{
document.getElementById('tagLinksClickShowHideLink').innerHTML = " <A HREF='javascript:show_hide_tag_links_ClickEvent("+'"show"'+")'>show tag links</A>";
}

document.getElementById('hiddenTagEmailChk').value = tag_email_chk;
document.getElementById('hiddenTagPhoneChk').value = tag_phone_chk;
document.getElementById('hiddenTagVoiceChk').value = tag_voice_chk;
document.getElementById('hiddenTagFaxChk').value = tag_fax_chk;
document.getElementById('hiddenTagDoneChk').value = tag_done_chk;

if (table_structure.length > 0)
{
var bg_color = '<?php echo $php_g_edit_bg_color?>';
document.getElementById('tagLinksBGColor').style.background = bg_color;

var table_width = '<?php echo $php_g_width_web_page_table_cbo?>';
var width_col_1 = '<?php echo $php_g_tasks_width_col_1?>';

document.getElementById('tagLinksTableWidth').width = table_width;
document.getElementById('tagLinksWidthCol1').width = width_col_1;

var tag_email_label = '<?php echo $php_g_tag_email_label?>';
var tag_phone_label = '<?php echo $php_g_tag_phone_label?>';
var tag_voice_label = '<?php echo $php_g_tag_voice_label?>';
var tag_fax_label = '<?php echo $php_g_tag_fax_label?>';
var tag_done_label = '<?php echo $php_g_tag_done_label?>';

document.getElementById('tagEmailLabel').innerHTML = tag_email_label + '   ';
document.getElementById('tagPhoneLabel').innerHTML = tag_phone_label + '   ';
document.getElementById('tagVoiceLabel').innerHTML = tag_voice_label + '   ';
document.getElementById('tagFaxLabel').innerHTML = tag_fax_label + '   ';
document.getElementById('tagDoneLabel').innerHTML = tag_done_label;

alert('Returning: ' + tag_email_chk + tag_phone_chk + tag_voice_chk + tag_fax_chk + tag_done_chk);
document.getElementById('tagEmailChk').checked = tag_email_chk;
document.getElementById('tagPhoneChk').checked = tag_phone_chk;
document.getElementById('tagVoiceChk').checked = tag_voice_chk;
document.getElementById('tagFaxChk').checked = tag_fax_chk;
document.getElementById('tagDoneChk').checked = tag_done_chk;
}

document.getElementById("ajax_image").src="ajax_progress_clr.gif";
}
} // function returnTagLinksClickData()

kaht · Jan 22, 2008

I know what the problem is.

Here's where it's occurring:

Code:

        [!]results_array = response.split("~@~")[/!];

        // Note: these PHP variables (below) can dynamically change after this form loads, therefore,
        //       in order for the form to reflect these changes, we have to update the PHP variables in
        //       the php ajax script and then pass them back to this form via JS's "Ajax Data Tunnel".
        var table_structure = results_array[0];
        var   tag_email_chk = [!]results_array[1][/!];
        var   tag_phone_chk = [!]results_array[2][/!];
        var   tag_voice_chk = [!]results_array[3][/!];
        var     tag_fax_chk = [!]results_array[4][/!];
        var    tag_done_chk = [!]results_array[5][/!];
        var tag_links_state = results_array[6];

When calling the split method, it takes the string and turns it into an array. However, it turns it into an array of strings. This means that if you split "1|2|3|4" on the | character, you'll get an array of 1, 2, 3, and 4. However, this is the string representation of these numbers, not the numeric values themselves. This means that if you added the first and second elements of that array together you'd get "12" instead of 3.

What this means for you is that the boolean values you're putting into the results_array aren't boolean values at all, they're string representations of the boolean values. So, it's putting "false" in the array, not false. For the problem I illustrated above there's an easy fix - javascript has functions called parseInt and parseFloat to turn strings into numeric values, but no such function exists for booleans.

However, not all hope is lost. All we have to do is create a new boolean object when the values are assigned from the array. To do this we encapsulate the value in the boolean object constructor, and all is right with the world [smile]

Code:

        results_array = response.split("~@~");

        // Note: these PHP variables (below) can dynamically change after this form loads, therefore,
        //       in order for the form to reflect these changes, we have to update the PHP variables in
        //       the php ajax script and then pass them back to this form via JS's "Ajax Data Tunnel".
        var table_structure = results_array[0];
        var   tag_email_chk = [!]Boolean([/!]results_array[1][!])[/!];
        var   tag_phone_chk = [!]Boolean([/!]results_array[2][!])[/!];
        var   tag_voice_chk = [!]Boolean([/!]results_array[3][!])[/!];
        var     tag_fax_chk = [!]Boolean([/!]results_array[4][!])[/!];
        var    tag_done_chk = [!]Boolean([/!]results_array[5][!])[/!];
        var tag_links_state = results_array[6];

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small] <.[/small]

rfreshour · Jan 22, 2008

@kaht

You were absolutely correct!

Thanks...

BabyJeffy · Jan 23, 2008

rfreshour, check out the link at the bottom of kaht's post... the one that says "Thank kaht for this valuable post".

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Checkbox Behavior 1

rfreshour

Programmer

kaht

Programmer

Ascalonian

Programmer

BabyJeffy

Programmer

rfreshour

Programmer

kaht

Programmer

rfreshour

Programmer

BabyJeffy

Programmer

Similar threads

Part and Inventory Search

Sponsor