Question:
Please could somebody explain to me how I would submit a form that already contains two dynamicaly populated drop down boxes.
Currently when I select the first box it submits to itself to query my databse in order to populate the second box, therefor when I submit the form after filling in additional fields, the form just submits to itself.
I hope I have made myslef clear.
Thank you in advance.
Jokingways

Hi jokingways & welcome to the City that loves a good joke regardless of the ways they come about :)

I hope I have made myslef clear.

Actually, not quite...Are you saying that you have one action in the form and that it is hooked to the first selection and simply accesses the database? If you are populating the second list from the first's form action, I presume you are rewriting the page, why not rewrite the action as well? If that isn't possible, try creating 2 forms (one for the first action, another for the main action) or multiple submission options that reset the action according to the need.

If the above seems vague, it's because you didn't provide a link to the page (or the pertinent code). If you need more, I/we need more.

Vinny

Vinny

"If you are populating the second list from the first's form action, I presume you are rewriting the page, why not rewrite the action as well?"

The above is correct, but I am a bit stuck on how I would re-write the action. If you can provide me with any pointers or better still the best way to do this, it would be much appreciated.

Thanks once again.

Jon

post the script

if you can manage it client side with javascript or use iFrames to do step by step severside well ok . but post the script. i will look tomorrow

Please find my code below, as you can see, when I submit it it just submits to itself, I need to be able to submit it to an action page, after it has populated the second drop down box.
If you can help me resolve this I would be most grateful.
Jon

<Script Language="JavaScript">

function submitclick(){
if ((document.choose.type.value == "")) {
alert("Please Ensure You Have Selected an Animal and Breed")
}
else{
document.choose.submit()
}
}

</Script>
<table align="center" border="0" width="655" height="305" cellpadding="0" cellspacing="0">
<tr>
<td align="center" class="stand" valign="top">
<table border="1" align="center" bordercolor="#000000" bgcolor="#ffffff" width="655" height="305" class="stand" cellpadding="1" cellspacing="0">
<tr>
<td align="left" valign="top">
<table border="0" align="center" bordercolor="#000000" bgcolor="#ffffff" width="650" height="175" class="stand" cellpadding="1" cellspacing="0">
<tr>
</tr>
<tr>
<td height="15" colspan="6">
&nbsp;
</td>
</tr>
<tr>
<cfquery name="getanimal" datasource="ppdb">
SELECT type
FROM animalbreed
GROUP BY type
</cfquery>

<td vAlign="middle" align="right" width="108" height="45"><span class="stand">Animal:&nbsp;&nbsp;</span></td>
<td align="left" width="108">
<form name="choose" method="POST" action="dropdown2.cfm">
<p><select onchange="submitclick()" size="1" name="type">
<option selected>Please Select</option>
<CFOUTPUT query="getanimal">
<cfif isdefined("form.type")>
<cfif form.type eq type>
<option selected value="#type#">#type#</option>
<cfelse>
<option value="#type#">#type#</option>
</cfif>
<cfelse>
<option value="#type#">#type#</option>
</cfif>
</CFOUTPUT>
</select></p></td>

<!--- <p><input type="submit" value="Go" name="C1">&nbsp;<input type="reset" value="Reset" name="C2"></p> --->


<cfif isdefined("form.type")>
<cfquery name="make" datasource="ppdb">
SELECT breed
FROM animalbreed
WHERE type='#form.type#'
</cfquery>

<td vAlign="middle" align="right" width="98" height="25"><span class="stand">Breed:&nbsp;&nbsp;</span></td>
<td valign="middle" font face="Verdana" align="left" width="118">
<!--- Hello --->
<!--- <form name="br" method="POST" action=".cfm"> --->
<select size="1" name="breed">
<option selected>Please Select</option>
<cfoutput query="make">
<cfif isdefined("form.breed")>
<cfif form.breed eq breed>
<option selected value="#breed#">#breed#</option>
<cfelse>
<option value="#breed#">#breed#</option>
</cfif>
<cfelse>
<option value="#breed#">#breed#</option>
</cfif>

</cfoutput>
</select></td>
<!--- <p><input type="submit" value="Go" name="C1"></p> --->
<!--- </form> --->

<cfelse>
<td vAlign="middle" align="right" width="98" height="25"><span class="stand">Breed:&nbsp;&nbsp;</span></td>
<td valign="middle" font face="Verdana" align="left" width="118">
<!--- First --->
<!--- <form name="br" method="POST" action=".cfm"> --->
<select size="1" name="breed">
<option selected>Please Select</option>
</select></td>
<!--- <p><input type="submit" value="Go" name="C1"></p> --->
<!--- </form> --->

