Hunter Walker
2006-Apr-24 20:14 UTC
[Rails] javascript in RoR page - Check ALL/uncheck ALL buttons
I am trying to implement a check all and uncheck all button for my check boxes. Here is what I have below. I am getting this error each time: Error: document.myform.add_visit_for_this_Pt has no properties Source File: http://localhost:3000/AddPatientVisit/addvisits Line: 1 Strange that I can''t seem to pass value into the function. Thanks for your help! <SCRIPT LANGUAGE="JavaScript"> <!-- // by Nannette Thacker // http://www.shiningstar.net // This script checks and unchecks boxes on a form // Checks and unchecks unlimited number in the group... // Pass the Checkbox group name... // call buttons as so: // <input type=button name="CheckAll" value="Check All" //onClick="checkAll(document.myform.list)"> // <input type=button name="UnCheckAll" value="Uncheck All" //onClick="uncheckAll(document.myform.list)"> // --> <!-- Begin function checkAll(field) { for (i = 0; i < field.length; i++) field[i].checked = true ; } function uncheckAll(field) { for (i = 0; i < field.length; i++) field[i].checked = false ; } // End --> </script> <body> </br> </br> </br> <form name="myform" action="addvisit" method="post"> Patient #1<%= check_box("add_visit_for_this_Pt", ''1'', {}, "yes","no") %></br> Patient #2<%= check_box("add_visit_for_this_Pt", ''2'', {}, "yes","no") %></br> Patient #4<%= check_box("add_visit_for_this_Pt", ''4'', {}, "yes","no") %></br> Patient #8<%= check_box("add_visit_for_this_Pt", ''8'', {}, "yes","no") %></br> Patient #9<%= check_box("add_visit_for_this_Pt", ''9'', {}, "yes","no") %></br> </br> <input type="submit" value="Add Visits"> <input type="button" name="CheckAll" value="Check All" onClick="checkAll(document.myform.add_visit_for_this_Pt)"> <input type="button" name="UnCheckAll" value="Uncheck All" onClick="uncheckAll(document.myform.add_visit_for_this_Pt)"> </form> </body> -- Posted via http://www.ruby-forum.com/.
Hunter Walker
2006-Apr-24 22:56 UTC
[Rails] Re: javascript in RoR page - Check ALL/uncheck ALL buttons
Here is the rendered HTML: <SCRIPT LANGUAGE="JavaScript"> <!-- // by Nannette Thacker // http://www.shiningstar.net // This script checks and unchecks boxes on a form // Checks and unchecks unlimited number in the group... // Pass the Checkbox group name... // call buttons as so: // <input type=button name="CheckAll" value="Check All" //onClick="checkAll(document.myform.list)"> // <input type=button name="UnCheckAll" value="Uncheck All" //onClick="uncheckAll(document.myform.list)"> // --> <!-- Begin function checkAll(field) { for (var i = 0; i < field.length; i++) field[i].checked = "true" ; } function uncheckAll(field) { for (var i = 0; i < field.length; i++) field[i].checked = "false" ; } // End --> </script> <html> <head> Some text here1 </br> </head> <body> </br> </br> </br> <form name="myform" action="addvisit" method="post"> Patient #1<input id="add_visit_for_this_Pt_1" name="add_visit_for_this_Pt[1]" type="checkbox" value="yes" /><input name="add_visit_for_this_Pt[1]" type="hidden" value="no" /></br> Patient #2<input id="add_visit_for_this_Pt_2" name="add_visit_for_this_Pt[2]" type="checkbox" value="yes" /><input name="add_visit_for_this_Pt[2]" type="hidden" value="no" /></br> Patient #4<input id="add_visit_for_this_Pt_4" name="add_visit_for_this_Pt[4]" type="checkbox" value="yes" /><input name="add_visit_for_this_Pt[4]" type="hidden" value="no" /></br> Patient #8<input id="add_visit_for_this_Pt_8" name="add_visit_for_this_Pt[8]" type="checkbox" value="yes" /><input name="add_visit_for_this_Pt[8]" type="hidden" value="no" /></br> Patient #9<input id="add_visit_for_this_Pt_9" name="add_visit_for_this_Pt[9]" type="checkbox" value="yes" /><input name="add_visit_for_this_Pt[9]" type="hidden" value="no" /></br> </br> <input type="submit" value="Add Visits"> <input type="button" name="CheckAll" value="Check All" onClick="checkAll(document.myform.add_visit_for_this_Pt)"> <input type="button" name="UnCheckAll" value="Uncheck All" onClick="uncheckAll(document.myform.add_visit_for_this_Pt)"> </form> </body> </html> -- Posted via http://www.ruby-forum.com/.
peter michaux
2006-Apr-25 03:34 UTC
[Rails] Re: javascript in RoR page - Check ALL/uncheck ALL buttons
Hunter, I think there are several of problems. I think you must put the script tags inside the head or body <html> <head> <script type="text/javascript"> </script> </head> <body> </body> </html> Note the use of the type attribute not the language attribute. Also don''t bother with the <!-- --> trick for hiding javascript from old browsers. This isn''t necessary anymore. For the following why have two elements with the same name? Also why have the hidden element at all? <input id="add_visit_for_this_Pt_1"> name="add_visit_for_this_Pt[1]" type="checkbox" value="yes" /><input > name="add_visit_for_this_Pt[1]" type="hidden" value="no" />BTW, You might be interested in this page for using tags and attributes etc. http://www.w3schools.com/tags/ If you want to get into JavaScript stuff you might be interested in JavaScript The Definitive Guide 4th edition by David Flanagan (O''Reilly) to get started. For your example to work with the Thacker script you cannot use "add_visit_for_this_Pt[1]" etc because when the script searches for document.myform.add_visit_for_this_Pt it will not find anything. There isn''t an element or list of elements with the "name add_visit_for_this_Pt". There is an element with name "add_visit_for_this_Pt[1]". This is a bit subtle. Study the working example below and see if you can make sense if it. I think that "add_vista_for_this_Pt[1]" and "add_vista_for_this_Pt[2]" are not seen by the JavaScript as elements of an array. However if you have multiple checkboxes with the name "add_vista_for_this_Pt" then javascript sees them all as part of an array. Setting the checked attribute to true or false seems to work. Also this is a perfect question for comp.lang.javascript since this is not as much a Rails or Ruby question as it is JavaScript. I guess you will have to play more with this to get it working the way you want to with Rails. - Peter <html> <head> <script type="text/javascript"> function checkAll(field) { for (var i = 0; i < field.length; i++) field[i].checked = true ; } function uncheckAll(field) { for (var i = 0; i < field.length; i++) field[i].checked = false ; } </script> </head> <body> <form name="myform" action="addvisit" method="post"> Patient #1<input id="add_visit_for_this_Pt_1" name="add_visit_for_this_Pt" type="checkbox" /></br> Patient #2<input id="add_visit_for_this_Pt_2" name="add_visit_for_this_Pt" type="checkbox" /></br> Patient #4<input id="add_visit_for_this_Pt_4" name="add_visit_for_this_Pt" type="checkbox" /></br> Patient #8<input id="add_visit_for_this_Pt_8" name="add_visit_for_this_Pt" type="checkbox" /></br> Patient #9<input id="add_visit_for_this_Pt_9" name="add_visit_for_this_Pt" type="checkbox" /></br> <input type="submit" value="Add Visits"/> <button onClick="checkAll(document.myform.add_visit_for_this_Pt);return false;">Check All</button><button onClick="uncheckAll(document.myform.add_visit_for_this_Pt);return false;" >Uncheck All</button> </form> </body> </html> -- Posted via http://www.ruby-forum.com/.
Hunter Walker
2006-Apr-25 03:53 UTC
[Rails] Re: javascript in RoR page - Check ALL/uncheck ALL buttons
Thank you for your reply, Peter. The check boxes are being renamed by the erb, I think. Each checkbox has an ID value which is used to update a db (via an api). The erb is appending the value to the name and, you''re right, I think that is going to be unrecognizable to the javascript code. I need to figure out a way to get those values into the params hash which is passed back to the controller. Is there another way to create these check boxes with erb that won''t produce HTML with with the ID appended to the name? I''lll do as you suggested and post this question at comp.lang.javascript also. Thanks again! -- Posted via http://www.ruby-forum.com/.
Peter Michaux
2006-Apr-25 04:09 UTC
[Rails] Re: javascript in RoR page - Check ALL/uncheck ALL buttons
On 4/24/06, Hunter Walker <walkerhunter@gmail.com> wrote:> Thank you for your reply, Peter. The check boxes are being renamed by > the erb, I think.Yes> Each checkbox has an ID value which is used to update > a db (via an api). The erb is appending the value to the name and, > you''re right, I think that is going to be unrecognizable to the > javascript code. I need to figure out a way to get those values into > the params hash which is passed back to the controller. > > Is there another way to create these check boxes with erb that won''t > produce HTML with with the ID appended to the name?Actually you want the ID appended by the select_tag helper because it makes processing the submitted data easier. What you probably want to do is write new JavaScript that uses a regular expression to find the checkboxes of interest.> I''lll do as you suggested and post this question at comp.lang.javascript > also. Thanks again!They like one question at a time there and try to simplify it as much as possible to show you''ve worked on the question as much as you can. - Peter