Page 1 of 1

$_POST not receiving form Multi-select

Posted: Wed Sep 09, 2009 7:30 am
by Weiry
I'll make this short and sweet.
I have a form which contains several input fields and a couple of select fields.
The form is defined as:

Code: Select all

<form action="" method="post" id="settings_form">
*Note: the form simply submits to the current page, hence no action redirect.

The select field on the left contains a list of items, the select field on the right is empty and is populated by moving items from the left select field to the right select field through use of a JavaScript.

Code: Select all

 
            function addItem() {
                var products = document.getElementById('products[]');
                var indexes = new Array();
                for(var ii=0; ii<products.length; ii++) {
                    if(products.options[ii].selected) {
                        var ele = document.createElement("option");
                        ele.innerHTML = products.options[ii].innerHTML;
                        ele.value = products.options[ii].value;
                        document.getElementById('shopList[]').options.add(ele);
                        indexes.push(ii);
                    }
                }
                for(var ii=indexes.length-1;ii>=0;ii--) {
                    products.options.remove(indexes[ii]);
                }
            }
 
            function removeItem() {
                var shoppingList = document.getElementById('shopList[]');
                var indexes = new Array();
                for(var ii=0; ii<shoppingList.length; ii++) {
                    if(shoppingList.options[ii].selected) {
                        var ele = document.createElement("option");
                        ele.innerHTML = shoppingList.options[ii].innerHTML;
                        ele.value = shoppingList.options[ii].value;
                        document.getElementById('products[]').options.add(ele);
                        indexes.push(ii);
                    }
                }
                for(var ii=indexes.length-1;ii>=0;ii--) {
                    shoppingList.options.remove(indexes[ii]);
                }
            }
 

Code: Select all

                           Available products<br />
                            <select multiple="multiple" name="products[]" id="products[]" ondblclick="addItem()" size="10">
                                ${loop:products}<option value="${products.product_id}">${products.product_name}</option>${/loop:products}
                            </select>
                        </td>
                        <td><input type="button" onclick="addItem()" value="->" /><br /><input type="button" onclick="removeItem()" value="<-" /></td>
                        <td class="tableLeft">
                            Shopping list<br />
                            <select multiple="multiple" name="shopList[]" id="shopList[]" ondblclick="removeItem()" size="10">
                            </select>
 
*Note: the page is compiled using a template class

The PHP page which receives this information is 'initalize.php' through POST.
Upon receiving the POST information from this form, i print the contents of $_POST.

Code: Select all

 
5  print_r($_POST);
6  if($_POST['shopList']){foreach($_POST['shopList'] as $t){print $t."<br/>";}}
 
Now the problem is, I am receiving all other input field values minus the the select fields (shopList or products).

Code: Select all

Notice: Undefined index: shopList in initialize.php on line 6
Any suggestions why I am not receiving my <select> values in my $_POST?
And how might I be able to remedy this problem?

::Also, if you need the entire code I can post it, its just a tad long so i only included the important parts

cheers
Weiry

Re: $_POST not receiving form Multi-select

Posted: Wed Sep 09, 2009 10:58 am
by Weiry
Ok, im just going to post the HTML template file and the PHP file associated with it.

