By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
446,368 Members | 1,294 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 446,368 IT Pros & Developers. It's quick & easy.

Dynamic Page Building

P: n/a
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!!

Oct 4 '06 #1
Share this Question
Share on Google+
10 Replies


P: n/a
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!!
Oct 4 '06 #2

P: n/a
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!!
Oct 4 '06 #3

P: n/a
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.
Oct 4 '06 #4

P: n/a
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:none" 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.
Oct 4 '06 #5

P: n/a
On 2006-10-04 21:48:32 +0200, "Jen" <je*******@revealed.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.getElementById("rad1"),
r2:document.getElementById("rad2"),
d1:document.getElementById("div1"),
d2:document.getElementById("div2")})
{
// initially the divs should be hidden
d1.style.display=d2.style.display="none"

// radios can be switched with the mouse or keyboard
// so we handle both events
r1.onclick=r2.onclick=r1.onkeydown=r2.onkeydown=
function (e)
{
var s=["none","block"]

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

Oct 4 '06 #6

P: n/a
Jen
Thanks everyone!

I have found a piece of code that works beautifully:

function delay() {
setTimeout('toggle()','200');
}
function toggle() {
if (document.getElementById('contribution').checked === true) {
document.getElementById('divYes').style.display = "block"
document.getElementById('divNo').style.display = "none"
} else {
document.getElementById('divYes').style.display = "none"
document.getElementById('divNo').style.display = "block"

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

<p onmouseup="delay();"><input type="radio" name="contribution"
id="contribution" /Show<br />
<input type="radio" name="contribution" id="contribution" /Hide</p>

<div id="divYes">
<p>Content.Yes</p>
<p>Content.Yes</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*******@revealed.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.getElementById("rad1"),
r2:document.getElementById("rad2"),
d1:document.getElementById("div1"),
d2:document.getElementById("div2")})
{
// initially the divs should be hidden
d1.style.display=d2.style.display="none"

// radios can be switched with the mouse or keyboard
// so we handle both events
r1.onclick=r2.onclick=r1.onkeydown=r2.onkeydown=
function (e)
{
var s=["none","block"]

// show the div if the corresponding radio
// is turned on
d1.style.display=s[r1.checked]
d2.style.display=s[r2.checked]
}
}
--
David Junger
Oct 6 '06 #7

P: n/a
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.
Oct 7 '06 #8

P: n/a
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.
Oct 7 '06 #9

P: n/a
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.
Oct 7 '06 #10

P: n/a
ag******@gmail.com wrote:
>Matthom wrote:
Top posting on top posting, please don't!
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.
<snipped/>
>
You're copletely wrong, of course...

There is to my knowledge only two commonly used news-clents that
defaults to respond on top; "Google Groups (Web)", and "Outlook Express"

Both are very common among news-newbies, and give them the misconception
that that's is how its supposed to be.

The tradition of bottom posting, excactly so you can follow a tread
in natural order, is as old as usenet itself. And for a good reason

There's NOTHING more annoying then someone reply on top instead of
bottom, or weaving their answer into the post they're answering.
This should always be done together with snipping *everything*
else in the post that isn't relevant to what you're responding to.

That you use a broken news-client doesn't excuse you from learning
and respecting the tradition and preferences of the medium you're using.

--
Dag.
Oct 7 '06 #11

This discussion thread is closed

Replies have been disabled for this discussion.