Hi all
Happy xmas!!
I have a christmas task
I have a form in flash that I want to turn into js
I think jquery may be the way to do it but what is the best way to do this?
I have four options. When the user clicks on the option then a radio box and select option is shown (four different options).
What is the way to do this in js? Thank you!!
Here is how to do it where the radiobox/select appear when an option is selected
The HTML is what would appear when everything is visible
<form id="someForm">
<p>
<select name="someSelect">
<option value="">Please select</option>
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
<option value="value4">Value 4</option>
</select>
</p>
<div id="anotherSelect">
<p>
<input type="radio" name="someRadio" value="this"> This
<input type="radio" name="someRadio" value="that"> That
</p>
<p>
<select name="anotherSelect">
<option value="">Please select</option>
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
<option value="value4">Value 4</option>
</select>
</p>
</div>
</form>
When the page loads, we can hide the second paragraph
var anotherSelect = document.getElementById('anotherSelect');
anotherSelect.style.display = 'none';
And when the first select contains a valid value, we can show the second paragraph.
var form = document.getElementById('someForm');
form.elements.someSelect.onchange = function () {
if (this.selectedIndex > 0) {
anotherSelect.style.display = '';
} else {
anotherSelect.style.display = 'none';
}
}
Here is a working example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>This is a frameset</TITLE>
</HEAD>
<body>
<form id="someForm">
<p>
<select name="someSelect">
<option value="">Please select</option>
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
<option value="value4">Value 4</option>
</select>
</p>
<div id="anotherSelect">
<p>
<input type="radio" name="someRadio" value="this"> This
<input type="radio" name="someRadio" value="that"> That
</p>
<p>
<select name="anotherSelect">
<option value="">Please select</option>
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
<option value="value4">Value 4</option>
</select>
</p>
</div>
</form>
<script type"text/javascript">
"use strict";
var anotherSelect = document.getElementById('anotherSelect');
anotherSelect.style.display = 'none';
var form = document.getElementById('someForm');
form.elements.someSelect.onchange = function () {
if (this.selectedIndex > 0) {
anotherSelect.style.display = '';
} else {
anotherSelect.style.display = 'none';
}
}
</script>
</body>
</HTML>
Hi Paul
Thank you very much for the reply
It looks an interesting way, the initial select and option values would be a hrefs though so in stead of this code:
<p>
<select name="someSelect">
<option value="">Please select</option>
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
<option value="value4">Value 4</option>
</select>
</p>
what I want to implement is. Is this feasible?:
<p>
<a href="option1"><img src="image1">Option 1</a>
<a href="option2"><img src="image2">Option 2</a>
<a href="option3"><img src="image3">Option 3</a>
<a href="option4"><img src="image4">Option 4</a></select>
</p>
It sounds like then that you want a tabs solution. Of course, they don’t have to look like tabs, they could just be standard links. Having them visually as tabs though helps to clue the visitor in. If they are just links then the visitor expects to go to a different page. If they are instead tabs, the visitor knows that they are different sections of the same page.
Here are tabs that work without any javascript framework
http://labs.komrade.gr/simpletabs/
Here is the jQuery tabs solution
http://www.stilbuero.de/jquery/tabs_3/
The way they work is very simple. With SimpleTabs, you use one class name to define the area that contains the tabbed section, which includes a class name that specifies the whereabouts of the tabbed list, and a second class name for the content sections.
<div class="simpleTabs">
<ul class="simpleTabsNavigation">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab3 (and so on)</a></li>
</ul>
<div class="simpleTabsContent">Content here to be called when "Tab 1" is clicked.</div>
<div class="simpleTabsContent">Content here to be called when "Tab 2" is clicked.</div>
<div class="simpleTabsContent">Content here to be called when "Tab 3" is clicked.</div>
</div>
Hi Paul
Thanks again for the reply the tabs solution looks very interesting- the komrade tabs solution seems like a good one, without delving into the code quite yet it seems that I may be able to use images as well as in my example and also I can put in some javascript rollovers so that when users mouse over the tab header links they can show another image-I’ll check it out.
jquery gives me a headache, I find the documents very tricky indeed and no good tutorials, I will have to get a book on it to understnad it!!
Thanks again
JavaScript rollovers are nice, but you can get the same job done using css instead. There’s less code overhead, and it works for folks who have JavaScript turned off. Just something to consider. 
Yes css would be great to use but it seems it will only work
“in browsers with a version number of 5 or higher, and even then there’s no universal support. Some of them may even lead to mangled display in Navigator 4.x, but that’s only to be expected when you take standards and push them to their limits.”
I will try and create a pure css solution that would mean a quicker loading page which is something I want but if the js works for everyone (except those with js turned off) then that is fine. Thanks for the input
[tongue in cheek] And while we’re at it we shouldn’t forget about the people using version 2 browsers which were the first browsers to use JavaScript. And then there are the version 1 browsers, like Netscape 1 and Mosaic. They don’t support scripting at all, so any inline script that you use needs to be commented out with HTML comment tags to prevent the script from being displayed to the user.[/tongue]
The trouble with taking support to the extents of version 4 or version 5 browsers, there is a vast collection of more modern browsers that enjoy a much larger userbase.
Perhaps you can clarify for us the browsers that you intend to support. Please feel free to use use Yahoo’s graded browser support chart for inspiration.