Login

dave friend · 02-18-2018, 10:13 AM

Maybe this will help. Hope this provides a good example.

PHP Code:
class Multiselect extends CI_Controller
{

    function __construct()
    {
        parent::__construct();
        $this->load->helper('form');
    }

    function index()
    {
        $this->load->view('multiselect_v');
    }

    public function proc()
    {
        $data = $this->input->post('selector');
        if($data)
        {
            foreach($data as $value)
            {
                switch($value)
                {
                    case 'a':
                        $text = 'Apple';
                        break;
                    case 'b':
                        $text = 'Bannana';
                        break;
                    case 'c':
                        $text = 'Carrot';
                        break;
                    case 'd':
                        $text = 'Dates';
                        break;
                }
                $out[] = $text;
            }
        }
        else
        {
            $out[] = "Nothing";
        }
        echo json_encode($out);
    }
} 

The view, complete with javascript

PHP Code:
<!DOCTYPE html>
<html>
    <head>
        <title>AJAX Multi-select</title>
        <script src="https://code.jquery.com/jquery-2.2.2.js"></script>
    </head>
    <body>
        <?php echo form_open('multiselect/proc', ['id' => "myForm"]); ?>

        <div class="form-group">             
            <label class="checkbox-inline">
                <?php
                $options = [
                    'a' => 'alpha',
                    'b' => 'beta',
                    'c' => 'charlie',
                    'd' => 'delta',
                ];
                echo form_multiselect('selector[]', $options, [], "id='mselect'");
                ?>
        </div>
        <input type="submit" value="Submit" id='submit'>
        <?= form_close(); ?>
        <p></p>
        
        <script>
            $('form').submit(function (event) {
                event.preventDefault();
                var postData = $(this).serializeArray();

                $.ajax({
                    type: 'POST',
                    url: 'multiselect/proc',
                    data: postData,
                    datatype: 'json',
                    success: function (result) {
                        var ret = JSON.parse(result);
                        $("p").html("<b>You selected:</b> " + ret.join(", "));
                    },
                    error: function () {
                        alert('Fail ');
                    }
                });
            });
        </script>
    </body>
</html> 