SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help with form and javascript to a newcomer please

    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 :
    HTML Code:
    <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">
    Last edited by oskar9293; Dec 21, 2010 at 03:55. Reason: forgot the submit button.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by oskar9293 View 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.
    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.

    Quote Originally Posted by oskar9293 View Post
    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.
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Evangelist bals28mjk's Avatar
    Join Date
    Aug 2007
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    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:

    Code:
    ...
    
    <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. #5
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •