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

OnChange help with my form

I have a form below that I posted the code to.  There is two drop down boxes where the second one is dependent on the first one.  The problem is when you click an option from the first box it submits the form to get the contents for the second box.  Now I can't use the Form Action="GoToPage.CFM"

Anybody now how to get around this issue.  Just to let you know I don't know any JAVA Script if that's your answer.  Trying not to use it.
<form action="GoToPage.cfm" method="post" enctype="multipart/form-data" id="form2">
                          
                          <cfquery name="qumake" datasource="users">
                            SELECT *
                            FROM umake
                            ORDER BY make ASC
                           </cfquery>
                          
                            <table width="252" border="0">
                          <tr>
                                    <td width="31">Make</td>
                                    <td width="85"><br />
									<label>
                                      <select name="lmake" onchange="this.form.submit()">
                                      <option>Select Manufacter</option>
                                      <cfoutput query="qumake">
                                       <option value="#idmake#" <cfif isDefined('form.lmake')><cfif form.lmake eq "#idmake#">selected</cfif></cfif																					>>#make#</option>
     								  </cfoutput>
                                      </select>
                                    </label></td>
                                    <td width="122">&nbsp;</td>
                          </tr>
                                  <tr>
                                    <td>Model</td>
                                    <td>
                                    <cfquery name="qmodel" datasource="users">
                                    SELECT *
                                    FROM umodel,umake
                                    WHERE umodel.idumake = #page.lmake#
                                    GROUP BY umodel.idumodel
                                    
                                    </cfquery>
                                    
                                    <label>
                                     <select name="lmodel" required="yes" id="lmodel">
                                     <option>Select Model</option>
                                     <cfoutput query="qmodel">
                                     <option value="#idumodel#">#model#</option>
                                     </cfoutput>
                                     </select>
                                     </label>
                                     </cfif>
                                    </td>
                                    <td>
                                    <cfif isDefined("form2.lmodel")>
                                    <a href="upricelisting.cfm?recordid=<cfoutput>#lmodel#</cfoutput>">Search Model</a></td>
                                    </cfif>
                              </tr>
   </table>
                                                                              </form>

Open in new window

0
sonicimpulse
Asked:
sonicimpulse
  • 11
  • 9
  • 2
1 Solution
 
erikTsomikSystem Architect, CF programmer Commented:
then try using ajax
0
 
sonicimpulseAuthor Commented:
What is ajax?
0
 
erikTsomikSystem Architect, CF programmer Commented:
AJAX will allow you self submission without refreshing a page
read this
http://www.indiankey.com/cfajax/examples/list.htm
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
sonicimpulseAuthor Commented:
That example is way beyond me.  I'm very new to all of this.  There has to be a simple way to store the selection into a variable or something.  Getting involved with java script, ajax is beyond what I know.
0
 
erikTsomikSystem Architect, CF programmer Commented:
why do you need action in the form ? Because after selecting the second drop down it will get you link anyway . ALso your form does not have the name

SO this will be invalid entry
<cfif isDefined("form2.lmodel")>
It shoud say
<form action="GoToPage.cfm" method="post" enctype="multipart/form-data" id="form2" name ="form2">

0
 
sonicimpulseAuthor Commented:
Here is the problem when set the form up the way you have it.  After I click the first drop down box it does the form action.  It goes to GoToPage.cfm.  Still does not help me
0
 
erikTsomikSystem Architect, CF programmer Commented:
well then you need two forms
0
 
sonicimpulseAuthor Commented:
I'm trying to set this up with two forms.  I still can't figure out to pass the value of this drop down box to the next page.  Any help on how to do this with two forms would be greatly appreciated.
0
 
erikTsomikSystem Architect, CF programmer Commented:
just pass it as form , variable

#form.lmake#
0
 
erikTsomikSystem Architect, CF programmer Commented:
or via url
0
 
sonicimpulseAuthor Commented:
Here is the error I get when the new page loads

 Element LMODEL is undefined in FORM.
 
The error occurred in C:\ColdFusion8\wwwroot\automotive\upricelisting.cfm: line 43

41 : SELECT *
42 : FROM vehicles
43 : WHERE  model="#form.lmodel#">
44 : </cfquery>
45 :
0
 
