Allegro.cc - Online Community

Allegro.cc Forums » Programming Questions » [HTML/Javascript] Checkbox and table visibility

Credits go to Matthew Leverton for helping out!
This thread is locked; no one can reply to it. rss feed Print
[HTML/Javascript] Checkbox and table visibility
ngiacomelli
Member #5,114
October 2004

I have a table which contains an array of checkboxes:

<table><tr>
<td><input type="checkbox" name=check_array[]></td>
<td>...</td>
</tr><tr>
<td colspan="2">
[Some text here]
</td>
</tr></table>

Now, what I would like to happen is that when the checkbox is ticked, the row beneath ('[Some text here']) becomes visible. When it is unchecked, it disappears.

I'm looking for a lightweight but portable solution. Any suggestions?

Matthew Leverton
Supreme Loser
January 1999
avatar

In general:

<script type="text/javascript">
document.getElementById("foo").style.display = "none";  // to hide it
document.getElementById("foo").style.display = "";      // to bring it back to life
</script>

<div id="foo" style="display: none"></div>

The reason I use "" to bring it back is because different browsers use different values for some table tags. By setting it to "", it is going back to the browser default.

ngiacomelli
Member #5,114
October 2004

Thanks for the speedy reply. However, I'll be the first to confess I know very little with regards to JavaScript.

I wrote the following function:

  function sectionVisiblity(id)
  {

      if( document.getElementById(id).style.display != "none" ) {
    document.getElementById(id).style.display = "none";
      } else {
        document.getElementById(id).style.display = "";
      }
  }

If I view source the HTML code that my PHP generates, everything looks to be in order.

<input type="checkbox" name=item_id[] value="21" onclick="sectionVisibility('inv_option1');">

...

<div id="inv_option1" style="display: none">
Test!
</div>

But I'm not having much luck!

Matthew Leverton
Supreme Loser
January 1999
avatar

First of all, I'd do it this way:

function sectionVisiblity(id, visible)
{
  if (visible) ...
}

<input type="checkbox" name=item_id[] value="21" onclick="sectionVisibility('inv_option1', this.checked);">

Make sure you are using Firefox with Firebug. Open up the console and investigate any reported errors. You can use console.log("foo") to send messages to the console.

ngiacomelli
Member #5,114
October 2004

Oh! Firebug is really handy!

