[sypher]

Its not often i ask for help on here, so any would be appreciated

A client wants a contact form, wherein the user clicks certain radio buttons and depending on the choice it shows more form data.

I've got it to work so that when the user clicks the radio buttons it changes the display of a specific div to 'block'.
But the problem lies in that the user can only choose 1 of the radio buttons, not multiple. So if they click one then the other etc all the div's get shown.

I can make it so once one is chosen then they click another the other disappears (using the onblur) BUT it happens to ANY form fields on the page. Meaning when they fill in some more information below that div disappears again.

Heres the css

        <label>
          <input type="radio" name="Business Type" value="Residential" onclick="hideshow(document.getElementById('Residential'))" onblur="hideshow(document.getElementById('Residential'))" />
          <strong>Residential</strong></label>
        - (care homes, hotels etc.)<br />
        <label>
          <input type="radio" name="Business Type" value="Commercial" onclick="hideshow(document.getElementById('Commercial'))" onblur="hideshow(document.getElementById('Commercial'))" />
          <strong>Commercial</strong></label>
        - (shop, pub, club etc.)<br />
        <label>
          <input type="radio" name="Business Type" value="Industrial" onclick="hideshow(document.getElementById('Industrial'))" onblur="hideshow(document.getElementById('Industrial'))" />
          <strong>Industrial</strong></label>
        - (factory, warehouse etc.) <br />
		        <label>
          <input type="radio" name="Business Type" value="Transport" onclick="hideshow(document.getElementById('Transport'))" onblur="hideshow(document.getElementById('Transport'))" />
          <strong>Transport</strong></label>
        - (train station, airport etc.) <br />
        <label>
          <input type="radio" name="Business Type" value="Outdoor Event" onclick="hideshow(document.getElementById('Outdoor'))" onblur="hideshow(document.getElementById('Outdoor'))" />
          <strong>Outdoor Event</strong></label>
        - (concerts, firework displays etc.) <br />
        <label>
          <input type="radio" name="Business Type" value="Other" onclick="hideshow(document.getElementById('Other'))" onblur="hideshow(document.getElementById('Other'))" />
          <strong>Other</strong></label>

[benbacardi]

You ought to look at doing this with JQuery, it'd be really quite simple... I don't have time to knock an example up right now but I'm sure someone else can.

[sypher]

The problem is, this is the only javascript on the whole site. So i want to keep the file load down. I'd prefer not to use a library for one function seems kind of overkill.

[benbacardi]

Linking to Google's hosted version of JQuery will cut the code down anyway, because the chances of your visitor already having it cached is quite high.

[haku]

I'm pretty sure I can probably help you with this, but I didn't fully get your explanation.

[sypher]

Hey haku.
I have a series of radio buttons. Depending on the choice they pick different information is shown. Only one box can be ticked at any one time (and only one set of information should be shown at any one time)

I can currently make the information show, when the radio button is clicked. But if they then click the next radio button (say if they made a mistake and ticked wrong box) it then shows another set of information. But the original first set of information doesnt disappear.

So i need a way to make the old set of info dissapear once a new set is clicked.

[haku]

I get what you are saying. This is one way I would do it - it's probably not the most efficient way, but it's what I can come up with right now. With more time, I could probably make it a little more efficient.

Set each of the hidden divs with an id. Use CSS to set the display of the hidden Divs to none. Then, create a function for each of the radio buttons that is executed when the document is loaded. Inside the function, first capture each of the hidden divs using document.getElementById, and set those divs into variables. Then create an onfocus/onclick event handler for the radio button in question. Inside the onfocus/onclick functions, use javascript to set the display of the elements you DONT want to see to none, and set the display of the elements you do want to see to block.

I put up an example for you here. All the code is contained in that page, so if you view source, you should be able to figure out a way to do it, either by copying my code, or adjusting yours.

javascript

function setRadio1()
{
	var div1 = document.getElementById("div1")
	var div2 = document.getElementById("div2")
	var target = document.getElementById("radio1")
	target.onclick = function()
	{
		div1.style.display = "block"
		div2.style.display = "none"
	}
}

function setRadio2()
{
	var div1 = document.getElementById("div1")
	var div2 = document.getElementById("div2")
	var target = document.getElementById("radio2")
	target.onfocus = function()
	{
		div1.style.display = "none"
		div2.style.display = "block"
	}
}
window.onload = function()
{
	setRadio1()
	setRadio2()
}

xhtml

	<input type="radio" id="radio1" name="radio" />radio1
	<input type="radio" id="radio2" name="radio" />radio2

<div id="div1">Div 1</div>
<div id="div2">Div 2</div>

[marcamos]

benbacardi, on Sep 23 2008, 04:47 PM, said:

Linking to Google's hosted version of JQuery will cut the code down anyway, because the chances of your visitor already having it cached is quite high.

[Just a quick off-topic question] Ben, where do you go to see/use that actual URL?

[WeeManDan]

This is the link I think, it's what Ben put in my blog for jquery:

http://jqueryjs.googlecode.com/files/jquery-1.2.6.js

[marcamos]

WeeManDan, on Sep 24 2008, 06:34 AM, said:

This is the link I think, it's what Ben put in my blog for jquery:

http://jqueryjs.googlecode.com/files/jquery-1.2.6.js

Obviously, that's a particular version - is there a link that always points to the latest version?

[benbacardi]

I don't know - I just got the link from http://code.google.com/p/jqueryjs/

[haku]

There is a good possibility they don't have a link to the latest version, as changing the version could potentially result in errors or unexpected behavior, and since the programmer isn't likely to notice for a while, their site may not work without them realizing.

[sypher]

haku, on Sep 24 2008, 07:43 AM, said:

I get what you are saying. This is one way I would do it - it's probably not the most efficient way, but it's what I can come up with right now. With more time, I could probably make it a little more efficient.

Set each of the hidden divs with an id. Use CSS to set the display of the hidden Divs to none. Then, create a function for each of the radio buttons that is executed when the document is loaded. Inside the function, first capture each of the hidden divs using document.getElementById, and set those divs into variables. Then create an onfocus/onclick event handler for the radio button in question. Inside the onfocus/onclick functions, use javascript to set the display of the elements you DONT want to see to none, and set the display of the elements you do want to see to block.

I put up an example for you here. All the code is contained in that page, so if you view source, you should be able to figure out a way to do it, either by copying my code, or adjusting yours.

Thanks haku ill give it a try

[sypher]

Got it working, thanks again Haku I owe you one.

If you need anything just let me know.

[haku]

I could use a beer But other than that, I'm doing fine. Glad to help!

sypher, on Sep 25 2008, 01:26 PM, said:

Got it working, thanks again Haku I owe you one.

If you need anything just let me know.