</cfif>

<td align="right" width="96">
Age:&nbsp;&nbsp;
</td>
<td width="120">
<select size="1" name="ag">
<option value="age" selected>Please Select</option>
<option value="0-6">0-6</option>
<option value="6-12">6-12</option>
<option value="1-2">1-2</option>
<option value="2-3">2-3</option>
<option value="3-4">3-4</option>
<option value="4-5">4-5</option>
<option value="5-6">5-6</option>
</select>
</td>
</tr>

<tr>
<td colspan="6">
&nbsp;
</td>
</tr>
<tr>
<td colspan="6">
<p align="center"><input onclick="javascript:submitclick()" type="button" value="Submit" name="C1">&nbsp;<input type="reset" value="Reset" name="C2"></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

Sorry, I've been away for a few weeks and only just got back, Afraid I still didn't get time to read your code properly as I only got home a few hours ago and i'm tired.

but I think you may be looking for something like this ...

<cfparam name="fuse" default="step1">

<cfswitch expression="#fuse#">

<cfcase value="step1">

<cfinclude template="qry_1.cfm">

<form action="index.cfm" method="post">

<!--- populate your form from query1 --->

<input type="hidden" name="fuse" value="step2">

</form>

</cfcase>

<cfcase value="step2">

<cfinclude template="qry_2.cfm">

<form action="index.cfm" method="post">

<!--- populate your form from query2 --->

<input type="hidden" name="fuse" value="step3">

</form>

</cfcase>

<cfcase value="step3">

<!--- whatever it is --->

</cfcase>

</cfswitch>



It is also possible to do by using iframes for seperate bits of your form and using javascript to pass form values back from the iFrames to the main form page to hidden form fields.

Example (roughly and unchecked)


<form action="target.cfm" method="post">

<select name="item1" onchange="iframe1.location.href='formpart.cfm?item1='+this.value">
<option value="error">select animal</option>
<option value="dogs">dogs</option>
<option value="cats">cats</option>
</select>


<iframe src="blank.html" name="iframe1" width="200" height="30" marginwidth="0" marginheight="0" scrolling="no" frameborder="0">

<!---

when the select box item1 is changed a cfm page called formpart.cfm is loaded into the iframe : the value selected for item1 is also passed to the page and so the database can be queried to populate a second select box.

another onchange event ...

onchange="top.getElementById('item2').value=this.value"

... is used to pass the second value back to a hidden field on the main form page see below

--->


</iframe>

<input type="hidden" name="item2" value="" id="item2">


<input type="submit" value="submit">

</form>



I hope this makes some sense.

You could go with several forms on one page. Something like:


<cfparam name="FORM.selType" type="string" default="">
<cfparam name="FORM.selBreed" type="string" default="">

<cfquery name="qryGetAnimal" datasource="ppdb">
SELECT type
FROM animalbreed
GROUP BY type
</cfquery>

<cfform name="frmType" method="post" action="self.cfm">

<cfselect name="selType" size="1" query="qryGetAnimal" display="type" value="type" selected="#FORM.selType#" passThrough="onChange=""javascript: frmType.submit(); return true""">
</cfselect>

</cfform>

<cfif FORM.selType neq ''>

<cfquery name="qryMake" datasource="ppdb">
SELECT breed
FROM animalbreed
WHERE type = '#FORM.selType#';
</cfquery>

<cfform name="frmBreed" method="post" action="self.cfm">

<cfoutput>
<input type="hidden" name="selType" value="#FORM.selType#">
</cfoutput>

<cfselect name="selBreed" size="1" query="qryBreed" display="breed" value="breed" selected="#FORM.selBreed#" passThrough="onChange=""javascript: frmBreed.submit(); return true""">
</cfselect>

</cfform>

</cfif>

<cfif FORM.selBreed neq ''>

<form name="frmAge" method="post" action="nextpage.cfm">

<cfoutput>
<input type="hidden" name="selType" value="#FORM.selType#">
<input type="hidden" name="selBreed" value="#FORM.selBreed#">
</cfoutput>

<select name="selAge" size="1">
<option value="0-6">0-6</option>
<option value="6-12">6-12</option>
<option value="1-2">1-2</option>
<option value="2-3">2-3</option>
<option value="3-4">3-4</option>
<option value="4-5">4-5</option>
<option value="5-6">5-6</option>
</select>

<input type="submit" value="Submit">

</form>

</cfif>


The first two forms, frmType and frmBreed, submit to the same page, the last form where you collect any final data you desire, submits to the final action page and carries the type and breed values via hidden fields.