asked on

Pass selected dropdown menu option to CGI program

I have the following dropdown menu and numerous other input fields (regular and hidden). I am trying to figure out how to pass all the values in this form to the page that is selected from this dropdown (see code below). Currently, when an option is selected, the link to the selected page works, however, no parms get passed.

The receiving program is a CGI program. I have done this elsewhere on the page with a simple text link by calling a Javascript program and passing the value from a table row to a function call in the header.

But how do you pass the value from a dropdown such as this one?

<FORM name="SPSFS02" ACTION="./SPSFS02" METHOD="POST">

<TABLE BORDER=0 CELLPADDING=2 CELLSPACING=0 VSPACE="0" HSPACE="0" WIDTH="100%">
<tr>
<td width="40%"><b><font size=3>Shipping Fulfillment Schedule</font></b></td>
<td width="40%"><b><font size=3>Gypsum Board - United States<font size=3></b></td>
<td width="20%" border=1>
<select name="DDmenu" onChange="location=this.options[this.selectedIndex].value;">
<option selected>Site Navigation</option>
<option value="./SPSFS02">Region
<option value="./SPSFS01">Plant
<option value="./SPSFS03">SalesRep
</select>
</td>
</tr>
</table>

BPBEE

ASKER

Here are examples of my existing Javascript function calls:

<script language="JavaScript">
function callapgm() {
document.SPSFS02.action = '/BPBCON/SPSFS02';
document.SPSFS02.method = "POST";
document.SPSFS02.submit();
return false;
}
function callbpgm(region,plant,fdate,tdate) {
document.SPSFS02.DXREGION.value = region;
document.SPSFS02.DXPLANT.value = plant;
document.SPSFS02.DXFDATE.value = fdate;
document.SPSFS02.DXTDATE.value = tdate;
document.SPSFS02.action = '/BPBCON/SPSFS07';
document.SPSFS02.method = "POST";
document.SPSFS02.submit();
return false;
}
function gotoURL(URL) {
document.SPSFS02.action = URL;
document.SPSFS02.method = "POST";
document.SPSFS02.submit();
return false;
}
</script>
.....
.....

<tr>
<td><a href="/BPBCON/SPSFS07" onClick="return callbpgm('P00','CG','2004-09-07-00.00.00.000000','2004-09-07-00.00.00.000000')">Northeast</td>
<td width="12%" border=1>CODY PLANT </td>
<td width="11%" border=1>Truckloads</td>
<td width="11%" border=1>Prepaid</td>
<td width="11%" border=1>09/07/2004</td>
<td width="11%" border=1>.00</td>
<td width="11%" border=1>0</td>
<td width="11%" border=1>0</td>
<td width="11%" border=1></td>
</tr>
.....
.....

<input type="hidden" name="DXREGION" value= " "></INPUT>
<input type="hidden" name="DXPLANT" value= " "></INPUT>
<input type="hidden" name="DXFDATE" value= " "></INPUT>
<input type="hidden" name="DXTDATE" value= " "></INPUT>
<input type="hidden" name="BPBUSER" value= "james"></input>

ziffgone

Might have to pass through URL:

<TABLE BORDER=0 CELLPADDING=2 CELLSPACING=0 VSPACE="0" HSPACE="0" WIDTH="100%">
<tr>
<td width="40%"><b><font size=3>Shipping Fulfillment Schedule</font></b></td>
<td width="40%"><b><font size=3>Gypsum Board - United States<font size=3></b></td>
<td width="20%" border=1>
<select name="DDmenu" onChange="chgLoc(this.options[this.selectedIndex].value);">
<option selected>Site Navigation</option>
<option value="./SPSFS02">Region
<option value="./SPSFS01">Plant
<option value="./SPSFS03">SalesRep
</select>
</td>
</tr>
</table>

Then assign a bunch of variables with the values you wish to pass:

JAVASCRIPT CODE:

function chgLoc(page){
var val1 = document.form_name.field1.value;
var val2 = document.form_name.field2.value;
var val3 = document.form_name.field3.value;
// etc for each value you want to pass to the next page

// now time to go to the page:

window.location = page+"?val1="+val1+"&val2="+val2+"&val3="+val3;
}

Then, in the receiving page (CGI I'm assuming):

CGI/PERL CODE:
use strict;
use CGI;

my($val1,$val2,$val3,$val4);
$val1 = "";
$val
if(param('val1')){
$val1 = param('val1');
}
if(param('val2')){
$val2 = param('val2');
}
if(param('val3')){
$val3 = param('val3');
}
etc...

then:
HTML CODE:
print '<input type="text" name="val1" value="'.$val1.'">';

or

print <<ENDHTML;

<select>
<option value="$val">$val</option>
</select>
ENDHTML
etc.

You'll have to edit things to suit your needs.

Hope that helps.

Regards...

ASKER CERTIFIED SOLUTION

ziffgone

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

mishagale

try replacing your onChange code with "document.SPSFS02.action=this.options[this.selectedIndex].value;"

mishagale

sorry, amend that to:
"document.SPSFS02.action=this.options[this.selectedIndex].value; document.SPSFS02.submit();"

mishagale

LearnedOne: I think that ziff's was probably the better solution, taking into account the existing code from the questioner. I suggest awarding the points to ziffgone.