writing html at a particular position in a form

[Amandeep]

How can i reach a particular place in a form and write html tags there using documnet.write() on chosing one of the option in the radio button group.

I have a form which consists of 10 textboxes in two groups of five each.After the first group of five ends i have two radio button options which decides whether the next group of 5 textboxes appear or not, if the user opts for the full form then i have to show the other five textboxes otherwise not. I managed to do this through the <div> tag but i have a scroll for the remaining textboxes which are hidden when the form is intailly loaded.How can i remove this scroll.

[joh6nn]

can you be a bit more specific? i'm not exactly sure what you're talking about

[God]

do you mean you want to write the html inside of the <FORM></FORM> tags, or inside of the input elements?

[RadarBob]

I wondered that same thing a few months ago. I decided you can't. You have to do it server-side; or use "the" Document Object Model. You need NN6.0+ or IE5.0+ to use the DOM. And NN and IE DOM support is pretty different w/ some adherience to the standard.

[God]

I'm still not quite sure what you're talking about. can you post the code you're working with?

[RadarBob]

"omipresent"; not omniscient. ;)

[tommysphone]

Do you want a pre defined section of text to appear when a selection is made from a drop down? If so, you can do this.

Into the form insert some layers (tables with ID's and a display value of none)
In the drop down, use an onchange reference to the script you code that calls the layer depending on the option selected.

If this is not what you want to achieve then my appologies.

In the head tag
<script language="JavaScript">
var PrevTableNo = '0'
var strReasonCodes = new Array();
strReasonCodes[0] = 'AB';
strReasonCodes[1] = 'ABC';
strReasonCodes[2] = 'ABCD';
strReasonCodes[3] = 'ABCDE';

function ShowInfo(TableNo) {
eval('document.all.Table' + PrevTableNo + '.style.display="none"');
PrevTableNo = TableNo;
eval('document.all.Table' + TableNo + '.style.display="block"');
document.frmName.txtReasonCode.value = strReasonCodes[TableNo];
}
</script>

The form

<form method="POST" name="frmName">
<table border="0" cellpadding="0" cellspacing="0" width="486">
<tr>
<td class="form-col1" width="198"><font face="Tahoma" size="2" color="white"><b>Disconnect
Reason:</b></font></td>
<td class="form-col2" width="288"><font face="Tahoma" size="2" color="white"><b><select
name="pdmDisconnectReason" size="1" onChange="ShowInfo(this.selectedIndex)" tabindex="14"
style="font-size: 10pt">
<option value="Select">Select</option>
<option value="Title2">Title2</option>
<option value="Title3">Title3</option>
<option value="Title4">Title4</option>
</select>Reason Code: <input type="text" name="txtReasonCode" value="AB" size="6"
style="font-size: 10pt"></b></font> </td>
</tr>
<tr>
<td class="form-section" colspan="2" width="486"><table border="0" width="100%"
cellspacing="0" cellpadding="0">
<tr>
<td><table id="Table0" style="display: block" border="0" cellspacing="0" cellpadding="0"
width="100%">
<tr>
<td bgcolor="#FFFFFF" width="682"><font color="#000000"><strong>Title1</strong></font></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" width="682"><ul>
<li><font color="#000000">Some words here</font></li>
</ul>
</td>
</tr>
</table>
<table id="Table1" style="display: none" border="0" cellspacing="0" cellpadding="0"
width="100%">
<tr>
<td bgcolor="#FFFFFF" width="682"><font color="#000000"><strong>Title2</strong></font></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" width="682"><ul>
<li><font color="#000000">Stuff</font></li>
<li><font color="#000000">Stuff</font></li>
</ul>
</td>
</tr>
</table>
<table id="Table2" style="display: none" border="0" cellspacing="0" cellpadding="0"
width="100%">
<tr>
<td bgcolor="#FFFFFF" width="682"><font color="#000000"><strong>Title3</strong></font></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" width="682"><ul>
<li><font color="#000000">on and on and on</font></li>
<li><font color="#000000">More stuff</font></li>
</ul>
</td>
</tr>
</table>
<table id="Table3" style="display: none" border="0" cellspacing="0" cellpadding="0"
width="100%">
<tr>
<td bgcolor="#FFFFFF" width="682"><font color="#000000"><strong>Title4</strong></font></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" width="682"><ul>
<li><font color="#000000">Please refer to...</font></li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>

[RadarBob]

tommysphone;
In trying to grock that code w/out actually running it (I get "snow blindness" when looking about more than about 12 lines of my own code :o )

That code will make stuff appear (to put it generically) right "there" on the web page, yes? BUT you have to account for the maximum amount of stuff that must fit in there. In other words you account for X number of <tr>s and <td>s. That number is fixed, yes?

The issue that I eluded to in my last post above is that I wanted to dynamically add and delete table rows. Not simply code a fixed number of rows and then hide/appear them individually.

The only way I could actually create new HTML elements (rows in my case), without making a "loop" through my database and rebuilding the page on the server, was to use THE Document Object Model. Worked well by the way.

The attached file is a stand-alone web page that demonstrates what I'm talking about. The code is busy w/ data objects I built, but the crux of the thing is adding and deleting table rows on the fly.

Because of the parent-child heirarchy of the DOM, by attaching my newly created rows (or any HTML element for that matter) to a specific "parent" that element shows up "right there" at that specific spot on the page.

This code was tested only in windows IE 5.5.

[tommysphone]

Well, your spot on with your note below. But now I fear I cannot help further. Thats not to say I'm gonna try but I have not got the answer you're looking for. Sorry. At least I had a go :)

[brothercake]

Originally posted by Amandeep
How can i remove this scroll.

Are you using visibility to control the DIV's appearance? If so, use display instead:

obj.style.display="inline";
obj.style.display="block";
obj.style.diplsya="none";