Dynamic Page Building

[Jen]

I have a form that has two radio buttons. When the first one is
clicked, I would like the page to refresh (keeping the form data in
tact) and then displaying 2 new fields that need to be filled out. If
the second button is clicked, I need the same thing to happen, only it
will display two different fields needing to be filled out.

Does anyone have code that will do this? Or is this even possible with
JavaScript?

Thanks!!

[Gary Hasler]

Easiest way would be to put the 2 new fields in block elements like
divs, set their initial style to
display:none, then with the radio buttons have an onclick event handler
that sets the appropriate div to display:block and the other div to
display:none. Then there is no refreshing required.

Jen wrote:

>
I have a form that has two radio buttons. When the first one is
clicked, I would like the page to refresh (keeping the form data in
tact) and then displaying 2 new fields that need to be filled out. If
the second button is clicked, I need the same thing to happen, only it
will display two different fields needing to be filled out.

Does anyone have code that will do this? Or is this even possible with
JavaScript?

Thanks!!

[Matthom]

You can easily do this with basic DOM scripting. You can add and remove
HTML elements, based on a users action - ie: clicking a specific radio
button.

The problem with using "display: none" is that even though it's
"hidden" from view, it still represents screen space, ie: a GAP on the
page where the HTML content actually is, if that makes sense.

DOM scripting is the way to go. You have full control over many things.

Gary Hasler wrote:

Easiest way would be to put the 2 new fields in block elements like
divs, set their initial style to
display:none, then with the radio buttons have an onclick event handler
that sets the appropriate div to display:block and the other div to
display:none. Then there is no refreshing required.

Jen wrote:

I have a form that has two radio buttons. When the first one is
clicked, I would like the page to refresh (keeping the form data in
tact) and then displaying 2 new fields that need to be filled out. If
the second button is clicked, I need the same thing to happen, only it
will display two different fields needing to be filled out.

Does anyone have code that will do this? Or is this even possible with
JavaScript?

Thanks!!

[Ian Collins]

Matthom wrote:

Top posting on top posting, please don't!

Gary Hasler wrote:

>>Jen wrote:

>>>I have a form that has two radio buttons. When the first one is
clicked, I would like the page to refresh (keeping the form data in
tact) and then displaying 2 new fields that need to be filled out. If
the second button is clicked, I need the same thing to happen, only it
will display two different fields needing to be filled out.

Does anyone have code that will do this? Or is this even possible with
JavaScript ?

Easiest way would be to put the 2 new fields in block elements like
divs, set their initial style to
display:non e, then with the radio buttons have an onclick event handler
that sets the appropriate div to display:block and the other div to
display:non e. Then there is no refreshing required.

You can easily do this with basic DOM scripting. You can add and remove
HTML elements, based on a users action - ie: clicking a specific radio
button.

The problem with using "display: none" is that even though it's
"hidden" from view, it still represents screen space, ie: a GAP on the
page where the HTML content actually is, if that makes sense.

No, "display: none" removes the element form the page.

DOM scripting is the way to go. You have full control over many
things.

It's easier just to use a visible and invisible CSS class and swap the
element's class name.

--
Ian Collins.

[Gary Hasler]

Matthom wrote:

The problem with using "display: none" is that even though it's

"hidden" from view, it still represents screen space, ie: a GAP on the
page where the HTML content actually is, if that makes sense.

No, if it's set to "display:no ne" it should not take space in the layout
at all. The rest of the page should slide up/down as it is shown or
hidden.

[Touffy]

On 2006-10-04 21:48:32 +0200, "Jen" <je*******@reve aled.netsaid:

I have a form that has two radio buttons. When the first one is
clicked, I would like the page to refresh (keeping the form data in
tact)

Doing this by "refreshing " the page is a server-side, extremely
inefficient, and long outdated method.

You don't want the page to refresh. You want to update part of it, and
if I understand correctly, you don't need to retrieve data from the
server.

and then displaying 2 new fields that need to be filled out. If
the second button is clicked, I need the same thing to happen, only it
will display two different fields needing to be filled out.

The best way to do this would be:

