fetch selected values using jQuery

Question

i am using this Dual Listbox Plugin, i am trying to fetch the values using onClick event of jQuery that has been selected from box1 to box2,

this is the code i am using

<form action="" method="post" class="form" id="purchaseEditUpdateItemForm">
<div class="widget">
    <div class="title">
        <img src="/images/icons/dark/full2.png" alt="" class="titleIcon" />
        <a href="#" class="button blueB" id="purchaseEditUpdateItemBtn" style="margin: 4px;">
            <span>Update</span>
        </a>
    </div>
    <div class="body">
        <div class="leftPart">
            <div class="filter">
                <span>Filter:</span>
                <input type="text" id="box1Filter" class="boxFilter" />
                <input type="button" id="box1Clear" class="fBtn" value="x" />
                <div class="clear"></div>
            </div>
            <select id="box1View" multiple="multiple" class="multiple" style="height:200px;">
                <option value="5">ITEM005</option>
                <option value="6">ITEM006</option>
                <option value="7">ITEM007</option>
                <option value="8">ITEM008</option>
            </select>
            <br/>
            <span id="box1Counter" class="countLabel"></span>
            <div class="dn">
                <select id="box1Storage" name="box1Storage"></select>
            </div>
        </div>
        <div class="dualControl">
            <button id="to2" type="button" class="basic mr5 mb15">&nbsp;&gt;&nbsp;</button>
            <button id="allTo2" type="button" class="basic">&nbsp;&gt;&gt;&nbsp;</button>
            <br />
            <button id="to1" type="button" class="basic mr5">&nbsp;&lt;&nbsp;</button>
            <button id="allTo1" type="button" class="basic">&nbsp;&lt;&lt;&nbsp;</button>
        </div>
        <div class="rightPart">
            <div class="filter">
                <span>Filter:</span>
                <input type="text" id="box2Filter" class="boxFilter" />
                <input type="button" id="box2Clear" class="fBtn" value="x" />
                <div class="clear"></div>
            </div>
            <select id="box2View" multiple="multiple" class="multiple" style="height:200px;">
                <option value="1">ITEM001</option>
                <option value="2">ITEM002</option>
                <option value="3">ITEM003</option>
                <option value="4">ITEM004</option>
            </select>
            <br/>
            <span id="box2Counter" class="countLabel"></span>
            <div class="dn">
                <select id="box2Storage"></select>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>
</form>

i am trying something like? (i know the below code is not practical)

$('#purchaseEditUpdateItemBtn').live('click', function(){
    var formData = $('#purchaseEditUpdateItemForm').serialize();
});

You want all items in #box2view or the items which are copied from box1 to box2 or may be something else? — Rakesh Juyal
– Rakesh Juyal, Commented Jul 23, 2012 at 5:44
you got it correct, actually i just want the items from #box2View — Ibrahim Azhar Armar
– Ibrahim Azhar Armar, Commented Jul 23, 2012 at 5:55
You have already found the solution thats great, btw if it is just to see the items then: $('#box2View').select().text() — Rakesh Juyal
– Rakesh Juyal, Commented Jul 23, 2012 at 6:12

Rob Angelier · Accepted Answer · 2012-07-23 05:47:23Z

3

Have you tried something like this:

$('#purchaseEditUpdateItemBtn').click(function(){
   //If the items do not get the "selected" attribute, you could also use this:
   var items = $("select#boxview2 option");

$.each(items, function(index, elem){
   //this will log the value for each item inside the boxview2 list
   console.log(elem.val);
});
});

Good luck!

edited Jul 23, 2012 at 5:47

answered Jul 23, 2012 at 5:37

Rob Angelier

2,33316 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ibrahim Azhar Armar Over a year ago

you are close, i solved it myself. i used this code to fetch values from box2View

$('#purchaseEditUpdateItemBtn').live('click', function(){         var select = [];          $('#box2View option').each(function(i, selected){              select[i] = $(selected).val();          });         console.log(select);         return false;     });

Ram · Accepted Answer · 2012-07-23 06:10:34Z

1

when using serialize() form elements must have name attributes:

<select name='box1View' id="box1View" multiple="multiple" class="multiple" style="height:200px;">
    <option value="5" selcted>ITEM005</option>
    <option value="6">ITEM006</option>
    <option value="7">ITEM007</option>
    <option value="8">ITEM008</option>
</select>

please note that live is deprecated, you can use on() method instead, try the following:

$('form').on('click', 'a.button', function(){
    var formData = $('select').serialize();
});

edited Jul 23, 2012 at 6:10

answered Jul 23, 2012 at 5:46

Ram

145k16 gold badges174 silver badges201 bronze badges

7 Comments

Ibrahim Azhar Armar Over a year ago

this does not work, prints empty string in console, i have added the name attribute to the select element though :(

Ram Over a year ago

@IbrahimAzharArmar have you added name attributes?

Ram Over a year ago

@IbrahimAzharArmar you should first select a value, try this jsfiddle.net/TfHpj

Ibrahim Azhar Armar Over a year ago

okay, so jQuery serialize() requires the values to be selected first in multiple select element? that makes sense. but given the plugin implementation i won't be selecting the values from select box. i was hoping jQuery would do the magic for me :D, anyhow i think i should stick with @Rob Angelier's solution. and thank you.

Ram Over a year ago

@IbrahimAzharArmar there is no need for using jQuery, you can use selected attribute.

|

Gntem · Accepted Answer · 2012-07-23 05:42:21Z

0

try this

$("#purchaseEditUpdateItemBtn").click(function(event){
console.log("Selected from box 1 "+$("select#box1View option:selected")); // selected from #box1View
console.log("Selected from box 2 "+$("select#box2View option:selected")); // selected from #vow2View
console.log($("#purchaseEditUpdateItemForm").serialize());
});

answered Jul 23, 2012 at 5:42

Gntem

7,2052 gold badges37 silver badges48 bronze badges

2 Comments

Rob Angelier Over a year ago

If you look in the HTML source, you can see that none of the items get the "selected" attribute.

Rob Angelier Over a year ago

In that case, You should look at my answer

Collectives™ on Stack Overflow

fetch selected values using jQuery

3 Answers 3

1 Comment

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related