CODEWITHSUNDEEP
javascriptphpjquery
Faybian
Faybian

Reputation: 393

How to enter all multi-selection options into database

I have multi-selection functionality similar to this (see link): http://jsfiddle.net/eUDRV/341/.

HTML code:

<section class="container" >
<div>
    <select id="list" name="list"size="15">
                   <option>1</option>
                   <option>2</option>
                   <option>3</option>
    </select>
</div>
<div>
<br><br><br>
    <input type="button" id="button_left" value="<--"/>

    <input type="button" id="button_right" value="-->" />
</div>
<div>
    <select id="selected_values" size="15"></select>
    <input name="selected_values" type="hidden"/>
</div>

jQuery/Javascript code:

$(document).ready(function () {

$("#button_right").click(function () {
var selectedItem = $("#list option:selected");
var added = false;

$("#selected_values > option").each(function() {

    if ($(this).text() > $(selectedItem).text()) {

        $(selectedItem).insertBefore($(this));

        added = true;

        return false;
    }
});
if(!added) $(selectedItem).appendTo($("#selected_values"));
updateHiddenField();
});


$("#button_left").click(function () {
var selectedItem = $("#selected_values option:selected"), activeValues;
var added = false;

$("#list > option").each(function() {

    if ($(this).text() > $(selectedItem).text()) {

        $(selectedItem).insertBefore($(this));

        added = true;

        return false;
    }
});
if(!added) $(selectedItem).appendTo($("#list"));

updateHiddenField();
});

function updateHiddenField () {
$('input[name="selected_values"]').val(
    $.map($('#selected_values option:selected').toArray(), function (e) {
    return e.value;
})
);
}
});

PHP code:

if(!empty($_POST['selected_values'])) {
$_POST['selected_values'] = explode(',', $_POST['selected_values']);
foreach($_POST['selected_values'] as $x) {
$query = "INSERT INTO $table (id1, id2) VALUES ($id1Value, $x)";
db_query($query);

My goal is to iterate through all of the values that are moved into the left column and enter them into a database using PHP. I'm able to get this functionality to work, however, I'm having the exact same issue as seen referenced here: how can I get all options in a multi-options select using PHP?. I'm accessing the values using $_POST["leftValues"] but if the user clicks on one of the options, only that one will be entered into the database. Unfortunately, the accepted solution isn't working for me. 

$("form:has(#leftValues)").on('submit', function () {
$("#leftValues option").prop('selected', true);
});

Can someone please explain to me how I can get this solution to work for me or an alternative way of ensuring $_POST["leftValues"] will contain all the options instead of only the selected/highlighted? Any response is greatly appreciated.

Upvotes: 1

Views: 188

Answers (2)

Faybian
Faybian

Reputation: 393

Finally got it to work. I edited the submit callback, as the original solution suggested.

Added an id to my form tag:

<form id="form" method="post">

When the form is submitted, select/highlight all options in the selected_values list:

$(#form).submit(function () { 
    $("#selected_values > option").each(function () {
        $(this).attr('selected', 'selected');
});
return true;
});

Upvotes: 0

jameslafferty
jameslafferty

Reputation: 2172

You could add a hidden field and update that whenever the lists change.

You'd need to update your html:

<div>
    <select id="leftValues" size="5" multiple></select>
    <input name="leftValues" type="hidden" />
</div>

and add a function to do the updating:

function updateHiddenField () {
    $('input[name="leftValues[]"]').val(
        $.map($('#leftValues option:selected').toArray(), function (e) {
            return e.value;
        })    
    );
}

And call it in each of your click handlers:

$("#btnLeft").click(function () {
    var selectedItem = $("#rightValues option:selected");
    $("#leftValues").append(selectedItem);
    updateHiddenField();
});

$("#btnRight").click(function () {
    var selectedItem = $("#leftValues option:selected"), activeValues;
    $("#rightValues").append(selectedItem);
    updateHiddenField();
});

Finally, you can do this in your PHP to get what you originally expected:

$_POST['leftValues'] = explode(',', $_POST['leftValues']);

Upvotes: 1

Related Questions