asked on

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

Russell2566

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>

Russell2566

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);">

erikTsomik

ASKER

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>

Russell2566

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>

ASKER CERTIFIED SOLUTION

erikTsomik

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Russell2566

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....

Russell2566

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...

erikTsomik

ASKER

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

Vee_Mod

Closed, 500 points refunded.
Vee_Mod
Community Support Moderator