[WTH] Easy HTML+Javascript work for a form's select box (onchange() customization)

Discussion in 'Design' started by Logician, Jun 2, 2009.

  1. #1
    Hi there,

    I have a HTML form select box (see below for code) and I need a javascript for this to control it for better user experience.

    Basically it is a "choose your profession" select box which will appear in the page. I want this select box to be visible at all times in the form. However there are other sub select boxes + an input box which are dependant on the choice of the main select box and they should be visible only when certain values are selected in the main profession select box. Here are more details:

    1- "yourprofession" selectbox is always visible in page. All other selectboxes in the code and input box should be hidden in the page load.
    2- Then if user selects "Option 1 (Doctor)" in "yourprofession" selectbox, sub selectbox "Doctor_branches" should be visible.
    3- If Option 2 (Teacher) is selected in "yourprofession" selectbox, sub selectbox "teacher_branches" should be visible.
    4- If option 3 (Lawyer) is selected in "yourprofession" selectbox, nothing will happen
    5- If option 4 (other) is selected in "yourprofession" selectbox, inputbox myjob should be visible.
    6- When a subselect box is visible, all others (except yourprofession selectbox) should be invisible. For instance if one selects doctor, only "yourprofession" AND "Doctor_branches" will be visible in the page. And if after this selection, user changes his decision and selects "teacher", "doctor_branches" select box will be invisible and "teacher_branches" will become visible.
    7- I can add other options into "yourprofession" selectbox in the future. Some of these options can have subselections like the other samples (eg. doctor or teacher or other). So your javascript structure should be flexible to support such future enlargements. If you give me the basic code I can enhance it myself as far as it is flexible for such future additions so please make sure you code accordingly. Javascript should support feature changes with simple modifications and additions without any structural or algoritmic changes.
    8- Your code should work fine for ALL IE, Firefox and Chrome versions (of course if javascript enabled) :). It is ok if it is not perfect for Netscape, Safari and AOL browsers. However I still want it workable in these browsers TOO even if its visibility/invisibility layer is not 100% perfect. In other words, it is ok if all select boxes appear in safari browser no matter what option is selected but it is NOT ok, if other inputbox never appears in safari as this will lock the user and he would have no way to pass the page.
    9- The code shouldn't have syntax error.
    10- I have other javascripts in the page I'm going to use this form, so please select variable and function names which are not likely to clash with other variable/function names. (eg. instead of using 'visiblelayer' use 'visiblelayer_789')
    11- I prefer if your javascript is added directly into form section in page, instead of <head>.
    12- I know there are javascripts in internet which does exactly what I want but I don't have time to customize/test them. So if you want to use one of them, you are welcomed and I'll pay you provided that it fits ALL my requests.


    PAYMENT NOTICE: I'm a member here since 2005 with 11 positive itrader and 0 negative itrader. If you beat my reputation, I'll pay you first and then wait for your work. If your reputation does not beat mine, you'll deliver the work first and then receive the payment in 24 hours. I won't make advance payment for anybody who cant beat my reputation.

    Other Notes:
    1- Payment via Paypal only
    2- When contacting me, please give me a price + ETA! I appreciate if you do NOT pm me like "I can do!!! contact me!" Instead just give me your price for the work + when you can deliver it and I'll return to you if I like your offer. This would save time for both of us, wouldn't it?. :)

    An here is the code:
    
    <div id='alwaysdisplay'>
    <select NAME="yourprofession">
     <option VALUE="0" SELECTED>Select Your Profession</option>
     <option VALUE="1">Doctor</option>
     <option VALUE="2">Teacher</option>
    <option VALUE="3">Lawyer</option>
     <option VALUE="4">Other</option>
    </select>
    </div>
    
    
    
    <select NAME="Doctor_branches">
     <option VALUE="0" SELECTED>Select Your Branch</option>
     <option VALUE="1" >Cardiology</option>
     <option VALUE="2">Dermatology</option>
     <option VALUE="3">Hematology</option>
     <option VALUE="4">Oncology</option>
    </select>
    
    
    
    <select NAME="teacher_branches">
      <option VALUE="0" SELECTED>Select Your expertise</option>
      <option VALUE="1">Math Teacher</option>
      <option VALUE="2">Gym Teacher</option>
      <option VALUE="3">Biology Teacher</option>
      <option VALUE="4">Music Teacher</option>
     </select>
    
    
     <input TYPE="textfield" NAME="myjob" VALUE="Enter Your Profession">
    
    
    
    HTML:
    Thanks,
     
    Logician, Jun 2, 2009 IP
  2. Logician

    Logician Active Member

    Messages:
    213
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    60
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #2
    Project completed by bindassdelhiite, thanks to all!
     
    Logician, Jun 3, 2009 IP