erikTsomikSystem Architect, CF programmer Commented:
can you post you code that you have right now

0
 
sonicimpulseAuthor Commented:

This is the first page where the users picks the make and model of the vehcile
 
 
 
<cfif isDefined('form.lmake')>
                                  <cfset page.lmake = form.lmake>
                                </cfif>
                                  <form method="post" enctype="multipart/form-data" id="form2">
                                    <cfquery name="qumake" datasource="users">
                            SELECT *
                            FROM umake
                            ORDER BY make ASC
                            </cfquery>
                                    <table width="126" border="0">
                                      <tr>
                                        <td>Make</td>
                                        <td><br />
                                            <label>
                                            <select name="lmake" onchange="this.form.submit()">
                                              <option>Select Manufacter</option>
                                              <cfoutput query="qumake">
                                                <option value="#idmake#" <cfif isDefined('form.lmake')><cfif form.lmake eq "#idmake#">selected</cfif></cfif																					>>#make#</option>
                                              </cfoutput>
                                            </select>
                                          </label></td>
                                      </tr>
                                      <tr>
                                        <td>Model</td>
                                        <td><cfif isDefined('page.lmake')>
                                            <cfquery name="qmodel" datasource="users">
                                    SELECT *
                                    FROM umodel,umake
                                    WHERE umodel.idumake = #page.lmake#
                                    GROUP BY umodel.idumodel
                                    
                                    </cfquery>
                                    
                                   
                                            <label>
                                            <select name="lmodel" required="yes" id="lmodel">
                                              <option>Select Model</option>
                                              <cfoutput query="qmodel">
                                                <option value="#idumodel#">#model#</option>
                                              </cfoutput>
                                            </select>
                                            </label>
                                          </cfif>                                        </td>
                                      </tr>
                                    </table>
                                </form></td>
                            </tr>
                          </table></td>
                          <td width="74"><form action="umodelisting.cfm" id="form3" method="post">
                            <input type="submit" name="submit" id="submit" value="Submit" />
                                                    </form>
                          </td>
                        </tr>
                      </table>
 
 
 
THIS IS THE SECOND CALLED UMODELLISTING.CFM PAGE THAT HAS THE QUERY
 
<cfquery name="listallused" datasource="users">
SELECT *
FROM vehicles
WHERE  model="#url.idumodel#">
</cfquery>

Open in new window

0
 
erikTsomikSystem Architect, CF programmer Commented:
try this


<cfif isDefined('form.lmake')>
                                  <cfset page.lmake = form.lmake>
                                </cfif>
                                  <form method="post" enctype="multipart/form-data" id="form2" name="form2" action="">
                                    <cfquery name="qumake" datasource="users">
                            SELECT *
                            FROM umake
                            ORDER BY make ASC
                            </cfquery>
                                    <table width="126" border="0">
                                      <tr>
                                        <td>Make</td>
                                        <td><br />
                                            <label>
                                            <select name="lmake" onchange="this.form.submit()">
                                              <option>Select Manufacter</option>
                                              <cfoutput query="qumake">
                                                <option value="#idmake#" <cfif isDefined('form.lmake')><cfif form.lmake eq "#idmake#">selected</cfif></cfif                                                                                                                                                                     >>#make#</option>
                                              </cfoutput>
                                            </select>
                                          </label></td>
                                      </tr>
                                      <tr>
                                        <td>Model</td>
                                        <td><cfif isDefined('page.lmake')>
                                            <cfquery name="qmodel" datasource="users">
                                    SELECT *
                                    FROM umodel,umake
                                    WHERE umodel.idumake = #page.lmake#
                                    GROUP BY umodel.idumodel
                                    
                                    </cfquery>
                                    
                                   
                                            <label>
                                            <select name="lmodel" required="yes" id="lmodel">
                                              <option>Select Model</option>
                                              <cfoutput query="qmodel">
                                                <option value="#idumodel#">#model#</option>
                                              </cfoutput>
                                            </select>
                                            </label>
                                          </cfif>                                        </td>
                                      </tr>
                                    </table>
                                </td>
                            </tr>
                          </table></td>
                          <td width="74">
                            <input type="submit" name="submit" id="submit" value="Submit" />
                                                    </form>
                          </td>
                        </tr>
                      </table>
 
 <cfif isDefined("form2.submit") and form2.submit eq "submit">
 	<cflocation url="pagename.cfm?idumodel=#form.lmodel#" addtoken="no">
 
 </cfif>
 
THIS IS THE SECOND CALLED UMODELLISTING.CFM PAGE THAT HAS THE QUERY
 
<cfquery name="listallused" datasource="users">
SELECT *
FROM vehicles
WHERE  model="#url.idumodel#">
</cfquery>

Open in new window

0
 
sonicimpulseAuthor Commented:
Still get the following error when I submit the form

 Element IDUMODEL is undefined in URL.  This is the second page.  The first page of code works correctly.
 
The error occurred in C:\ColdFusion8\wwwroot\automotive\upricelisting.cfm: line 43

41 : SELECT *
42 : FROM vehicles
43 : WHERE  model="#url.idumodel#">
44 : </cfquery>
45 :
0
 
erikTsomikSystem Architect, CF programmer Commented:
do this
put this on you first page page
<cfdump var="#form#">
<cfdump var="#url#">

ANd this on the second page
<cfdump var="#form#">
<cfdump var="#url#">
0
 
sonicimpulseAuthor Commented:
If I put the submit button in the same form it does not resubmit the from with the correct data for the second drop down box.  Thats the first part of this code that needs fixed.
0
 
ZvonkoSystems architectCommented:
It is difficult to check queries when you do not have the tables but this should work:
<form action="GoToPage.cfm" method="post" enctype="multipart/form-data" id="form2">
                          
                          <cfquery name="qumake" datasource="users">
                            SELECT *
                            FROM umake
                            ORDER BY make ASC
                           </cfquery>
                          
                         <table width="252" border="0">
                          <tr>
                                    <td width="31">Make</td>
                                    <td width="85"><br />
                                     <label>
                                      <select name="lmake" onchange="this.form.submit()">
                                      <option>Select Manufacter</option>
                                      <cfoutput query="qumake">
                                       <option value="#idmake#" <cfif isDefined('form.lmake')><cfif form.lmake eq "#idmake#">selected</cfif></cfif                                                                                                                                                                      >>#make#</option>
                                      </cfoutput>
                                      </select>
                                     </label>
                                    </td>
                                    <td width="122"> </td>
                          </tr>
                                  <tr>
                                    <td>Model</td>
                                    <td>
<cfif isdefined("FORM.lmake") and FORM.lmake GT "" >
                                    <cfquery name="qmodel" datasource="users">
                                    SELECT *
                                    FROM umodel,umake
                                    WHERE umodel.idumake = #FORM.lmake#
                                    GROUP BY umodel.idumodel
                                    
                                    </cfquery>
                                    
                                    <label>
                                     <select name="lmodel" required="yes" id="lmodel" onChange="document.links.linkShow.style.display=(this.value)?'inline':'none';" >
                                     <option value="" >Select Model</option>
                                     <cfoutput query="qmodel">
                                     <option value="#idumodel#">#model#</option>
                                     </cfoutput>
                                     </select>
                                     </label>
<cfelse>
                                     Select Make first.
</cfif>
                                    </td>
                                    <td>
                                        <a name="linkShow" style="display:none;" href="upricelisting.cfm?recordid=" onClick="this.href+=document.form2.lmodel.value;">Search Model</a>
                                    </td>
                              </tr>
   </table>
</form>

Open in new window

0
 
sonicimpulseAuthor Commented:
ZVonko your code does not work because of the form action is sending the form to the second page. Then you have a line of code that reads onchange="this.form.submit()">

The user never gets to pick the model of the make because they our sent to the second page.
0
 
ZvonkoSystems architectCommented:
Then change the action= attribute of the form:
<form action="" method="post" enctype="multipart/form-data" id="form2">

Open in new window

0
 
sonicimpulseAuthor Commented:
Not sure what that means to attribute of the form.  I did change it to action="" and I still get the same result
0
 
sonicimpulseAuthor Commented:
All I'm trying to do is get these drop down boxes to work and store the selection of the second box in a variable.  Can someone please help me with this.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 11
  • 9
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now