CODEWITHSUNDEEP
coldfusion
Rolan
Rolan

Reputation: 1

How to add and save entry in dropdown listbox using coldfusion

Id like to make a drop down list box where in at the end of the list, an option "Enter New housing", that if selected there will be a message box then it will automatically saves on the database and refreshes the object.

Im a beginner and this is what ive started:

<cfquery name="housingsel" datasource=" " dbtype=" ">
    select rtrim(housing_name) as housing, housingid as housingid from housing order by housing
</cfquery>

<!---<cfquery name="housingins" datasource=" " dbtype=" ">
    insert into housing (housingid,housing_name) values (1,'Tierra Pura Housing')
</cfquery>--->

<body>
<div class="container">
  <div class="content">
    <h1>Housing</h1>
    <table width="300" bgcolor="#FFFFFF" cellpadding="2" cellspacing="0" border="0">
    <cfform action="de_housing.cfm" method="POST">
    <tr><td height="20" class="lbl" align="right">Housing</td><td>
            <select name="housingcat">
                <CFOUTPUT QUERY="housingsel">
                    <OPTION VALUE="#housingid#">#housing#</OPTION>
                </CFOUTPUT>
                <option value="new">Enter New Housing</option>
                </select>
            </td></tr>
            <tr><td height="20" class="lbl"></td><td align="left">
            </td></tr>
    </cfform>
    </table>

Please help!

Thanks!

Upvotes: 0

Views: 235

Answers (1)

Raymond Camden
Raymond Camden

Reputation: 10857

First off, avoid cfform at all costs. It will not help you. See https://github.com/cfjedimaster/ColdFusion-UI-the-Right-Way for reasons why and examples of how to do stuff the right way.

That being said, what you want to do isn't difficult. Let's break it down.

> "Id like to make a drop down list box where in at the end of the list, an option "Enter New housing", that if selected "
Using jQuery, you would add a change handler to your dropdown. In that change handler, you can get the selected index of the drop down. If that index is equal to the length of the options, then the user has picked the last one.

> "there will be a message box"
You have a few choices here. One simple, but not pretty way, is to use the built in confirm option. It has a simple modal box API that the user can type in. There are pretty options, like jQuery UI dialogs, but the confirm option is super simple. I'd recommend starting there.

> "automatically saves on the database"
So, you will know when a user enters a value into the confirm. Take that and use jQuery to do an XHR (Ajax) hit to your code. You will need to write CF code to respond to this request and insert it into the db. Not too difficult and it has been shown many places elsewhere. I'd also add logic to check for dupes.

> "refreshes the object"
When you do a XHR in jQuery, you know when the server is done doing crap, so in the response handler, you can add a new option to the drop down. This too has been done many times before, just Google for adding an option to a drop down. (You will probably end up back here.)

Upvotes: 2

Related Questions