- add 2 divs just below the radio buttons, each of them containing the
2 extra fields for one of the radio buttons. Do this in pure HTML, this
content should not be generated by JavaScript (that way, it remains
accessible, and it's easier to use anyway). Of course, if there were a
large or undetermined number of additional fields, you would have to
generate them dynamically.

- give each div and radio an id so you can grab them in the script. For
example, the radios have the ids "rad1" and "rad2" and the divs "div1"
and "div2".

- dynamically hide or show the divs when the user toggles the radio
buttons. That can be done in JavaScript with something like this:
with({ // just setting some private shortcuts.
r1:document.get ElementById("ra d1"),
r2:document.get ElementById("ra d2"),
d1:document.get ElementById("di v1"),
d2:document.get ElementById("di v2")})
{
// initially the divs should be hidden
d1.style.displa y=d2.style.disp lay="none"

// radios can be switched with the mouse or keyboard
// so we handle both events
r1.onclick=r2.o nclick=r1.onkey down=r2.onkeydo wn=
function (e)
{
var s=["none","blo ck"]

// show the div if the corresponding radio
// is turned on
d1.style.displa y=s[r1.checked]
d2.style.displa y=s[r2.checked]
}
}
--
David Junger

[Jen]

Thanks everyone!

I have found a piece of code that works beautifully:

function delay() {
setTimeout('tog gle()','200');
}
function toggle() {
if (document.getEl ementById('cont ribution').chec ked === true) {
document.getEle mentById('divYe s').style.displ ay = "block"
document.getEle mentById('divNo ').style.displa y = "none"
} else {
document.getEle mentById('divYe s').style.displ ay = "none"
document.getEle mentById('divNo ').style.displa y = "block"

}
}
<style type="text/css">
#divYes { display:none }
#divNo { display:none }
</style>
<body>

<p onmouseup="dela y();"><input type="radio" name="contribut ion"
id="contributio n" /Show<br />
<input type="radio" name="contribut ion" id="contributio n" /Hide</p>

<div id="divYes">
<p>Content.Ye s</p>
<p>Content.Ye s</p>
</div>
<div id="divNo">
<p>Content.No </p>
<p>Content.No </p>
</div>
</body>

Thanks!
Touffy wrote:

On 2006-10-04 21:48:32 +0200, "Jen" <je*******@reve aled.netsaid:

I have a form that has two radio buttons. When the first one is
clicked, I would like the page to refresh (keeping the form data in
tact)

Doing this by "refreshing " the page is a server-side, extremely
inefficient, and long outdated method.

You don't want the page to refresh. You want to update part of it, and
if I understand correctly, you don't need to retrieve data from the
server.

and then displaying 2 new fields that need to be filled out. If
the second button is clicked, I need the same thing to happen, only it
will display two different fields needing to be filled out.

The best way to do this would be:

- add 2 divs just below the radio buttons, each of them containing the
2 extra fields for one of the radio buttons. Do this in pure HTML, this
content should not be generated by JavaScript (that way, it remains
accessible, and it's easier to use anyway). Of course, if there were a
large or undetermined number of additional fields, you would have to
generate them dynamically.

- give each div and radio an id so you can grab them in the script. For
example, the radios have the ids "rad1" and "rad2" and the divs "div1"
and "div2".

- dynamically hide or show the divs when the user toggles the radio
buttons. That can be done in JavaScript with something like this:
with({ // just setting some private shortcuts.
r1:document.get ElementById("ra d1"),
r2:document.get ElementById("ra d2"),
d1:document.get ElementById("di v1"),
d2:document.get ElementById("di v2")})
{
// initially the divs should be hidden
d1.style.displa y=d2.style.disp lay="none"

// radios can be switched with the mouse or keyboard
// so we handle both events
r1.onclick=r2.o nclick=r1.onkey down=r2.onkeydo wn=
function (e)
{
var s=["none","blo ck"]

// show the div if the corresponding radio
// is turned on
d1.style.displa y=s[r1.checked]
d2.style.displa y=s[r2.checked]
}
}
--
David Junger

[agapeton]

Actually posting on top is what most groups application do for us...
rightly so too. There's NOTHING more annoying then someone reply
weaving in and out of a message... it's nearly impossible to find what
someone is saying.

EOT.

Ian Collins wrote:

Matthom wrote:

Top posting on top posting, please don't!

Gary Hasler wrote:

>Jen wrote:

I have a form that has two radio buttons. When the first one is
clicked, I would like the page to refresh (keeping the form data in
tact) and then displaying 2 new fields that need to be filled out. If
the second button is clicked, I need the same thing to happen, only it
will display two different fields needing to be filled out.

Does anyone have code that will do this? Or is this even possible with
JavaScript?

Easiest way would be to put the 2 new fields in block elements like
divs, set their initial style to
display:none , then with the radio buttons have an onclick event handler
that sets the appropriate div to display:block and the other div to
display:none . Then there is no refreshing required.

You can easily do this with basic DOM scripting. You can add and remove
HTML elements, based on a users action - ie: clicking a specific radio
button.

The problem with using "display: none" is that even though it's
"hidden" from view, it still represents screen space, ie: a GAP on the
page where the HTML content actually is, if that makes sense.

No, "display: none" removes the element form the page.

DOM scripting is the way to go. You have full control over many
things.

It's easier just to use a visible and invisible CSS class and swap the
element's class name.

--
Ian Collins.

[agapeton]

Actually posting on top is what most groups application do for us...
rightly so too. There's NOTHING more annoying then someone reply
weaving in and out of a message... it's nearly impossible to find what
someone is saying.

EOT.

Ian Collins wrote:

Matthom wrote:

Top posting on top posting, please don't!

Gary Hasler wrote:

>Jen wrote:

I have a form that has two radio buttons. When the first one is
clicked, I would like the page to refresh (keeping the form data in
tact) and then displaying 2 new fields that need to be filled out. If
the second button is clicked, I need the same thing to happen, only it
will display two different fields needing to be filled out.

Does anyone have code that will do this? Or is this even possible with
JavaScript?

Easiest way would be to put the 2 new fields in block elements like
divs, set their initial style to
display:none , then with the radio buttons have an onclick event handler
that sets the appropriate div to display:block and the other div to
display:none . Then there is no refreshing required.

You can easily do this with basic DOM scripting. You can add and remove
HTML elements, based on a users action - ie: clicking a specific radio
button.

The problem with using "display: none" is that even though it's
"hidden" from view, it still represents screen space, ie: a GAP on the
page where the HTML content actually is, if that makes sense.

No, "display: none" removes the element form the page.

DOM scripting is the way to go. You have full control over many
things.

It's easier just to use a visible and invisible CSS class and swap the
element's class name.

--
Ian Collins.

[Ian Collins]

ag******@gmail. com wrote:

Actually posting on top is what most groups application do for us...

No it isn't. It is also considered rude in most technical news groups.

--
Ian Collins.