JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

using javascript to manipulate checkboxes that use PHP arrays

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved

•
•
Join Date: Jun 2009
Posts: 15
Reputation: jay.barnes is an unknown quantity at this point 
Solved Threads: 0
jay.barnes jay.barnes is offline Offline
Newbie Poster

using javascript to manipulate checkboxes that use PHP arrays

 
0
  #1
Aug 10th, 2009
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>
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: using javascript to manipulate checkboxes that use PHP arrays

 
1
  #2
Aug 10th, 2009
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2009
Posts: 15
Reputation: jay.barnes is an unknown quantity at this point 
Solved Threads: 0
jay.barnes jay.barnes is offline Offline
Newbie Poster

Re: using javascript to manipulate checkboxes that use PHP arrays

 
0
  #3
Aug 10th, 2009
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?
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: using javascript to manipulate checkboxes that use PHP arrays

 
0
  #4
Aug 10th, 2009
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...
Dev.Opera — FOLLOW THE STANDARDS, BREAK THE RULES...
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2009
Posts: 15
Reputation: jay.barnes is an unknown quantity at this point 
Solved Threads: 0
jay.barnes jay.barnes is offline Offline
Newbie Poster

Re: using javascript to manipulate checkboxes that use PHP arrays

 
0
  #5
Aug 10th, 2009
•
•
•
•
Originally Posted by essential View Post
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: using javascript to manipulate checkboxes that use PHP arrays

 
0
  #6
Aug 10th, 2009
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.
Dev.Opera — FOLLOW THE STANDARDS, BREAK THE RULES...
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2009
Posts: 15
Reputation: jay.barnes is an unknown quantity at this point 
Solved Threads: 0
jay.barnes jay.barnes is offline Offline
Newbie Poster

Re: using javascript to manipulate checkboxes that use PHP arrays

 
0
  #7
Aug 10th, 2009
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: using javascript to manipulate checkboxes that use PHP arrays

 
0
  #8
Aug 10th, 2009
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
Dev.Opera — FOLLOW THE STANDARDS, BREAK THE RULES...
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: using javascript to manipulate checkboxes that use PHP arrays

 
0
  #9
Aug 11th, 2009
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.
Dev.Opera — FOLLOW THE STANDARDS, BREAK THE RULES...
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2009
Posts: 15
Reputation: jay.barnes is an unknown quantity at this point 
Solved Threads: 0
jay.barnes jay.barnes is offline Offline
Newbie Poster

Re: using javascript to manipulate checkboxes that use PHP arrays

 
0
  #10
Aug 19th, 2009
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!
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



acid2 ajax ajaxexample ajaxjspservlets array browser captcha captchaformproblem cart checkbox child class close codes date debugger decimal dependent disablefirebug dom editor element embed engine enter events explorer ext file firefox focus form forms frameworks getselection google gxt hiddenvalue highlightedword hint html ie7 ie8 iframe internet java javascript javascripthelp2020 jquery jsf jsfile jsp jump libcurl listbox maps marquee masterpage math matrixcaptcha media menu mp4 object onerror onmouseoutdivproblem onmouseover onreadystatechange parent paypal pdf php position post programming prototype rated redirect runtime safari scale scriptlets scroll search security session shopping size software star starrating stars synchronous toggle unicode variables web webservice wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC