Webmaster Forum / ColdFusion / Advanced Techniques / April 2006

Hi, I am having all kinds of trouble controlling this code when it comes to
placing it in a table.  I have tried CSS and it doesn't help either.  I have
tried nested tables but it seems to have a mind of its own when I try to place
it on a page.  I hope someone can help me understand why this code is so hard
to format on a page.  

Here is the code:  I want it to be in three uniform boxes like below.

                Vehicle Search

Select Make  "dropdown list 1"

Select Model "dropdown list 2"

Submit Search   "Button"  
 

  <p align="center"><strong>Vehicle Search</strong></p>
  <!--- store the selected make variable after the first select boxes submits
itself --->
 
<cfif isDefined('form.select_make')>
    <cfset page.select_make = form.select_make>
</cfif>
<cfoutput>
  <form name="DropDown" method="post">
 
  <!--- query DB for the first drop down list --->
  <cfquery name="get_make" datasource="saa">
SELECT * FROM saa.vehicle_make
  </cfquery>
<!--- first drop down list --->
  <!--- NOTICE the onChange javascript event in the select tag, this is what
submits the form after the first selection --->

     <th><div align="right">Vehicle Make:</div></th>
  <select name="select_make" required="yes" onchange="this.form.submit()">
    <option>Select Make</option>
    <!--- dynamically populate the first drop down list based on the get_make
query --->
    <cfloop query="get_make">
      <option value="#make#" <cfif isDefined('form.select_make')><cfif
form.select_make eq "#make#">selected</cfif></cfif>>#make#</option>
    </cfloop>
  </select>
    <!--- if the first selection has been made, display the second drop down list
with the appropriate results --->
<cfif isDefined('form.select_make')>
   <!--- query DB for second drop down list, based on the selected item from
the first list --->
   <cfquery name="get_model" datasource="saa">
SELECT * FROM saa.vehicle_make WHERE make = '#FORM.select_make#'
   </cfquery>
<!--- second drop down list --->

         <th>Vehicle Model:</th>
       
</cfif>
</cfoutput>
 </form>
 <form action="file:///F|/wwwroot/SpringsAutoAds1/masterDetail.cfm"
method="POST">
 

 <cfoutput>
   <select name="model" required="no">
     <option>Select Model</option>
     <!--- dynamically populate the second drop down list based on the
get_make query --->
     <cfloop query="get_model">
       <option value="#model_1#">#model_1#</option>
       <option value="#model_2#">#model_2#</option>
       <option value="#model_3#">#model_3#</option>
       <option value="#model_4#">#model_4#</option>
       <option value="#model_5#">#model_5#</option>
       <option value="#model_6#">#model_6#</option>
       <option value="#model_7#">#model_7#</option>
      <option value="#model_8#">#model_8#</option>
       <option value="#model_9#">#model_9#</option>
       <option value="#model_10#">#model_10#</option>
     
     </cfloop>
   
   
   </select>

        <td><div align="right">Submit Vehicle Search: </div></td>
        <td><input type="submit" name="Submit" value="Submit"></td>
</form>
 </cfoutput>

       
Thanks for your input in advance

Shane