Of course, it always helps if you actually spell the function name correctly, in the first place! (D'oh!)

Thank you.

Matthew Leverton
Supreme Loser
January 1999
avatar

A tip with Firebug: you can console.log anything.

For instance:

x = [1, 2, 3, {foo: "bar", document.getElementById('body')}];
console.log(x);

The output in the console becomes clickable. So you can investigate what the variable contains, etc. It makes writing JS much less of a headache.

That, and the hover/inspect mode is incredibly useful.

Dustin Dettmer
Member #3,935
October 2003
avatar

Quote:

console.log

Ah ha! I'd been looking for the output method... Any other interesting attributes of console?

Matthew Leverton
Supreme Loser
January 1999
avatar

I just did this to find it:

for (each i in console) alert(i);

But I assume it has a manual somewhere.

BAF
Member #2,981
December 2002
avatar

ngiacomelli
Member #5,114
October 2004

I actually have a second Javascript question. I'm now looking to run through a form, checking every checkbox. If I find one that is checked, I'd like to execute a PHP function that'll use the checkboxes value to return an integer from the database. I'd like to add all of these integer values together and print some text if the value is >= a max value.

I'm totally lost on this one. If it is even possible.

Matthew Leverton
Supreme Loser
January 1999
avatar

This requires what people call "AJAX." I'd implement it without JavaScript first. And if you are adventurous, you can come back for more.

piccolo
Member #3,163
January 2003
avatar

here is a cgi implantation of it.
project2.cgi
 #!/usr/bin/perl
print "Content-type: text/html\n\n";


#foreach $key (sort keys(%ENV)) {
#      print "$key = $ENV{$key}<p>";
#         } 

$my_input = $ENV{QUERY_STRING};
$my_input2 = $my_input; 
@jih = split(/[+]/,$my_input2);
$my_input2=$jih[1];
$numbox = 0;


$_=$my_input2;
if(/flavor=vanilla/)
{
$numbox++;
}
if(/flavor=chocolate/)
{
$numbox++;
}
if(/flavor=strawberry/)
{
$numbox++;
}
if(/pref=yes/)
{
$numbox++;
}

@din = split(/=/,$my_input2);
$po=scalar(@din)-1;

#read(STDIN, $my_input, $ENV{CONTENT_LENGTH});


$my_input2  = join(", ",@din );

@din = split(/[&]/,$my_input2);
@din = join(" <br> \n",@din );
print qq  ~

<html>
<head>
<title> project2.cgi   </title>
</head>
<body>
~;

print "$my_input <br> <br>";

print @din ,"\n";



print qq  ~
<br>
<FORM><LABEL> <INPUT TYPE="checkbox" NAME="num_elements" VALUE="yes">num_elements = $po </LABEL></FORM>  
The # of boxs check is $numbox;
</body>
</html>~;
project2.html
<html>
<title>First cgi form</title>
<body>

<form action =" project2.cgi" method =" GET">

Please enter your name:<br>
<input type =" text" size = 50 name =" FullName">
<P>
<input type = SUBMIT value =" Send">
<input type = RESET value =" Clear">

	  <SELECT NAME="gourl">
	  <OPTION VALUE="">Choose a Destination...

	  <OPTION VALUE="../"                        >Guide Home Page
	  <OPTION VALUE="http://www.idocs.com"       >Idocs.com
	  <OPTION VALUE="http://www.ninthwonder.com" >Ninth Wonder

	  </SELECT>

	  <INPUT TYPE=SUBMIT VALUE="Go">
	  <div align="center"><br>
	  <input type="radio" name="group1" value="Milk"> Milk<br>
	  <input type="radio" name="group1" value="Butter" checked> Butter<br>
	  <input type="radio" name="group1" value="Cheese"> Cheese
	  <hr>
	  <input type="radio" name="group2" value="Water"> Water<br>
	  <input type="radio" name="group2" value="Beer"> Beer<br>
	  <input type="radio" name="group2" value="Wine" checked> Wine<br>
	  </div>

Check all the flavors of ice cream that you like:
<LABEL><INPUT TYPE="checkbox" NAME="flavor" VALUE="vanilla"> vanilla</LABEL>
<LABEL><INPUT TYPE="checkbox" NAME="flavor" VALUE="chocolate"> chocolate</LABEL>
<LABEL><INPUT TYPE="checkbox" NAME="flavor" VALUE="strawberry"> strawberry</LABEL>
 <LABEL>Check here if you like ice cream:
 <INPUT TYPE="checkbox" NAME="pref" VALUE="yes"></LABEL>

</FORM>

	  
</body>
</html>
here is the output.output [leda.capitol-college.edu]

wow
-------------------------------
i am who you are not am i

bamccaig
Member #7,536
July 2006
avatar

Nial Giacomelli said:

I actually have a second Javascript question. I'm now looking to run through a form, checking every checkbox. If I find one that is checked, I'd like to execute a PHP function that'll use the checkboxes value to return an integer from the database. I'd like to add all of these integer values together and print some text if the value is >= a max value.

When will you 'run through the form' and what will the PHP function do? If it can wait until the form is submitted than you could do it on the PHP end without AJAX (I use AJAX loosely since I don't even know what it really is - I simply know it's a combination of evil: JavaScript and XML).

When the form is submitted you process the form in PHP and generate the output based on the form. Does that sound sufficient or were you looking for it to happen on the fly?

If this PHP function doesn't do anything server related you could probably achieve the same result in JavaScript, assuming the client is JavaScript enabled.

Dustin Dettmer
Member #3,935
October 2003
avatar

Quote:

(I use AJAX loosely since I don't even know what it really is - I simply know it's a combination of evil: JavaScript and XML)

AJAX is the process in which one siphons money out of unsuspecting venture capitalists.

Jonatan Hedborg
Member #4,886
July 2004
avatar

Much like XML {no smiley here}

-------
Sweden: Free from the shackles of Democracy since 2008-06-18!

Go to: