asked on

Moving items between listboxes using javascript and submitting selections to database with Coldfusion

I have a dynamically populated listbox where the user can select multiple authors for journal articles they are adding to my library. However the list of authors, and the number of authors for one record (journal article), is so long that using ctrl/click to select each author is cumbersome and leads to many mistakes. So, I decided to set it up so that the user can see which authors they currently have selected. I did this by creating 2 listboxes and using javascript to allow the user to move author names back and forth between the boxes. I know that when the user selects an author to add or remove, it simply modifies the listboxes client-side and not server side. My question is: "How using Coldfusion do I write a method to add the authors the user has selected (moved to listbox 2) to my dbase?

I apologize in advance for my lack of knowledge. This stuff is way outside my area of expertise (I'm a biologist).

<table width="100%" border="1">
      <tr>
        <td>
        <!--- Listbox 1 = Raw list of authors in the database --->
        <select name="Author" size="6" multiple>
          <option value="0">AUTHOR(S) NOT LISTED</option>
          <cfoutput query="rsAuthor">
            <option value="#rsAuthor.AuthorID#">
              <cfif IsDefined("rsAuthor.lastname") AND #rsAuthor.lastname# NEQ "">
                #rsAuthor.lastname#,
              </cfif>
              #rsAuthor.title# #rsAuthor.firstname# #rsAuthor.suffix#</option>
          </cfoutput>
        </select>
        </td>
        <td align="center" valign="middle">
          <!--- buttons for moving specific authors from Listbox 1 to Listbox 2  --->
          <input type="Button" value="Add >>" style="width:100px" onClick="SelectMoveRows(document.AddAuthor.Author,document.AddAuthor.AuthorID)"><br>
          <br>
          <input type="Button" value="<< Remove" style="width:100px" onClick="SelectMoveRows(document.AddAuthor.AuthorID,document.AddAuthor.Author)">
          </td>
        <td>
          <!--- Listbox 2 = User-selected list of authors for specific journal article i.e. record--->
        <select name="AuthorID" size="6" Multiple>
         </select>
         </td>
        </tr>
      </table>

Open in new window

James Rodgers

need the supporting js and output as viewed form the browser

also, after the selections why not just submit the changes to a form processing page or use ajax to manage the changes directly?

<form action="saveChanges.cfm" method="post">
<table width="100%" border="1">
      <tr>
        <td>
        <!--- Listbox 1 = Raw list of authors in the database --->
        <select name="Author" size="6" multiple>
          <option value="0">AUTHOR(S) NOT LISTED</option>
          <cfoutput query="rsAuthor">
            <option value="#rsAuthor.AuthorID#">
              <cfif IsDefined("rsAuthor.lastname") AND #rsAuthor.lastname# NEQ "">
                #rsAuthor.lastname#,
              </cfif>
              #rsAuthor.title# #rsAuthor.firstname# #rsAuthor.suffix#</option>
          </cfoutput>
        </select>
        </td>
        <td align="center" valign="middle">
          <!--- buttons for moving specific authors from Listbox 1 to Listbox 2  --->
          <input type="Button" value="Add >>" style="width:100px" onClick="SelectMoveRows(document.AddAuthor.Author,document.AddAuthor.AuthorID)"><br>
          <br>
          <input type="Button" value="<< Remove" style="width:100px" onClick="SelectMoveRows(document.AddAuthor.AuthorID,document.AddAuthor.Author)">
          </td>
        <td>
          <!--- Listbox 2 = User-selected list of authors for specific journal article i.e. record--->
        <select name="AuthorID" size="6" Multiple>
         </select>
         </td>
        </tr>
      </table>
<input type="submit" value="Save Changes">
</form>

Open in new window

RestonScaper

ASKER

Don't know anything about ajax and am not sure how to submit the changes to a form processing page since the changes are client-side and the server is not "aware" that items have been moved.

<script language="Javascript">
function SelectMoveRows(SS1,SS2)
{
    var SelID='';
    var SelText='';
    // Move rows from SS1 to SS2 from bottom to top
    for (i=SS1.options.length - 1; i>=0; i--)
    {
        if (SS1.options[i].selected == true)
        {
            SelID=SS1.options[i].value;
            SelText=SS1.options[i].text;
            var newRow = new Option(SelText,SelID);
            SS2.options[SS2.length]=newRow;
            SS1.options[i]=null;
        }
    }
    SelectSort(SS2);
}
function SelectSort(SelList)
{
    var ID='';
    var Text='';
    for (x=0; x < SelList.length - 1; x++)
    {
        for (y=x + 1; y < SelList.length; y++)
        {
            if (SelList[x].text > SelList[y].text)
            {
                // Swap rows
                ID=SelList[x].value;
                Text=SelList[x].text;
                SelList[x].value=SelList[y].value;
                SelList[x].text=SelList[y].text;
                SelList[y].value=ID;
                SelList[y].text=Text;
            }
        }
    }
}
 
</script>

Open in new window

James Rodgers

>>Don't know anything about ajax
ok, no ajax

>>and am not sure how to submit the changes to a form processing page since the changes are client-side and the server is not "aware" that items have been moved.

yes the changes are client side but they can still be submitted via a form

in the example i gave above you would make a cfm page to accept the new input values and process them for the updates, the way i usually manage that is clear all existing selection from the db and then add the updated items from the form submission

ASKER CERTIFIED SOLUTION

RestonScaper

membership

This solution is only available to members.

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

Start Free Trial