943,772 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > using javascript to manipulate checkboxes that use PHP arrays
Ad:
Permalink
Aug 10th, 2009
0

using javascript to manipulate checkboxes that use PHP arrays

Expand Post »
Hello!

I was wondering if I could get some assistance with something that is probably easy for even an amateur javascript coder, but, I just can't seem to get after trying every iteration of code I can imagine.

The deal is, is that I'm trying to put together a PHP search form, with checkboxes for countries (USA, CAN, MEX), and a set of checkboxes for each state in each country, including an "ALL STATES" checkbox for each country.

I'm trying to input form controls where, if someone checks the "ALL STATES" box for any country, it will automatically uncheck any state checkboxes for that country. However, since the checkbox name attributes need to go to PHP as an array, I can't remove the square brackets in the name (I tried escaping the characters with up to 2 backslashes, but that didn't help).

When I tried referring to the checkboxes via getElementById, that also failed. My code for the script as well as the form (abbreviated for convenience and sanity's sake) is below.

If anyone can point out to me where I'm going wrong, I'd appreciate it!

javascript Syntax (Toggle Plain Text)
  1. <script language="JavaScript">
  2. <!-- Begin
  3. function Check()
  4. {
  5. var USA_0 = document.getElementById("Search_Origin_State_USA_0");
  6. var USA_1 = document.getElementById("Search_Origin_State_USA_1");
  7. 	if(USA_0.checked == true)
  8. 	{
  9. 		USA_1.checked = false ;
  10. 	}
  11. 	else
  12. 	{
  13. 		USA_1.checked = true ;
  14. 	}
  15. }
  16.  
  17. // End -->
  18. </script>

...and now the form and checkbox fields:

html Syntax (Toggle Plain Text)
  1. <form action="test.php" method="post" name="load_search" target="_parent">
  2.  
  3. <input type="checkbox" name="Search_Origin_State_USA[%]" value="%" onClick="Check()" id="Search_Origin_State_USA_0" />
  4.                       All US States
  5. <input type="checkbox" name="Search_Origin_State_USA[AK]" value="AK" id="Search_Origin_State_USA_1" />
  6.                       AK</label>
Similar Threads
Reputation Points: 14
Solved Threads: 0
Light Poster
jay.barnes is offline Offline
45 posts
since Jun 2009
Permalink
Aug 10th, 2009
1

Re: using javascript to manipulate checkboxes that use PHP arrays

Hi jay,

here's a simple demo that converts all checked items, into an array of length, using a single hidden field:

startpage
javascript Syntax (Toggle Plain Text)
  1. <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2. <?xml-stylesheet type="text/css" href="#css_level21" media="screen"?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  4.    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  6. <head>
  7. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  8. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  9. <meta http-equiv="Content-Style-Type" content="text/css" />
  10. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  11. <title>http://www.daniweb.com :: DHTML  JavaScript / AJAX</title>
  12. <style type="text/css">
  13. /* <![CDATA[ */
  14.  
  15. td, th { 
  16.    background-color : #f0f0f0; 
  17.    font : bold normal normal 80%/1.5 Verdana, Arial, sans-serif;
  18.    color : #405060;
  19.    letter-spacing : 3px;
  20.    border : 1px solid #ccc;
  21.    padding : .500em 1em .500em 1em; }
  22. table {
  23.    width : auto;
  24.    border : 1px solid #405060;
  25.    border-collapse : collapse; }
  26.  
  27. /* ]]> */
  28. </style>
  29. <script type="text/javascript">
  30. // <![CDATA[
  31. var form;
  32. var Check = ( function() {
  33. var hfield = (( hfield = document.getElementById("arr")) ? hfield : arr );
  34.  
  35.    var element = ( function( index ) {
  36.       var index = index || 0;
  37.       var ids = "Search_Origin_State_USA_";
  38.       var obj;
  39.       return obj = (( obj = document.getElementById( ids + index )) ? obj : document.all[ ids + index ] );
  40.    } );
  41. var getState = [ ];
  42. var count = 0;
  43.    for( x = 1; element( x ); x++ ) {
  44.       if( element( x ).type === "checkbox" ) {
  45.          if ( element( 0 ).checked ) {
  46.           element( x ).checked = 0;
  47.          } else if ( element( x ).checked ) {
  48.          getState[ count ] = element( x ).value; 
  49.          count++; 
  50.          continue;
  51.          }
  52.       }
  53.    } hfield.value = getState.join(","); 
  54.  
  55. alert( hfield.value ); // output >>>
  56. } );
  57.  
  58. onload = function() {
  59.    if( "load_search" in document ) {
  60.       form = load_search;
  61.    } else { (( form = document.getElementById("load_search")) ? form : form = load_search ); 
  62.    } var chb0 = (( chb0 = document.getElementById("Search_Origin_State_USA_0")) ? chb0 : Search_Origin_State_USA_0 )
  63.    chb0.onclick = Check;
  64.    form.onsubmit = Check;
  65. };
  66. // ]]>
  67. </script>
  68. </head>
  69. <body>
  70. <div id="main">
  71. <form id="load_search" action="test.php" method="post">
  72. <table id="table" frame="void" rules="none" summary="JavaScript :: Live Demo!" cellspacing="4" cellpadding="4">
  73. <tr>
  74. <th><label for="Search_Origin_State_USA_0">All US States :</label></th>
  75. <td><input type="checkbox" id="Search_Origin_State_USA_0" name="Search_Origin_State_USA_0" value="ALL" /></td>
  76. </tr>
  77. <tr>
  78. <th><label for="Search_Origin_State_USA_1">AK :</label></th>
  79. <td><input type="checkbox" id="Search_Origin_State_USA_1" name="Search_Origin_State_USA_1" value="AK" /></td>
  80. </tr>
  81. <tr>
  82. <th><label for="Search_Origin_State_USA_2">CH :</label></th>
  83. <td><input type="checkbox" id="Search_Origin_State_USA_2" name="Search_Origin_State_USA_2" value="CH" /></td>
  84. </tr>
  85. </table>
  86. <div><input type="hidden" id="arr" name="arr" value="" /><input type="submit" value="- submit -" /></div>
  87. </form>
  88. </div>
  89. </body>
  90. </html>

and in your test.php:
php Syntax (Toggle Plain Text)
  1. <?php 
  2. $jArray = new Array( $_POST['arr'] ); /* gathered from Javascipt Array */ ?>

-essential
Last edited by essential; Aug 10th, 2009 at 6:19 am.
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Aug 10th, 2009
0

Re: using javascript to manipulate checkboxes that use PHP arrays

Thanks for the suggestion! Now, I tried it, but it didn't have any effect on checkbox behavior. Is your suggestion intended to do so, or is it intended to allow me to create checkboxes that don't require square brackets in the name attribute, thus allowing me to use my own code to affect the boxes' behavior?
Reputation Points: 14
Solved Threads: 0
Light Poster
jay.barnes is offline Offline
45 posts
since Jun 2009
Permalink
Aug 10th, 2009
0

Re: using javascript to manipulate checkboxes that use PHP arrays

Hi jay,

it's been tested under Opera8, and working smoothly on my expected output. If your code works, then maybe i need to apply a little re-adjustment on the lines, so that it will be able to support your browser. I'll post back when i'm done to it...
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Aug 10th, 2009
0

Re: using javascript to manipulate checkboxes that use PHP arrays

Click to Expand / Collapse  Quote originally posted by essential ...
Hi jay,

it's been tested under Opera8, and working smoothly on my expected output. If your code works, then maybe i need to apply a little re-adjustment on the lines, so that it will be able to support your browser. I'll post back when i'm done to it...
Understood, thanks for the reply!

I'm currently using FireFox 3.5.2, if that's any help.

I was able to use my own code (see below), to affect the checkboxes behavior, alongside yours, to create the array needed to execute the MySQL query on test.php (it also pops up the results of the javascript- but I did need to include the onClick"" attribute to the "ALL STATES" box.

If I try to run the query Omitting my code, a blank pop-up does come up if I check the "ALL STATES" box, and none of the selected state boxes gets unchecked.


javascript Syntax (Toggle Plain Text)
  1. <script language="JavaScript">
  2. <!-- Begin
  3. function Check()
  4. {
  5. 	if(document.load_search.Search_Origin_State_USA_0.checked == true)
  6. 	{
  7. 		document.load_search.Search_Origin_State_USA_1.checked = false ;
  8. 		document.load_search.Search_Origin_State_USA_2.checked = false ;
  9. 		document.load_search.Search_Origin_State_USA_3.checked = false ;
  10. 		document.load_search.Search_Origin_State_USA_4.checked = false ;
  11. 		document.load_search.Search_Origin_State_USA_5.checked = false ;
  12. 	}
  13. }
  14.  
  15. // End -->
  16. </script>

html Syntax (Toggle Plain Text)
  1. <label for="Search_Origin_State_USA_0">
  2.                       <input type="checkbox" name="Search_Origin_State_USA_0" value="%" id="Search_Origin_State_USA_0" onClick="Check()" />
  3.                       All US States</label>
  4.                     </td>
  5.                   </tr>
  6.                   <tr>
  7.                     <td><label for="Search_Origin_State_USA_1">
  8.                       <input type="checkbox" name="Search_Origin_State_USA_1" value="AK" id="Search_Origin_State_USA_1" />
  9.                       AK</label></td>
  10.                     <td><label for="Search_Origin_State_USA_2">
  11.                       <input type="checkbox" name="Search_Origin_State_USA_2" value="AL" id="Search_Origin_State_USA_2" />
  12.                       AL</label></td>
  13.                     <td><label for="Search_Origin_State_USA_3">
  14.                       <input type="checkbox" name="Search_Origin_State_USA_3" value="AR" id="Search_Origin_State_USA_3" />
  15.                       AR</label></td>
  16.                     <td><label for="Search_Origin_State_USA_4">
  17.                       <input type="checkbox" name="Search_Origin_State_USA_4" value="AZ" id="Search_Origin_State_USA_4" />
  18.                       AZ</label></td>
  19.                     <td><label for="Search_Origin_State_USA_5">
  20.                       <input type="checkbox" name="Search_Origin_State_USA_5" value="CA" id="Search_Origin_State_USA_5" />
Last edited by jay.barnes; Aug 10th, 2009 at 12:52 pm.
Reputation Points: 14
Solved Threads: 0
Light Poster
jay.barnes is offline Offline
45 posts
since Jun 2009
Permalink
Aug 10th, 2009
0

Re: using javascript to manipulate checkboxes that use PHP arrays

Hi,

here is the finalized version of the code, and should be able to penetrate all modern browsers on the market, including all versions of IE.
exept from the older version of the ( ns modes ) that does not understand the getElementById method.

javascript Syntax (Toggle Plain Text)
  1. <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2. <?xml-stylesheet type="text/css" href="#css_level21" media="screen"?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  4.    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  6. <head>
  7. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  8. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  9. <meta http-equiv="Content-Style-Type" content="text/css" />
  10. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  11. <title>http://www.daniweb.com :: DHTML  JavaScript / AJAX</title>
  12. <style type="text/css">
  13. /* <![CDATA[ */
  14.  
  15. td, th { 
  16.    background-color : #f0f0f0; 
  17.    font : bold normal normal 80%/1.5 Verdana, Arial, sans-serif;
  18.    color : #405060;
  19.    letter-spacing : 3px;
  20.    border : 1px solid #ccc;
  21.    padding : .500em 1em .500em 1em; }
  22. table {
  23.    width : auto;
  24.    border : 1px solid #405060;
  25.    border-collapse : collapse; }
  26.  
  27. /* ]]> */
  28. </style>
  29. <script type="text/javascript">
  30. // <![CDATA[
  31. var mode = (( document.all && !document.getElementById ) ? 1 : 0 );
  32. var elem = function( xid ) {
  33. var xid = xid;
  34. var obj = [ document.getElementById( xid ), document.all[ xid ] ][ mode ];
  35.    if ( obj ) {
  36.       return obj;
  37.    } return false;
  38. };
  39.  
  40. var addEvent = function( elm, evt, fun ) {
  41. var elm = elm;
  42. var evt = evt;
  43. var func = fun;
  44.    if ( mode ) {
  45.       if ( elm ) {
  46.          elm.attachEvent( "on" + evt, fun );
  47.       return;
  48.       } alert( "event is not supported: on" + evt );
  49.    return false; 
  50.    } else if ( !mode ) {
  51.       if ( elm ) {
  52.          elm.addEventListener( evt, fun, false );
  53.       return;
  54.       } alert( "event is not supported: on" + evt );
  55.    return false;
  56.    }
  57.    elm[ "on" + evt ] = fun;
  58. };
  59.  
  60. var check = function() {
  61. var pref = "Search_Origin_State_USA_";
  62.  
  63. addEvent( elem( pref + 0 ), "click", function() {
  64. var allStates = elem( pref + 0 ) || this;
  65.  
  66.    if ( allStates.checked ) {
  67.       for ( x = 1; !!( elem( pref + x )); x++ ) {
  68.          elem( pref + x ).checked = 0;
  69.       } delete x; 
  70.    return;
  71.    } 
  72. } );
  73.  
  74. addEvent( elem( "load_search" ), "submit", function() {
  75. var count = 0;
  76. var selectedStates = new Array();
  77.    for ( x = 1; !!( elem( pref + x )); x++ ) {
  78.       if ( elem( pref + x ).checked ) {
  79.          selectedStates[ count ] = elem( pref + x ).value;
  80.       count++;
  81.       }
  82.    } delete x;
  83.    elem("arr").value = selectedStates;
  84.    alert( elem("arr").value ) // hidden field value.
  85.    alert( "\nArray length: " + selectedStates.length + "\nSelected States: " + selectedStates.join(", ") ); // Tests Output >>>
  86. } );
  87. }; addEvent( this || window, "load", check ); 
  88. // ]]>
  89. </script>
  90. </head>
  91. <body>
  92. <div id="main">
  93. <form id="load_search" action="test.php" method="post">
  94. <table id="table" frame="void" rules="none" summary="JavaScript :: Live Demo!" cellspacing="4" cellpadding="4">
  95. <tr>
  96. <th><label for="Search_Origin_State_USA_0">All US States :</label></th>
  97. <td><input type="checkbox" id="Search_Origin_State_USA_0" name="Search_Origin_State_USA_0" value="ALL" /></td>
  98. </tr>
  99. <tr>
  100. <th><label for="Search_Origin_State_USA_1">AK :</label></th>
  101. <td><input type="checkbox" id="Search_Origin_State_USA_1" name="Search_Origin_State_USA_1" value="AK" /></td>
  102. </tr>
  103. <tr>
  104. <th><label for="Search_Origin_State_USA_2">CH :</label></th>
  105. <td><input type="checkbox" id="Search_Origin_State_USA_2" name="Search_Origin_State_USA_2" value="CH" /></td>
  106. </tr>
  107. </table>
  108. <div><input type="hidden" id="arr" name="arr" value="" /><input type="submit" value="- submit -" /></div>
  109. </form>
  110. </div>
  111. </body>
  112. </html>

NOTE: please run the entire document first, before you apply new changes over its lines'.

regards
-essential
Last edited by essential; Aug 10th, 2009 at 2:38 pm.
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Aug 10th, 2009
0

Re: using javascript to manipulate checkboxes that use PHP arrays

Sorry, that didn't seem to do it either. This, however, does seem to work:

javascript Syntax (Toggle Plain Text)
  1. <script language="JavaScript">
  2. <!-- Begin
  3. function UncheckUSAStates()
  4. {
  5. 	status==status;
  6. 	if(document.load_search.Search_Origin_State_USA_0.checked == true)
  7. 	{
  8. 		document.load_search.Search_Origin_State_USA_0.checked = true ;
  9. 		document.load_search.Search_Origin_State_USA_1.checked = false ;
  10. 		document.load_search.Search_Origin_State_USA_2.checked = false ;
  11. 		document.load_search.Search_Origin_State_USA_3.checked = false ;
  12. 		document.load_search.Search_Origin_State_USA_4.checked = false ;
  13. 		document.load_search.Search_Origin_State_USA_5.checked = false ;
  14. 		document.load_search.Search_Origin_State_USA_6.checked = false ;
  15. 		document.load_search.Search_Origin_State_USA_7.checked = false ;
  16. 		document.load_search.Search_Origin_State_USA_8.checked = false ;
  17. 		document.load_search.Search_Origin_State_USA_9.checked = false ;
  18. 		document.load_search.Search_Origin_State_USA_10.checked = false ;
  19. 		document.load_search.Search_Origin_State_USA_11.checked = false ;
  20. 		document.load_search.Search_Origin_State_USA_12.checked = false ;
  21. 		document.load_search.Search_Origin_State_USA_13.checked = false ;
  22. 		document.load_search.Search_Origin_State_USA_14.checked = false ;
  23. 		document.load_search.Search_Origin_State_USA_15.checked = false ;
  24. 		document.load_search.Search_Origin_State_USA_16.checked = false ;
  25. 		document.load_search.Search_Origin_State_USA_17.checked = false ;
  26. 		document.load_search.Search_Origin_State_USA_18.checked = false ;
  27. 		document.load_search.Search_Origin_State_USA_19.checked = false ;
  28. 		document.load_search.Search_Origin_State_USA_20.checked = false ;
  29. 		document.load_search.Search_Origin_State_USA_21.checked = false ;
  30. 		document.load_search.Search_Origin_State_USA_22.checked = false ;
  31. 		document.load_search.Search_Origin_State_USA_23.checked = false ;
  32. 		document.load_search.Search_Origin_State_USA_24.checked = false ;
  33. 		document.load_search.Search_Origin_State_USA_25.checked = false ;
  34. 		document.load_search.Search_Origin_State_USA_26.checked = false ;
  35. 		document.load_search.Search_Origin_State_USA_27.checked = false ;
  36. 		document.load_search.Search_Origin_State_USA_28.checked = false ;
  37. 		document.load_search.Search_Origin_State_USA_29.checked = false ;
  38. 		document.load_search.Search_Origin_State_USA_30.checked = false ;
  39. 		document.load_search.Search_Origin_State_USA_31.checked = false ;
  40. 		document.load_search.Search_Origin_State_USA_32.checked = false ;
  41. 		document.load_search.Search_Origin_State_USA_33.checked = false ;
  42. 		document.load_search.Search_Origin_State_USA_34.checked = false ;
  43. 		document.load_search.Search_Origin_State_USA_35.checked = false ;
  44. 		document.load_search.Search_Origin_State_USA_36.checked = false ;
  45. 		document.load_search.Search_Origin_State_USA_37.checked = false ;
  46. 		document.load_search.Search_Origin_State_USA_38.checked = false ;
  47. 		document.load_search.Search_Origin_State_USA_39.checked = false ;
  48. 		document.load_search.Search_Origin_State_USA_40.checked = false ;
  49. 		document.load_search.Search_Origin_State_USA_41.checked = false ;
  50. 		document.load_search.Search_Origin_State_USA_42.checked = false ;
  51. 		document.load_search.Search_Origin_State_USA_43.checked = false ;
  52. 		document.load_search.Search_Origin_State_USA_44.checked = false ;
  53. 		document.load_search.Search_Origin_State_USA_45.checked = false ;
  54. 		document.load_search.Search_Origin_State_USA_46.checked = false ;
  55. 		document.load_search.Search_Origin_State_USA_47.checked = false ;
  56. 		document.load_search.Search_Origin_State_USA_48.checked = false ;
  57. 		document.load_search.Search_Origin_State_USA_49.checked = false ;
  58. 		document.load_search.Search_Origin_State_USA_50.checked = false ;
  59. 		document.load_search.Search_Origin_State_USA_51.checked = false ;
  60. 	}
  61. }
  62.  
  63. // End -->
  64. </script>
  65.  
  66. <script type="text/javascript">
  67. // <![CDATA[
  68. var form;
  69. var UncheckUSAStates = ( function() {
  70. var hfield = (( hfield = document.getElementById("arr")) ? hfield : arr );
  71.  
  72.    var element = ( function( index ) {
  73.       var index = index || 0;
  74.       var ids = "Search_Origin_State_USA_";
  75.       var obj;
  76.       return obj = (( obj = document.getElementById( ids + index )) ? obj : document.all[ ids + index ] );
  77.    } );
  78. var getState = [ ];
  79. var count = 0;
  80.    for( x = 1; element( x ); x++ ) {
  81.       if( element( x ).type === "checkbox" ) {
  82.          if ( element( 0 ).checked ) {
  83.           element( x ).checked = 0;
  84.          } else if ( element( x ).checked ) {
  85.          getState[ count ] = element( x ).value; 
  86.          count++; 
  87.          continue;
  88.          }
  89.       }
  90.    } hfield.value = getState.join(","); 
  91.  
  92. alert( hfield.value ); // output >>>
  93. } );
  94.  
  95. onload = function() {
  96.    if( "load_search" in document ) {
  97.       form = load_search;
  98.    } else { (( form = document.getElementById("load_search")) ? form : form = load_search ); 
  99.    } var chb0 = (( chb0 = document.getElementById("Search_Origin_State_USA_0")) ? chb0 : Search_Origin_State_USA_0 )
  100.    chb0.onclick = Check;
  101.    form.onsubmit = Check;
  102. };
  103. // ]]>
  104. </script>

with HTML:

HTML Syntax (Toggle Plain Text)
  1. <label for="Search_Origin_State_USA_0">
  2.                       <input type="checkbox" name="Search_Origin_State_USA_0" value="%" id="Search_Origin_State_USA_0" onClick="UncheckUSAStates()" />
  3.                       All US States</label>
  4.                     </td>
  5.                   </tr>
  6.                   <tr>
  7.                     <td><label for="Search_Origin_State_USA_1">
  8.                       <input type="checkbox" name="Search_Origin_State_USA_1" value="AK" id="Search_Origin_State_USA_1" />
  9.                       AK</label></td>
  10.                     <td><label for="Search_Origin_State_USA_2">
  11.                       <input type="checkbox" name="Search_Origin_State_USA_2" value="AL" id="Search_Origin_State_USA_2" />
  12.                       AL</label></td>
  13.                     <td><label for="Search_Origin_State_USA_3">
  14.                       <input type="checkbox" name="Search_Origin_State_USA_3" value="AR" id="Search_Origin_State_USA_3" />
  15.                       AR</label></td>
  16.                     <td><label for="Search_Origin_State_USA_4">
  17.                       <input type="checkbox" name="Search_Origin_State_USA_4" value="AZ" id="Search_Origin_State_USA_4" />
  18.                       AZ</label></td>
  19.                     <td><label for="Search_Origin_State_USA_5">
  20.                       <input type="checkbox" name="Search_Origin_State_USA_5" value="CA" id="Search_Origin_State_USA_5" />
  21.                       CA</label></td>
  22.                     <td><label>

That seeming to work properly, I have just two questions:
1. is there any way you might be able to strip the code from your suggested script that affects the checkbox behavior, and simply leave the code that allows me to create the array?
2. Do you have any suggestions on how I might create a loop in the javascript so I don't need to do 52 different lines (one for each state + DC + 'all states'?

I really gotta start reading up on Javascript... :-p
Reputation Points: 14
Solved Threads: 0
Light Poster
jay.barnes is offline Offline
45 posts
since Jun 2009
Permalink
Aug 10th, 2009
0

Re: using javascript to manipulate checkboxes that use PHP arrays

I wonder why it didnt work -- hmm, that's pretty wierd for a powerful browser, ( not-to-output-anything from the code) like with the one that you are using right now.

Regarding about your questions:

1- if that's what you preferred to used. Then you should maintain those ids on the lines and get your arrays' on a normal stage in your test.php page, which will not require editing of a single line.

2- i think we will be needing some workout on this one. ( walk-the-dom-procedure can be implemented or looping with some arrays of ids can be implemented too. )

ok, i'll start all over and i'll fix your code.

- Thanks for the info, of letting me know the parts of the code that does work.

Will post back later...

-essential
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Aug 11th, 2009
0

Re: using javascript to manipulate checkboxes that use PHP arrays

Hi again jay,

lets have another try for this document!

As you can see, i've included a new functionality that remebers all checked items in the field, so that it will be able to bring back state of the checked items when you unchecked the All States option.

This code is tested under OPERA and working smoothly on expected output.

Hope that your browser would be able to adapt the code below:

javascript Syntax (Toggle Plain Text)
  1. <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2. <?xml-stylesheet type="text/css" href="#css_level21" media="screen"?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  4.    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  6. <head>
  7. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  8. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  9. <meta http-equiv="Content-Style-Type" content="text/css" />
  10. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  11. <title>http://www.daniweb.com :: DHTML  JavaScript / AJAX</title>
  12. <style type="text/css">
  13. /* <![CDATA[ */
  14.  
  15. td, th { 
  16.    background-color : #f0f0f0; 
  17.    font : bold normal normal 80%/1.5 Verdana, Arial, sans-serif;
  18.    color : #405060;
  19.    letter-spacing : 3px;
  20.    border : 1px solid #ccc;
  21.    padding : .500em 1em .500em 1em; }
  22. table {
  23.    width : auto;
  24.    border : 1px solid #405060;
  25.    border-collapse : collapse; }
  26.  
  27. /* ]]> */
  28. </style>
  29. <script type="text/javascript">
  30. // <![CDATA[
  31.  
  32. var Element = ( function( xtag, ids ) {
  33.    this.ids = ids;
  34.    this.xtag = (( this.xtag = document.getElementsByTagName( xtag )) ? this.xtag : this.xtag = document.all.tags( xtag ))[ this.ids ];
  35. } );
  36. // PROTOTYPING 
  37. Element.prototype = {
  38. getElement : ( function( xtags ) {
  39.    this.xtags = xtags;
  40.    return (( this.xtags = this.xtag.getElementsByTagName( xtags )) ? this.xtags : this.xtags = this.xtag.all.tags( xtags ));
  41. } )
  42. };
  43.  
  44. var UncheckUSAStates = ( function() {
  45.    var pref = "Search_Origin_State_USA_";
  46.    var form = new Element("form", "load_search");
  47.  
  48.    for ( var x = 1; !!( form.getElement("input")[ x ] ); x++ ) {
  49.       if ( form.getElement( "input" )[ x ].type === "checkbox" ) {
  50.          if ( form.getElement("input")[ String( pref + 0 ) ].checked ) {
  51.             form.getElement( "input" )[ x ].checked = 0;
  52.          } else {
  53.             if ( form.getElement( "input" )[ x ].hasAttribute("checked")) {
  54.                form.getElement( "input" )[ x ].checked = form.getElement( "input" )[ x ].defaultChecked;
  55.             }
  56.          } continue;
  57.       }  
  58.    }
  59. } );
  60.  
  61. onload = function() {
  62.    var frm = new Element( "form", "load_search" );
  63.    var input;
  64.    for ( var y = 1; ( input = frm.getElement("input")[ y ] ); y++ ) {
  65.       if ( input.type === "checkbox" ) {
  66.          input.onclick = ( function() {
  67.            if ( this.checked ) { 
  68.               this.setAttribute( "checked", "checked" );
  69.            } else {
  70.                if ( this.hasAttribute( "checked" )) { 
  71.                  this.removeAttribute("checked");
  72.                } return false;
  73.             }
  74.          } );
  75.       }
  76.    }
  77. }; 
  78. // ]]>
  79. </script>
  80. </head>
  81. <body>
  82. <div id="main">
  83. <form id="load_search" action="test.php" method="post">
  84. <table id="table" frame="void" rules="none" summary="JavaScript :: Live Demo!" cellspacing="4" cellpadding="4">
  85. <tr>
  86. <th><label for="Search_Origin_State_USA_0">All US States :</label></th>
  87. <td><input type="checkbox" id="Search_Origin_State_USA_0" name="Search_Origin_State_USA_0[%]" value="%" onclick="UncheckUSAStates();" /></td>
  88. </tr>
  89. <tr>
  90. <th><label for="Search_Origin_State_USA_1">AK :</label></th>
  91. <td><input type="checkbox" id="Search_Origin_State_USA_1" name="Search_Origin_State_USA[AK]" value="AK" /></td>
  92. </tr>
  93. <tr>
  94. <th><label for="Search_Origin_State_USA_2">AL :</label></th>
  95. <td><input type="checkbox" id="Search_Origin_State_USA_2" name="Search_Origin_State_USA[AL]" value="AL" /></td>
  96. </tr>
  97. <tr>
  98. <th><label for="Search_Origin_State_USA_3">AR :</label></th>
  99. <td><input type="checkbox" id="Search_Origin_State_USA_3" name="Search_Origin_State_USA[AR]" value="AR" /></td>
  100. </tr>
  101. <tr>
  102. <th><label for="Search_Origin_State_USA_4">AZ :</label></th>
  103. <td><input type="checkbox" id="Search_Origin_State_USA_4" name="Search_Origin_State_USA[AZ]" value="AZ" /></td>
  104. </tr>
  105. <tr>
  106. <th><label for="Search_Origin_State_USA_5">CA :</label></th>
  107. <td><input type="checkbox" id="Search_Origin_State_USA_5" name="Search_Origin_State_USA[CA]" value="CA" /></td>
  108. </tr>
  109. </table>
  110. <div><input type="hidden" id="arr" name="arr" value="" /><input type="submit" value="- submit -" /></div>
  111. </form>
  112. </div>
  113. </body>
  114. </html>

-essential
Last edited by essential; Aug 11th, 2009 at 4:37 am.
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Aug 19th, 2009
0

Re: using javascript to manipulate checkboxes that use PHP arrays

Hi!

I just wanted to let you know, I figured the issue out. It required in a lot of workarounds, but the form does exactly what I need it to, now.

Thanks again for all your assistance!
Reputation Points: 14
Solved Threads: 0
Light Poster
jay.barnes is offline Offline
45 posts
since Jun 2009

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Exception handling statement.
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: showing and hiding divs on click





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC