Forum: Ruby on Rails javascript in RoR page - Check ALL/uncheck ALL buttons

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
Hunter W. (Guest)
on 2006-04-25 00:13
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>
Hunter W. (Guest)
on 2006-04-25 02:56
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>
peter michaux (Guest)
on 2006-04-25 07:33
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>
Hunter W. (Guest)
on 2006-04-25 07:50
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!
Peter M. (Guest)
on 2006-04-25 08:10
(Received via mailing list)
On 4/24/06, Hunter W. <removed_email_address@domain.invalid> 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
This topic is locked and can not be replied to.