[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2426
  • Last Modified:

add remove options in list box using coldfusion

Using coldfusion or javascript.

I would like to have a listbox on the left which will be dynamically populated via coldfusion. I want to be able to select one or multiple entries, click "ADD >>" and have the items show up in the right box. As well as remove them "<<Remove" back to the left box if needed.

Then whatever has been placed in the right box will need to be submitted into the database.
I got the first part to work it adding and removing options, but how can i save the changes into the database, so it fully dynamic
0
erikTsomik
Asked:
erikTsomik
  • 5
  • 3
1 Solution
 
Russell2566Commented:
and an input type button to the form for submiting the form.

Have onClick run a compile function. You will basically need to loop through all of the options in the second checkbox and add them to a hidden field... On your next page use the comma delimted list to insert/delete from...

<script>
      function compile(sel) {
            var newVals = new Array();

            for (var n=0; n < sel.length; n++) {
                  newVals.push(sel[n].value);
            }

            // this is your hidden field
            sel.form.newValues.value = newVals.toString();

            // Now submit the page to your 'processor'
            sel.form.submit();
      }
</script>
0
 
Russell2566Commented:
Sorry, I tweaked this a bit more and added the button call after re-proof reading...

<script>
      function compile(myForm) {
            // This array will contain all the new values
            var newVals = new Array();

            // This is your selectBox that has your desired choices
            var selectList = myForm.optionList2;

            // push new values to local array
            for (var n=0; n < selectList.length; n++) {
                  newVals.push(selectList[n].value);
            }

            // this is your hidden field, set it equal to array.toString
            myForm.newValues.value = newVals.toString();

            // Now submit the page to your 'processor'
            myForm.submit();
      }
</script>

<input type="button" value="Save Changes" onClick="compile(this.form);">
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
Ok. How can I integrate with the store procedure
<cfstoredproc procedure="addProgramReqforUpdate" datasource="HotBanana_Manager" >
                            <cfprocparam type="in" cfsqltype="cf_sql_integer" value="#variables.requirement#">    
                           <cfprocparam type="in" cfsqltype="cf_sql_integer" value="#form.program#">  
                         
                      </cfstoredproc>
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
Russell2566Commented:
Not really sure, due to not knowing the inner workings of the file but I'm guessing it will require a rewrite... An basic idea is as follows, but it will work....

<cfquery>
      DELETE FROM tblTableTable WHERE requirementId = 99

      <cfloop index="x" list="#form.newValues#">
            INSERT INTO tblTableTable  (programId)
            VALUES (#x#)
      </cfloop>
</cfquery>
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
My SP is
CREATE PROCEDURE [dbo].[addProgramReqforUpdate]  
@reqid int,
@degreeid int



 AS
BEGIN

declare @sort2 int
select  @sort2= isnull(max (SortOrder),0) from trnAcademicProgramsAndRequirementsMapping where degreeId=cast(@degreeid as int)
insert into trnAcademicProgramsAndRequirementsMapping (reqid,degreeId,sortOrder) values (@reqid, @degreeid, @sort2+1)


END
GO
0
 
Russell2566Commented:
Not to muddle this thread even more (god I wish I could edit) but my insert statment is missing a few key values. Also I have not idea what your storing and what your schema is.... In lamen terms, delete ID's that are not in the list and insert ones that don't already exist... Or as my example above shows, delete all the assoications and then insert everything that was passed from the form. This is certainly easier and faster to code, but could have performance issues if dealing with lots of records....
0
 
Russell2566Commented:
Sorry, I answered the base questions with some heavy details... I honestly can't take the time to write your whole program... My last post sums up what you need to do... it will require rewriting your stored proc or my peference is to just write the query code in the CFML page. If you use <CFQUERYPARAM> args for everything java will create a prepared statment which is jut as fast as a stored proc for the most part...
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
Actually it works the way I described to you in my code the only problem was I had select all the Item and then it inserted into the database . Thank for you help
0
 
Vee_ModCommented:
Closed, 500 points refunded.
Vee_Mod
Community Support Moderator
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now