Sending HTML Form Multiple ` is normally submitted (without AJAX). When forms are submitted, each input's value is submitted as `key=value`, where the `key` is the `name` attribute of the element, and the `value` is the current value of the element. With a multiple ``, it replicates that for every value selected. – Ian Feb 08 '13 at 16:00

Question

You can do something like this,

<select multiple name="categories[]" onclick="sendCategories(this)">

And Make AJAX using JQuery,

function sendCategories(sel){
    var values = $(select).serialize();
    console.log (values);       // See if you get the serialized data in console.

    $.ajax({
        type: 'POST',
        url: "http://www.mysite.com/update_categories.php"
        data: values,
        success: function (data) {
            document.getElementById("my_div").innerHTML = data;
        }
    });
}

And FYI, Netscape event binding model is deprecated, you could use the cross browser event binding like this

Salman · Answer 1 · 2013-02-08T18:16:43.237

4

You can do something like this,

<select multiple name="categories[]" onclick="sendCategories(this)">

And Make AJAX using JQuery,

function sendCategories(sel){
    var values = $(select).serialize();
    console.log (values);       // See if you get the serialized data in console.

    $.ajax({
        type: 'POST',
        url: "http://www.mysite.com/update_categories.php"
        data: values,
        success: function (data) {
            document.getElementById("my_div").innerHTML = data;
        }
    });
}

And FYI, Netscape event binding model is deprecated, you could use the cross browser event binding like this

edited Feb 08 '13 at 18:16

answered Feb 08 '13 at 05:20

Salman

9,299
6
40
73

Thanks for the response. I tried it but it didn't work. Is there another step I have to do on the server end once the values are sent? For instance, do I have to unserialize the values first before it will work? – denvdancsk Feb 08 '13 at 15:42
I tried both print_r($_POST['values']); and also print_r(unserialize($_POST['values'])); but I didn't get anything. – denvdancsk Feb 08 '13 at 15:58
1

@kyzer1978 See if you get the values in `console.log(values)`, if yes, then you should see how you are sending the values to the server. Try the edited code.. – Salman Feb 08 '13 at 18:11
Jquery did the trick! I did have to set the RequestHeader first though. I added xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); to my original code and used the serialize() function and boom! Problem solved! – denvdancsk Feb 08 '13 at 19:23

score 1 · Answer 2 · edited Jun 10 '15 at 01:34

You can implement the solution however you would like using JS string and array functions. Effectively, the string you need to send to Apache should contain a pattern like:

xxx[]=a&xxx[]=b&xxx[]=c

where the SELECT element's name is xxx[] in your form and a, b, and c are three values the user selected.

So yes, you are repeating a key name as many times as the user selected a different option in the SELECT.

In JS you can use an array of selected options:

selected_options.join("&xxx[]=") to produce that pattern.

score 0 · Answer 3 · answered Feb 08 '13 at 05:28

jQuery should make this easier for you. Calling .val() on a wrapped select returns an array of the selected values. You just have to post these to the server:

HTML:

<html>
    <body>
        <form>
            <select name="mySelect" multiple="on">
                <option value="1">Uno</option>
                <option value="2">Dos</option>
                <option value="3">Tres</option>
            </select>
        </form>
        <input id="submitButton" type="button" value="Click To Submit"/>
    </body>
</html>

JavaScript:

$(function() {
    $('#submitButton').click(function() {
        var valuesArray = $('select[name=mySelect]').val()
        $.ajax({
            type: 'POST',
            url: '/path/to/php', // your php url would go here
            data: { mySelect: valuesArray }
        }).done(function(msg) {
            // parse response from msg
        });
    });
});

downvoter please comment what is wrong here. I do not see anything wrong in this. — Ashwin, Feb 08 '13 at 05:33
Thanks but I am actually trying to generate dynamic html code before the entire form is submitted to the server so this doesn't solve the problem. I basically want to reveal different options in the form whenever the user clicks on different categories in the select box before the form is sent to the server via AJAX. — denvdancsk, Feb 08 '13 at 15:47

Linked