How all options in a multiselect can be selected on clicking submit button?

Question

I have these 2 multi-select which works fine when comes to selecting/dis-selecting.

PROBLEM: As long as all options are selected(Coloured blue) before submitting there is no problem but if any one of those selected option (right side) is clicked then only that option would be submitted along with the form while I need the one not selected too (right side).

UPDATE: From the select box on the right is the one from where values would be inserted to db. As long as no value is clicked on right box after being shifted from left box, all values from right box gets inserted to db. But if I click any one valu in right box from total of 5 values, rest for would be dis-selected and only selected one will insert to db.

I came up with the solution:

$('#formultiselect').click(function(){
    $('#to option').prop('selected', true);
});

And 2nd multiselect box:

<select multiple id="to" name="topics[]" style="float:left;">

</select>

And finally the submit button:

<button id="formultiselect" type="submit" class="btn-medium col-sms-6 col-sm-4">UPDATE SETTINGS</button>

But, it doesn't work.

Is there anything wrong with my JQuery code? Please assist?

When you say "while I need the one not selected too", what do you mean? There are two options not selected there, and I can't see a form that is being submitted. You're not `POST`ing anything to anywhere. — Nick Bull, Aug 03 '16 at 19:28
You need to do a little more debugging and include a little more code. We can't tell if `'#to option'` is the correct selector because the HTML isn't there. More importantly, how is the submit working? Are you sure it's `'selected', true` that makes it grab the item? — dlsso, Aug 03 '16 at 19:29
@NickBull, From the select box on the right is the one from where values would be inserted to db. I have just UPDATED my question. — CodeIgniter_Learner, Aug 03 '16 at 19:34
@dlsso, I have mentioned the selector html that I am targeting in question.. — CodeIgniter_Learner, Aug 03 '16 at 19:36

score 0 · Answer 1 · answered Aug 03 '16 at 19:30

0

I suspect what might be happening is the form is getting submitted before the function is being executed. Try using .preventDefault() to stop the form from submitting and then submit the form programatically after you select all the options.

$('#formultiselect').click(function(event){
    event.preventDefault();
    $('#to option').prop('selected', true);
    $(this).submit();
});

answered Aug 03 '16 at 19:30

Adjit

10,134
12
53
98

That isn't working. I even tried creating a new div with same id to click without submit.. – CodeIgniter_Learner Aug 03 '16 at 20:02
@CodeIgniter_Learner you have to make sure that you don't have any duplicate `ID` values and also no other button types equal to `submit` – Adjit Aug 03 '16 at 20:07
I don't have any duplicate id.. I just little altered the code and instead of `prop`, I used `$('#to option').attr('selected', 'selected');`.. And that seems to be working. Do you think its a good choice? because in Firefox console, it said "prop" is not a valid function. – CodeIgniter_Learner Aug 03 '16 at 20:10
@CodeIgniter_Learner I would think so. But I would still read up on `attr` vs `prop` http://stackoverflow.com/questions/5874652/prop-vs-attr – Adjit Aug 03 '16 at 20:13

score 0 · Answer 2 · answered Aug 03 '16 at 20:39

I hide the original submit button and created a div look-alike button.

JS Code:

$('#formultiselect').click(function(){ // Clickable div id
    $('#to option').attr('selected', 'selected'); // Targeted Dropdown List
    $('#form').submit(); // Form Id
});

Newly created div button

<div id="formultiselect" style="background:#000;color:#fff;float:left;padding:7px 10px;cursor:pointer;">UPDATE PROFILE</div>

How all options in a multiselect can be selected on clicking submit button?

2 Answers2