Passing object names/show-hide tr

[Phantek]

First off, my apologies for asking such an easy one here. I am familiar with PHP but I have (foolishly) avoided Javascript up until this point.

I am trying to use both PHP and Javascript together. I am attempting to create a form where if you check off one checkbox, then a new table row will appear with more options in it.

This has worked fine when I hard-code in the name of the table row in the onclick. For example, onclick="trname.style.display='table-row'";

The problem is that I want to make a function do this as the names of the rows will be changing dynamically with PHP. Sadly, I do not know how to do this properly with Javascript. So, what I want to do is have in the checkbox input tag onclick call the function "showhide" and send the value of the checkbox (coincidentally the id of the table row).

I then want the function to determine if the checkbox is checked or not. If it is, it will set the table row's style.display='table-row', else it will set it to 'none'.

Anyone able to help me with this one? I am sure it is just something easy I am missing, but I am brand-new to Javascript and have not yet found a tutorial that can help with this. Thank you very much!

[Jordan]

If you are using PHP to set the ID of the checkboxes, you can use that same variable in the function call. IE:

$someIdVar = 'name' . rand(1,10);

// Table stuff here
echo "<input type='checkbox' id='$someIdVar' onclick='showhide($someIdVar)'>"; 

When clicked, showhide will then have the ID of the checkbox and can use JavaScript to check if it is checked or not.

[Phantek]

Thank you, Jordan, that is a big help.

I guess at this point, I really don't know what to write in the function itself!

[Jordan]

Here is how I would write the whole thing:


JavaScript Function to showhide

function showhide(box,id)  
{ 
 var elm = document.getElementById(id) 
 elm.style.display = box.checked? "inline":"none" 
}

HTML/PHP:

someIdVar = 'name' . rand(1,10);

// Table stuff here
echo "<div id='$someIdVar'>";
echo "<input type='checkbox' onclick='showhide(this, $someIdVar)'>"; 
echo "</div>"; 

Untested.

[Phantek]

Thank you very much for your help. I tried that, but I got an error that I keep getting every time I tried something new with this. I get an error saying "Object required" on the line you gave saying:

elm.style.display = box.checked? "inline":"none"

[Phantek]

Figured it out! I needed to pass the variable name in quotes - thank you very much for your help, Jordan!