Passing the items selected from the selection box into a database

Discussion in 'JavaScript' started by hamzatki, Sep 12, 2006.

  1. #1
    Hi,

    Can you please help me out here.

    I am trying to implement the code below.

    The code work fine but i have a problem to pass the final selected items to a var name which i can now insert into a table field in a database. I am using php and my sql database.

    I will appreciate any piece of information that will help me to achieve this.

    Thanks

    Kamal



    <!-- THREE STEPS TO INSTALL ITEMS POPUP LIST:

    1. Paste the first code into a new file, save it as: modify.html
    2. Copy the coding into the HEAD of your HTML document
    3. Add the last code into the BODY of your HTML document -->

    <!-- STEP ONE: Paste the first code into a new file, save it as: modify.html -->

    <html>
    <head>
    <script language="JavaScript">
    Begin
    <!--
    // Add the selected items in the parent by calling method of parent
    function addSelectedItemsToParent() {
    self.opener.addToParentList(window.document.forms[0].destList);
    window.close();
    }
    // Fill the selcted item list with the items already present in parent.
    function fillInitialDestList() {
    var destList = window.document.forms[0].destList;
    var srcList = self.opener.window.document.forms[0].parentList;
    for (var count = destList.options.length - 1; count >= 0; count--) {
    destList.options[count] = null;
    }
    for(var i = 0; i < srcList.options.length; i++) {
    if (srcList.options != null)
    destList.options = new Option(srcList.options.text);
    }
    }
    // Add the selected items from the source to destination list
    function addSrcToDestList() {
    destList = window.document.forms[0].destList;
    srcList = window.document.forms[0].srcList;
    var len = destList.length;
    for(var i = 0; i < srcList.length; i++) {
    if ((srcList.options != null) && (srcList.options.selected)) {
    //Check if this value already exist in the destList or not
    //if not then add it otherwise do not add it.
    var found = false;
    for(var count = 0; count < len; count++) {
    if (destList.options[count] != null) {
    if (srcList.options.text == destList.options[count].text) {
    found = true;
    break;
    }
    }
    }
    if (found != true) {
    destList.options[len] = new Option(srcList.options.text);
    len++;
    }
    }
    }
    }
    // Deletes from the destination list.
    function deleteFromDestList() {
    var destList = window.document.forms[0].destList;
    var len = destList.options.length;
    for(var i = (len-1); i >= 0; i--) {
    if ((destList.options != null) && (destList.options.selected == true)) {
    destList.options = null;
    }
    }
    }
    // End -->
    </SCRIPT>
    </head>
    <body onLoad="javascript:fillInitialDestList();">
    <center>
    <form method="POST">
    <table bgcolor="#FFFFCC">
    <tr>
    <td bgcolor="#FFFFCC" width="74">Available</td>
    <td bgcolor="#FFFFCC"> </td>
    <td bgcolor="#FFFFCC" width="69">Selected</td>
    </tr>
    <tr>
    <td bgcolor="#FFFFCC" width="85">
    <select size="6" name="srcList" multiple>
    <option value="1">Item 1
    <option value="2">Item 2
    <option value="3">Item 3
    <option value="4">Item 4
    <option value="5">Item 5
    <option value="6">Item 6
    </select>
    </td>
    <td bgcolor="#FFFFCC" width="74" align="center">
    <input type="button" value=" >> " onClick="javascript:addSrcToDestList()">
    <br><br>
    <input type="button" value=" << " onclick="javascript:deleteFromDestList();">
    </td>
    <td bgcolor="#FFFFCC" width="69">
    <select size="6" name="destList" multiple>
    </select>
    </td>
    </tr>
    <tr>
    <td colspan=3 align="center">
    <input type="button" value="Done" onClick = "javascript:addSelectedItemsToParent()">
    </td>
    </tr>
    </table>
    </form>
    </body>
    </html>

    <!-- STEP TWO: Paste this code into the HEAD of your HTML document -->

    <HEAD>

    <SCRIPT LANGUAGE="JavaScript">
    <!-- Original: Pankaj Mittal (pankajm@writeme.com) -->
    <!-- Web Site: http://www.fortunecity.com/lavendar/lavender/21 -->

    <!-- This script and many more are available free online at -->
    <!-- The JavaScript Source!! http://javascript.internet.com -->

    <!-- Begin
    function small_window(myurl) {
    var newWindow;
    var props = 'scrollBars=yes,resizable=yes,toolbar=no,menubar=no,location=no,directories=no,width=300,height=200' ;
    newWindow = window.open(myurl, "Add_from_Src_to_Dest", props);
    }
    // Adds the list of selected items selected in the child
    // window to its list. It is called by child window to do so.
    function addToParentList(sourceList) {
    destinationList = window.document.forms[0].parentList;
    for(var count = destinationList.options.length - 1; count >= 0; count--) {
    destinationList.options[count] = null;
    }
    for(var i = 0; i < sourceList.options.length; i++) {
    if (sourceList.options != null)
    destinationList.options = new Option(sourceList.options.text, sourceList.options.value );
    }
    }
    // Marks all the items as selected for the submit button.
    function selectList(sourceList) {
    sourceList = window.document.forms[0].parentList;
    for(var i = 0; i < sourceList.options.length; i++) {
    if (sourceList.options != null)
    sourceList.options.selected = true;
    }
    return true;
    }

    // Deletes the selected items of supplied list.
    function deleteSelectedItemsFromList(sourceList) {
    var maxCnt = sourceList.options.length;
    for(var i = maxCnt - 1; i >= 0; i--) {
    if ((sourceList.options != null) && (sourceList.options.selected == true)) {
    sourceList.options = null;
    }
    }
    }
    // End -->
    </script>
    </HEAD>

    <!-- STEP TWO: Copy this code into the BODY of your HTML document -->

    <BODY>

    <center>
    <form method=post>
    <table border=1 bgcolor="#ffffcc">
    <tr>
    <td>
    <select size=5 name=parentList multiple>
    </select>
    </td>
    </tr>
    <tr>
    <td align=center>
    <input type=button value="Add Item" onclick = "javascript:small_window('modify.html');">
    <input type=button value="Delete Item" onclick = "javascript:deleteSelectedItemsFromList(parentList);">
    </td>
    </tr>
    </table>
    </form>
    </center>

    <p><center>
    <font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
    by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
    </center><p>

    <!-- Script Size: 5.27 KB -->
     
    hamzatki, Sep 12, 2006 IP
  2. alemcherry

    alemcherry Guest

    Best Answers:
    0
    #2
    You should name srcList as srcList[] and get it as an array in PHP $_POST vars.
     
    alemcherry, Sep 12, 2006 IP