Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jul 2009
    Posts
    28
    Thanks
    2
    Thanked 3 Times in 3 Posts

    Question Dynamic Javascript Form

    Hello,

    I've used the concept from this website to build a form.
    http://www.enviromark.ca/english/quoteform.html

    Notice how the second drop down options change depending on what option is selected in the first drop down.

    Here's the Javascript
    Code:
    var Option1_Array = new Array("Choose a version", "1", "2");
    var Option2_Array = new Array("Choose a version", "3", "4");
    
    
    function program(objProgram) {
      var objVersion = objProgram.form.Version;
      var selectedArray  = window[objProgram.options[objProgram.selectedIndex].value.replace(/\s/g,'') + "_Array"];
      objVersion.options.length = 0;
      for (var i=0; i < selectedArray.length; i++) {
        objVersion.options[i]=new Option(selectedArray[i], selectedArray[i].replace(/->\s/g, ""));
      }
    }

    Here's the HTML
    Code:
     <form>
    
    
                      
            <select name="Program" onChange="program(this)">
                <option value="Start">Please choose a program</option>
                <option value=Null>---------------------------------------></option>
                <option value="Option1">1</option>
                <option value="Option2">2</option>
    
              </select>
          
         
            <select name="Version" onChange="">
               
            </select>
         
           </form>
    Now, this code works perfectly, and does exactly what I want it to. BUT I'd like to add more fields that accomplish the same thing.

    For example choose option1 --> version 2 --> type 3 --> thing 5

    Now, in order to do this I believe you need to generate a 'value = "a_value"' in the generated html option and select fields. That way, all you need to do is make separate functions for each level and the function can call the 'value' html attribute to handle each <select> depending on its declared value.

    If this is the best way (it sounds a little sketchy to me) then any help would be great. Or, if you can add on more child selection options within one function.

    Thanks,
    -Matthew

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Many examples and free scripts at
    http://www.javascriptkit.com/script/cutindex16.shtml

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Jul 2009
    Posts
    28
    Thanks
    2
    Thanked 3 Times in 3 Posts
    Hi,

    Thanks for the resource, but I'm not seeing anything that particularly fits my needs. I have since refined the script and am making progress, but I'm encountering some problems.

    Are there any other examples of forms that create options depending on user input?

    Ex:
    select a thing - numbers, colors, shapes

    select a color - red, green, blue

    then generate a list of blues - light blue, dark blue

    This is just the simplest explanation I can conjure up...
    All the info needs to be submittable via php, which means the <input>'s need to have a value assigned to them to be read by the php script.

    Thanks

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    So what is wrong with
    http://www.javascriptkit.com/script/...plecombo.shtml

    You can readly extend that to four-level if needed.

    And/or search this forum for "combo".
    Last edited by Philip M; 01-13-2012 at 07:57 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    New Coder
    Join Date
    Jul 2009
    Posts
    28
    Thanks
    2
    Thanked 3 Times in 3 Posts
    Sorry, I must not have seen that one. Thank you!

    My only question: is it possible to load other elements based on the first select option? Say, <p> tags and other information based on the input?

    The options are going to differ in quantity depending on the selection, so it won't always be just the three lists.

    Thanks.

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    I am not sure that I understand you, but there is nothing to prevent selecting a particular option loading other script code to hide/show other elements etc.

    onchange = "someFunction()"; and then do something (or not) depending on the selectedIndex.

    You can have as many or as few options in each select list as you desire.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Tags for this Thread

    Posting Permissions

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