Javascript: document.write based on checkbox status

Dev Shed Forums Sponsor:

October 23rd, 2001, 06:05 AM

cdr

Member

Join Date: Jan 2001

Location: UK

Posts: 25

Time spent in forums: < 1 sec
Reputation Power: 0

Javascript: document.write based on checkbox status

I'm currently trying to put together some JS which, when a checkbox is checked, displays another related form element underneath. If the checkbox isn't checked, it shouldn't appear.

I've got something sort of working:

Code:

<input type=checkbox name=suppreq value=1 onclick="if (document.reqnewbook.suppreq.checked == true) { document.write('<br><input type=text name=suppinfo>'); }">

My problem is that the document.write writes to a fresh page, not underneath the checkbox (i.e. when the box is checked, all that it displayed is the 'suppinfo' text box).

What's the best solution to this? Any help much appreciated.

cheers,

Chris

October 23rd, 2001, 02:30 PM

adios

Senior Citizen

Join Date: Jan 2001

Location: leftcoast

Posts: 2,019

Time spent in forums: < 1 sec
Reputation Power: 10

You didn't say the magic words

"must work in Netscape 4". If so, a little tricky, but doable. Otherwise, easy - toggle the style.visibility property of the optional form element as needed.

<input type="checkbox" name="suppreq" value="1" onclick=" this.form.suppreqtxt.style.visibility=(this.checked)?'visible':'hidden'"><br>
<input type="text" name="suppreqtxt" style="visibility:hidden;">

....or any number of other possible approaches. document.write() always clears the current document; not what you need.

October 24th, 2001, 06:47 AM

cdr

Member

Join Date: Jan 2001

Location: UK

Posts: 25

Time spent in forums: < 1 sec
Reputation Power: 0

Apparently some of the potential users of the app are still using Netscape 3! I've come up with a workaround in HTML - one of my colleagues laughed at me when I suggested writing cross-browser javascript code for the sake of one form element 'magically appearing'...

Thanks for your help anyway

November 12th, 2001, 05:51 AM

cdr

Member

Join Date: Jan 2001

Location: UK

Posts: 25

Time spent in forums: < 1 sec
Reputation Power: 0

Magically appearing elements revisited

Since my last post, I've decided to impose a minimum browser standard for my application and ignore NS3. I'd like to provide support for NS4 though, as many of the app's potential users are running NS Communicator 4.61 on Solaris.

So, I *would* like to have automagically appearing form elements as I've described above - but with NS4 compatibility... if it is doable, how so?

cheers,

Chris

November 12th, 2001, 06:39 AM

Humble Seeker

Contributing User

Join Date: Oct 2001

Location: London

Posts: 69

Time spent in forums: 1 h 1 m 54 sec
Reputation Power: 8

Why not have a textarea underneath the check box that is blank but when the check box is ticked it will fill in the details? This can be done with javascript, i.e.

<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
//
</SCRIPT>

<form name=exampleForm>
<input type=checkbox name=example1 onClick="showInfo('1')">Check this box to see the text<P>
<input type=checkbox name=example2 onClick="showInfo('2')">Check this box to see the more text<P>
<textarea name=exampleText cols=60 rows=3 readonly wordwrap></textarea><P>
</form>

This code allows you to select multiple checkboxs and display a piece of text about it in a textarea along with information about other checkboxs. Might no be exactly what you had in mind but it is browser independant. Hope it helps

__________________
Humble Seeker

The longest journey starts with the smallest step, and knowledge is the longest journey of all.

Last edited by Humble Seeker : November 12th, 2001 at 07:51 AM.

November 13th, 2001, 08:16 PM

adios

Senior Citizen

Join Date: Jan 2001

Location: leftcoast

Posts: 2,019

Time spent in forums: < 1 sec
Reputation Power: 10

Not up on "automagically" appearing elements, but here's what you need to cover NS4:

1) every hideable element in its own form, in its own layer
2) script to tie together the "virtual form"
2) a <table> to organize it

Like so:

<html>
<head>
<title>untitled</title>
<style type="text/css">
form {padding-top:18px;}
</style>
<script type="text/javascript" language="JavaScript">

function getCell(id) {
var c = document.all ? document.all(id) :
document.getElementById ? document.getElementById(id) :
document.layers ? document.layers['NS' + id].document.inner :
null;
return c;
}

function showInput(id,state) {
var c = getCell(id);
if (!c) return;
if (document.layers) {
c.visibility = state ? 'show' : 'hide';
} else {
c.style.background = 'beige'; //setting in HTML messes NS4
c.setAttribute('align','center'); //ditto
c.style.visibility = state ? 'visible' : 'hidden';
}
}

</script>
</head>
<body>
<div align="center"><br><br>

<table cellspacing="0" cellpadding="0" border="6" bgcolor="tan">

<tr><form><td align="top" bgcolor="#000000"><input name="CBX1" type="checkbox" value="cell1"
onclick="showInput(this.value,this.checked)"></td></form>
<td width="140"> <b>Enter Text 1</b></td></tr>
<tr><td id="cell1" colspan="2" valign="top" style="visibility:hidden;"><ilayer id="NScell1"><layer id="inner" visibility="hide" bgcolor="beige"><form><input name="t1" type="text" value=" text 1"></form></layer></ilayer></td>

<tr><form><td bgcolor="#000000"><input name="CBX2" type="checkbox" value="cell2"
onclick="showInput(this.value,this.checked)"></td>
<td> <b>Enter Text 2</b></td></form></tr>
<tr><td id="cell2" colspan="2" valign="top" style="visibility:hidden;"><ilayer id="NScell2"><layer id="inner" visibility="hide" bgcolor="beige"><form><input name="t2" type="text" value=" text 2"></form></layer></ilayer></td>
</tr></table>

</div>
</body>
</html>

The harder part is embedding a "virtual form" in the document - it's just a collection of hidden fields, each one with the same name as another field exposed to the user, layered or unlayered; onsubmit, a function reads all the exposed fields, writes them to the hidden ones, and submits. Much easier than it sounds. Sorry, but you can't break up a single form across multiple documents (as in NS4 layers).

November 16th, 2001, 06:48 AM

cdr

Member

Join Date: Jan 2001

Location: UK

Posts: 25

Time spent in forums: < 1 sec
Reputation Power: 0

<select>?

Progress: I won't be trying to implement this feature for NS4, I've got a workaround... but it will take the user longer to complete, so I'd still like to include visible/invisible form elements for IE5/NS6 users.

I've got a slight change in requirement now though; instead of the text field becoming visible when a checkbox is checked, I'd like to display it when a certain option is selected in a <select> dropdown. Is that as straightforward? I've been playing around with it this morning but no luck yet...

Can anyone help? adios?

cheers,

Chris

November 16th, 2001, 07:34 PM

adios

Senior Citizen

Join Date: Jan 2001

Location: leftcoast

Posts: 2,019

Time spent in forums: < 1 sec
Reputation Power: 10

Maybe they should start a separate forum for this:

http://forums.devshed.com/showthrea...25774&forumid=1

cdr - this technique - featuring the infamous "layer sandwich" (<td><ilayer><layer></layer></ilayer></td>) is the only reliable way to program NS4 table cells; once you get the hang of it it performs robustly enough to be used with aplomb (or at least a nectarine). Again:

http://forums.devshed.com/showthrea...11535&forumid=1

The 'virtual form' part is easy; if you post the <form> code I'll be glad to show you how it's done(http://www.faqts.com/knowledge_base...id/1132/fid/128)

rob

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: