• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 251
  • Last Modified:

dynamically populate a drop down based on another drop down

this is some of the code i have so far. what this does is goes to index.cgi i want it to go to index.cgi?action=step, which it says it does but it really goes to the index.cgi. there's also a submit button on this page which i want to go to index.cgi?action=addarticle

any ideas on how to help me??

thanks


$form_name = $query->param('name');

print start_html('Add Time', '#FFFFFF'), h3('Add Time');

print $query->startform(-method=>'post');

connect_db;

$sth = $dbh->prepare("select distinct client_name from clients") || die "can't prepare statement.\n";

$sth->execute;

print "<table><tr><td>Client Name: </td><td><select name = 'name' onChange=\"if (this.selectedIndex){f=this.form;f.action='index.cgi?action=step';f.submit()};\"><option value=\"\">Select a Client</option>";

if ($form_name ne "") {
print "<option selected value=\"$form_name\">$form_name</option>";
}

while (@fields=$sth->fetchrow_array)
{
        $dbname=$fields[0];
        print "<option value=\"$dbname\">$dbname</option>";
}

$sth->finish();

print "</select></td></tr>";

print "<tr><td>Client Project: </td><td><select name=\"client_project\"><option value=\"\">Select a Project
</option>";

if($name)
{
$sth_B = $dbh->prepare("select * from clients where client_name='$name'") || die "can't prepare statement.\n";

$sth_B->execute() || die "Couldn't execute query\n";

while (my @row = $sth_B->fetchrow_array())
{
$my_td1 = $row[3];
print "<option value=$my_td1>$my_td1</option>\n";
}
$sth_B->finish();
}
print "</select></td></tr>";

# .... more code form stuff

print "</form><form name=\"main\" method=\"POST\">";

print "<tr><td colspan=2><input type=\"hidden\" value=\"addarticle\" name=\"action\">";

print "<input type=\"submit\" name=\"Submit\" value=\"Submit\">";

print "</font></td></tr></table>";

print "</form>";


# ... more code....


if (!param()) {
single;
exit(0);
} elsif ($action eq "add") {
add;
} elsif ($action eq "step") {
add;
} elsif ($action eq "addarticle") {
addarticle;
} else {
single;
}
exit(0);


0
jmingo
Asked:
jmingo
  • 4
1 Solution
 
inq123Commented:
Hi jmingo,

The problem that you thought it went to index.cgi instead of index.cgi?action=step is that you were using "<form name=\"main\" method=\"POST\">".  If you had used method=GET then you would see index.cgi?action=step displayed on your browser address bar.  But either way your program will receive the param('action') correctly, which is why you said "which it says it does".

Cheers!
0
 
jmingoAuthor Commented:
ok this is what happens now though

index.cgi?name=Test&client_project=&job=&hours=&month=&day=&content=

when i change the drop down.

still goes to the index.cgi single function.

any ideas?

thanks for the help.
0
 
inq123Commented:
jmingo,

I'm somewhat confused by your code.  Why did you write "f.action='index.cgi?action=step'" in your JS?  Did you mean "f.action='step'"?  So exactly what are you trying to do?  Are you trying to have user select one option, then go to a new page where two selects will be displayed?  This seems a bit overkill since you could simply populate the 2nd select using the first select through JS (javascript).  You don't have to choose to print the 2nd select only when you have a param('name').  If you get rid of the DB-related code that has no bearing on the question it would also make it easier to understand what you want to do.  I can give you an example if you want.
0
 
inq123Commented:
I think I see what you're trying to do.  f.action part is right.  I'll give you an example soon.
0
 
inq123Commented:
jmingo,

This code should do more than what you asked for and I highly recommend you follow my example below to rewrite your code:

<script>
  function hide(option)
  {
    if(option) { window.document.a.e.style.visibility='hidden'; }
    else { window.document.a.e.style.visibility='visible'; }
  }
 
  function populate()
  {
    var a = window.document.a.b.value;
    var b = window.document.a.e;
    hide(0);
    if(a == 'c') { b.value = 'f' }
    else if(a == 'd') { b.value = 'g' }
    else { hide(1) }
  }

</script>

<body onload=hide(1)>

<form name="a" action="index.cgi" method="get">
  <select name="b" onChange=populate()>
    <option value="c">c</option>
    <option value="d">d</option>
    <option value="hide">hide</option>
  </select>
  <select name="e" hidden="true">
    <option value="f">f</option>
    <option value="g">g</option>
  </select>
</form>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now