Javascript on submit from multiple select

Question

I have this code :

<div class="st-form-line">
        <span class="st-labeltext">Countries</span>
        <label class="margin-right10"><input type="radio" id="members_create_campaign_form_countrySelectionType_0" name="members_create_campaign_form[countrySelectionType]" required="required" value="0" checked="checked" /> All</label>
        <label class="margin-right10"><input type="radio" id="members_create_campaign_form_countrySelectionType_1" name="members_create_campaign_form[countrySelectionType]" required="required" value="1"/> Selected</label>
        <div id="clist_div" class="simplebox cgrid540-right" style="display:none;">
            <div style="padding:5px"></div>
            <div class="simplebox cgrid200-left">
                <p style="text-align:center;"><b>Excluded Countries</b></p>
                <select size="10" name="excluded2" style="width:200px; height:160px;" onDblClick="moveSelectedOptions(this.form['excluded2'],this.form['countries[]'])" multiple >
                                                                               <?php foreach($arrayCountries as $country) {?>
                                                <option value="<?= $country ?>" ><?= $country ?></option>
                                            <?php } ?>

              </select>
            </div>
            <div class="simplebox cgrid40-left">
                <input class="button-blue" type="button" name="right" value="&gt;&gt;" onclick="moveSelectedOptions(this.form['excluded2'],this.form['countries[]'])"><br/><br/>
                <input class="button-blue" type="button" name="left" value="&lt;&lt;" onclick="moveSelectedOptions(this.form['countries[]'],this.form['excluded2'])">
            </div>
            <div class="simplebox cgrid200-left">
                <p style="text-align:center;"><b>Selected Countries</b></p>
                <select size="10" id="members_create_campaign_form_countries" name="countries[]" style="width:200px; height:160px;" onDblClick="moveSelectedOptions(this.form['countries[]'],this.form['excluded2'])" multiple >
                                        </select>
            </div>

        </div>
        <div class="clear"></div>

    </div>

This code look like this:

after i choose some countries from left side is adding me to right side, ok, that's good, but my problem is if is not selected as in this photo

is not adding in my database, and in this screnshoot it added only Canada and Germany that is selected and normally i want to add all countries that is added in right side.

This is js code:

<script type="text/javascript">
$(document).ready(function () {
    if ($('#members_create_campaign_form_countrySelectionType_1').is(':checked')) {
        $('#clist_div').show('slow');
    }
    $('#members_create_campaign_form_countrySelectionType_0').click(function () {
        $('#clist_div').hide('slow');
    });
    $('#members_create_campaign_form_countrySelectionType_1').click(function () {
        $('#clist_div').show('slow');
    });

    function selectDiff(s1Id, s2Id) {
        var selected = $('#' + s2Id + ' option').map(function(){
            return this.value;
        }).get()

        var excluded = $('#' + s1Id + ' option').each(function() {
            if (selected.indexOf(this.value) != -1) {
                selected.splice(selected.indexOf(this.value), 1);
                $(this).remove();
            }
        }).get()
    };

    selectDiff('clist_div', 'members_create_campaign_form_countries');
});

The SELECT behaves as normal. You just created a second SELECT with the filtered data from the first one, but only the selected OPTIONs get submitted from a SELECT. — Peter Rakmanyi, Aug 04 '17 at 21:16
Is not about that, my form is working, is adding, but is adding only when in right side i select again like second screnshoot, is adding only that not all from right side, i think is something from js code — user3266370, Aug 04 '17 at 21:17
As @PeterRakmanyi said this IS the default behavior of a select element in HTML. Only the selected options are submitted not the whole list. You would have to: On-Submit select all items in 2nd select so all are sent. — Nawed Khan, Aug 04 '17 at 21:32
something like [this question](https://stackoverflow.com/questions/15190464/how-do-i-post-all-options-in-a-select-list) — Peter Rakmanyi, Aug 04 '17 at 21:47

score 0 · Answer 1 · answered Aug 05 '17 at 06:01

1st : you need to select the all option in selected countries on submit

2nd : simple add selected attribute in all option in selected countries

Note : consequently if your adding to selected countries and removing from selected countries means . option loose the selected attribute so you need to add the selected attribute on submit

$(document).on('submit','#submit_button',function(){

   $('#members_create_campaign_form_countries option').prop('selected',true);

});

score 0 · Answer 2 · edited Mar 16 '21 at 07:01

0

You can take the selected countries as array and keep pushing selected countries in to that.

For example:

var selected_countries=[];

//on select country

selected_countries.push('country selected');

use selected_countries array add to DB.

edited Mar 16 '21 at 07:01

xxx

1,153
1
11
23

answered Aug 17 '17 at 09:25

Vijaylaxmi

19
7

Javascript on submit from multiple select

2 Answers2