StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POAjax & JavaScript Multiple Select onchange failing after 3 selected items
text
Body
copied!<p>I have a select input with the following code:</p> <pre><code><select name="color" id="color" multiple class="form-control chzn-select" tabindex="8" onchange="autosave(this.id,this.value)"> </code></pre> <p>It is successfully sending the function ID and select value, but seeing as one can select multiple items, it's having an issue. I can select up to 3 items without a problem, but attempting to select a 4th is causing it to pass the value of the first selected item. Not the most recently selected item. Here's the function, which sends other information such as title and date (both text inputs):</p> <pre><code>function autosave(inputid,values) { var dataObj = {}; dataObj[inputid] = values; $.ajax({ type: "POST", url: "save.php", data: dataObj, success: function(msg) { $('#autosavenotify').text(msg); console.log('success'); } }) } </code></pre> <p>HTML wise I am using Bootstrap3 if that makes a difference and here's how I'm populating the select options:</p> <pre><code><?php $colors = array('Red','Blue','Yellow','Purple','Green','Orange'); foreach($colors as $c) { $selected = ''; if(in_array($c, $_SESSION['array']['colors'])) { $selected = 'selected'; } echo '<option value="'.$c.'" '.$selected.'>'.$c.'</option>'; } ?> </code></pre> <p>Any ideas why this might be happening? My save.php page is placing all items successfully within the array, the ajax is just sending the incorrect value for some reason. </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload