in reply to Re^2: Dynamic Drop down in CGI
in thread Dynamic Drop down in CGI

Here's an example to get you started: 

<html>
<head>
<script type="text/javascript">
function setmenu2() {
  var menu1 = document.getElementById('menu1');
  var sel   = menu1.options[menu1.selectedIndex].text;
  var menu2 = document.getElementById('menu2');

  if (sel == "Foo") {
    menu2.innerHTML = "<option>Foo-1</option>"
                     +"<option>Foo-2</option>";
  } else {
    menu2.innerHTML = "<option>Bar-1</option>"
                     +"<option>Bar-2</option>"
                     +"<option>Bar-3</option>";
  }
}
</script>
</head>

<body>

<select id="menu1" onchange="setmenu2()">
<option>please select...</option>
<option>Foo</option>
<option>Bar</option>
</select>

<select id="menu2">
<option>- ?? -</option>
</select>

</body>
</html>

[download]

Replies are listed 'Best First'.
Re^4: Dynamic Drop down in CGI
by afoken (Chancellor) on Jun 09, 2009 at 20:04 UTC

    Please don't use the propritary innerHTML attribute, use DOM methods (createElement() and friends) to manipulate the DOM. And for this special problem, use the form[].elements[].opions[] object to add new entries. (Example and documentation)

    Alexander

    --
    Today I will gladly share my knowledge and experience, for there are no sweeter words than "I told you so". ;-)
[reply]
[reply]
[d/l]
Re^4: Dynamic Drop down in CGI
by d0353101 (Novice) on Jun 10, 2009 at 10:01 UTC
    Hi Almut,

    Thanks for this code. But this is a simple HTML-JavaScript page in which values are Hard-coded.

    As I described, in my case all the values are populating in Dropdown through DB.

    It would be great help if you could add some DB Interaction in this.

    Regds
    Vivek
[reply]
      ...page in which values are Hard-coded.

      Essentially, you have three options:

      • Prepopulate all possible menus, in which case you'd replace those hard-coded values in the page with content filled in from the DB, using a templating system (wouldn't scale well if you have lots of or unpredictable content).
      • Use classical CGI, i.e. submit the form upon an onChange event in menu1, and generate an entire new HTML page/frame every time with the appropriate menu2 contents.
      • Use Ajax to dynamically fetch the menu2 contents depending on the menu1 selection, and update menu2 without regenerating the page (using the same DOM technique as shown).

      But as you already said you're "not using Ajax", your available options reduce by one...

[reply]

      This site is not a code writing service. Also, this site is chiefly about Perl, not Javascript or HTML. So please don't ask for neither completed code nor Javascript code.

[reply]
        Thanks for all the services (If any) you have provided me !!

        I have not asked you or anyone to write the code for me. I just asked for help. I just asked for an example because I was fed up with trying it out on my own. There is lot of difference between an example and WRITING code. But I think your seniority does not see that.

        Secondly, I am using PERL as programing language. I posted here as I had an assumption that there is code linking between PERL and Java-Script and I was not able to understand that linking. But again your seniority and experience does not see that.

        Please ... Please try to remember the days when you were a Junior and had problems in coding and understanding; and some one must had helped you.

        Please !!

[reply]

In Section Seekers of Perl Wisdom