Help with form and javascript to a newcomer please

JavaScript
1

Hi,

This is my first questoin or my first post.

I want to add javascript to my form to populate some things (select boxs, checkboxes etc) when a item from the select box is clicked.

I also want to add a background color and an image at the end of the option.

The image like a check mark that this option is selected.

Can somebody help me to do that?

I am new to javascript so i dont have the code. I am still learning.

My code for the form :


<select id="mylist" name="mylist" size="9" style="width:150px;">
       <option value="1">Option 1 </option>
       <option value="2">Option 2 </option>
       <option value="3">Option 3 </option>
       <option value="4">Option 4 </option>
       <option value="5">Option 5 </option>
       <option value="6">Option 6 </option>
       <option value="7">Option 7 </option>
       <option value="8">Option 8 </option>

</select>
          <br />
Name : <br />
<input type="text" name="name" id="name"><br />
Email : <br />
<input type="text" name="email" id="email"><br />
<div id="dynamic" style="display:none;">
</div>
Comments : <br />
<textarea name="comments" id="comments" cols="22"></textarea> <br />
<input type="submit" name="submit" value="submit info">
2
  1. Group those selects and checkboxes in DIV elements, or other appropriate ones, each group with a unique identifier.
  2. When the page first starts, use scripting to hide those groups. A useful way is to trigger the select elements onchange event because…
  3. When the select onchange event is triggered, hide all the groups and then if appropriate, reveal the selected one.

Setting things like option color and background image are where CSS gets involved.

When the onchange event is fired, you would do two different things.

  1. remove a class name (perhaps “active”) from all of the options
  2. set the “active” class name on the selected option

Your CSS code then performs the job of coloring and setting a background image on the selected option.

3

How do i go about creating an array to hold the div thats common to some select values ??

Is it possible? I need this cause i am thinking to populate the select boxes from database. And there will be many select boxes but only one will be displayed at a time.

And i want to create an array for the form fields that will be common to some select options.

Thank you Sir.

4

I agree with pmw. The only thing I would do differently is the “hide/show” images. I think it would be easier instead of having to hide and show each individual image, you instead replace the image onchange with accordance to the option value.

For instance, to reference the select form as an object you would do:


var mylist = document.getElementById("mylist")

This gives you access to all it’s properties and functions (or methods) in the my list variable.

There are short cut ways of accessing which option is currently selected. If I were doing this I’d make the image src names consistent with the option values. For instance:



...

<option value="Option">Option 1 </option>

...

<script>

...

var mylistImg
var ext = ".gif"

...

mylist.onchange=function(){ mylistImg.src=mylist.value+ext}

Assuming the name of your first image is Option.gif, it will pop up accordingly. Basically just put the image name in the value of the option, access it, and add an extension.

5

Okay, So i create a div to initially hide it, and show it only when the particular option is selected from the select box.

I can do that. But how do i add background color and an image to the selected option.

Im unable to do that. Thanks yall!