HTML

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>Settings</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="${templateDir}/style/style.css" />
        <style type="text/css">
            body {
                background-image: none;
            }
        </style>
        <script type="text/javascript">
            <!--
            function submitForm() {
                //todo - validation before submitting
                var errorMessage = "";
                if(document.getElementById('wallet_amount').value == "" || isNaN(document.getElementById('wallet_amount').value)) {
                    errorMessage += "Wallet amount must be a number";
                }
                if(document.getElementById('shopList[]').options.length == 0) {
                    if(errorMessage != "") {
                        errorMessage += "\n";
                    }
                    errorMessage += "Shopping list cannot be empty";
                }
                if(errorMessage != "") {
                    alert(errorMessage);
                }else{
                    document.getElementById("settings_form").submit();
                }
            }
 
            function addItem() {
                var products = document.getElementById('products[]');
                var indexes = new Array();
                for(var ii=0; ii<products.length; ii++) {
                    if(products.options[ii].selected) {
                        var ele = document.createElement("option");
                        ele.innerHTML = products.options[ii].innerHTML;
                        ele.value = products.options[ii].value;
                        document.getElementById('shopList[]').options.add(ele);
                        indexes.push(ii);
                    }
                }
                for(var ii=indexes.length-1;ii>=0;ii--) {
                    products.options.remove(indexes[ii]);
                }
            }
 
            function removeItem() {
                var shoppingList = document.getElementById('shopList[]');
                var indexes = new Array();
                for(var ii=0; ii<shoppingList.length; ii++) {
                    if(shoppingList.options[ii].selected) {
                        var ele = document.createElement("option");
                        ele.innerHTML = shoppingList.options[ii].innerHTML;
                        ele.value = shoppingList.options[ii].value;
                        document.getElementById('products[]').options.add(ele);
                        indexes.push(ii);
                    }
                }
                for(var ii=indexes.length-1;ii>=0;ii--) {
                    shoppingList.options.remove(indexes[ii]);
                }
            }
            -->
        </script>
    </head>
    <body>
        <div id="header"><h2>School</h2><h1>Welcome ${name}&nbsp;<img src="${templateDir}/images/sun.png" alt="sun" /></h1></div>
        <div id="content">
            <form action="" method="post" name="settings_form" id="settings_form">
                <table id="settings_table">
                    <tr>
                        <td class="tableLeft">${walletText} amount</td>
                        <td class="tableRight" colspan="2">$<input type="text" name="wallet_amount" id="wallet_amount" /></td>
                    </tr>
                    <tr>
                        <td class="tableLeft">Rounding</td>
                        <td class="tableRight" colspan="2">
                            <input type="radio" name="rounding" id="five_cents" value="five" checked="checked" /><label for="five_cents">Five cents</label><br />
                            <input type="radio" name="rounding" id="ten_cents" value="ten" /><label for="ten_cents">Ten cents</label><br />
                            <input type="radio" name="rounding" id="fifty_cents" value="fifty" /><label for="fifty_cents">Fifty cents</label><br />
                            <input type="radio" name="rounding" id="one_dollar" value="dollar" /><label for="one_dollar">One dollar</label><br />
                        </td>
                    </tr>
                    <tr>
                        <td class="tableRight">
                            Available products<br />
                            <select multiple="multiple" name="products[]" id="products[]" ondblclick="addItem()" size="10">
                                ${loop:products}<option value="${products.product_id}">${products.product_name}</option>${/loop:products}
                            </select>
                        </td>
                        <td><input type="button" onclick="addItem()" value="->" /><br /><input type="button" onclick="removeItem()" value="<-" /></td>
                        <td class="tableLeft">
                            Shopping list<br />
                            <select multiple="multiple" name="shopList[]" id="shopList[]" ondblclick="removeItem()" size="10">
                            </select>
                        </td>
                    </tr>
                </table>
                <p><a href="#" onclick="submitForm()"><img src="${templateDir}/images/start_shopping.png" alt="Start Shopping" /></a></p>
            </form>
        </div>
    </body>
</html>
PHP

Code: Select all

<?php
require_once('config.inc.php');
 
    //check if settings have been submitted
    if(isset($_POST['wallet_amount'])) {
        $test = $_POST['shopList'];
        print_r($_POST);
        if($test){foreach($test as $t){print $t."<br/>";}}
        exit;
        $session->studentLogin($_POST['firstName'],$_POST['lastName'],$_POST['wallet_amount'],$_POST['rounding']);
    }else {
        //display session settings page (wallet amount, rounding level)
        $pageData = array("templateDir" => TEMPLATE_DIR);
        $products = array();
        
        $q = "SELECT `product_id`,`product_name` FROM `bss_products` WHERE `loaded` = '1'";
            $result = $database->query($q);
        while($row = $database->fetchAssoc($result)){
            $pArr = array( "product_id"=> $row['product_id'], "product_name" => $row['product_name']);
            array_push($products, $pArr);
        }
        
        $pageData['products'] = $products;
        $query = sprintf("SELECT `user_firstName`, `user_lastName` FROM `bss_users` WHERE `user_id` = {$_GET['userid']}");
        $rs = $database->query($query);
        //todo - check that a valid row was returned
        $row = $database->fetchAssoc($rs);
        $pageData['name'] = $row['user_firstName'] . " " . $row['user_lastName'];
        $pageData['walletText'] = "Wallet";//todo - assign wallet/purse based on gender
        $template = new Template(TEMPLATE_DIR . "/settings.html", $pageData);
        $template->output();
    }
?>
When i print $_POST, i get values back from wallet_amount and rounding, but nothing else.

Re: $_POST not receiving form Multi-select

Posted: Thu Sep 10, 2009 11:31 am
by Weiry
Oh that is brilliant, thanks heaps.
I didn't notice that the user actually had to select the items in the list as well. I assumed they would just be sent as part of the form data. Thanks for the major help :D