Outputting HTML when checkbox is checked (Javascript) 1

[gio2888]

<table border=&quot;1&quot; rules=ALL width=&quot;600&quot;>

<tr>
<td valign=&quot;top&quot;>
* Lost Key&nbsp;&nbsp; <input type=&quot;checkbox&quot; name=&quot;lost_key&quot; onclick=&quot;lost_key_onclick()&quot;>
</td>
</tr>

</table>

<script language=&quot;JavaScript&quot;>
<!--


function lost_key_onclick(){
if (document.form0.lost_key.checked){
document.writeln (&quot;<table>&quot
document.writeln (&quot;<tr>&quot
document.writeln (&quot;<td>Reason:</td>&quot
document.writeln (&quot;</tr>&quot
document.writeln (&quot;<tr>&quot
document.writeln (&quot;<td>&quot
document.writeln (&quot;<textarea rows='10' cols='50' name='lostkey_reason'>&quot
document.writeln (&quot;</textarea>&quot
document.writeln (&quot;</td>&quot
document.writeln (&quot;</tr>&quot
document.writeln (&quot;</table>&quot
}
return true
}

-->
</SCRIPT>

Hi, I just want to know how to output it on the same form, instead of outputing a new form. Thanks!

 

[Targol]

I think a better way to do it is to do the following :

<table border=&quot;1&quot; rules=ALL width=&quot;600&quot;>
    
    <tr> 
        <td valign=&quot;top&quot;>
            * Lost Key   <input type=&quot;checkbox&quot; name=&quot;lost_key&quot; onclick=&quot;lost_key_onclick()&quot;>
        </td>
    </tr>
</table>
<Div id=&quot;lost_key_div&quot; style=&quot;display : none;&quot;>
    <table>
      <tr>
        <td>Reason:</td>
      </tr>
      <tr>
        <td>
          <textarea rows='10' cols='50' name='lostkey_reason'></textarea>
        </td>&quot;)
      </tr>&quot;) 
    </table>&quot;)
</DIV>
<script language=&quot;JavaScript&quot;>
<!--


function lost_key_onclick(){
    if (document.form0.lost_key.checked){ 
       document.form0.lost_key_div.style=&quot;display : inline;&quot;;
    } 
    return true
}

After, play with style to make it apear as you want (height, width, overflow, ...). Water is not bad as soon as it stays out human body ;-)

 

[gio2888]

I got an error on the line
document.form0.lost_key_div.style=&quot;display : inline;&quot;;

it saids that document.form0.lost_key_div is null or not an object.

help! thanks!

 

[starway]

It's because &quot;lost_key_div&quot; is not an element of a form named &quot;fonm0&quot;. It should be this:

document.getElementById('lost_key_div').style.display = &quot;inline&quot;;

 

[Targol]

I assumed that all the code you gave was part of the form. But by the way (would you confirm this Starway ?) a &quot;div&quot; element is never an element from a &quot;form&quot; element that only contains input, submit and reset elements. Water is not bad as soon as it stays out human body ;-)

 

[starway]

Div (like any other page formatting element) has nothing in common with forms and their elements.

Using document.getElementById() structure (it not is available for v.4 browsers) you can reference both page formatting elements and form elements.
And it is the only the only way to access page formatting elements.

It is recommended though to use good old &quot;document.formname.elementname&quot; to access form elements for backward compatibility with older browsers.

 

[Targol]

A star for a star(way) that lighted my dark mind !!! Water is not bad as soon as it stays out human body ;-)