0


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();
});
3
  • You want all items in #box2view or the items which are copied from box1 to box2 or may be something else? Jul 23, 2012 at 5:44
  • you got it correct, actually i just want the items from #box2View 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() Jul 23, 2012 at 6:12

3 Answers 3

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!

1
  • 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; }); Jul 23, 2012 at 5:45
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();
});
7
  • this does not work, prints empty string in console, i have added the name attribute to the select element though :( Jul 23, 2012 at 5:52
  • @IbrahimAzharArmar have you added name attributes?
    – Ram
    Jul 23, 2012 at 5:53
  • @IbrahimAzharArmar you should first select a value, try this jsfiddle.net/TfHpj
    – Ram
    Jul 23, 2012 at 5:56
  • 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. Jul 23, 2012 at 6:00
  • @IbrahimAzharArmar there is no need for using jQuery, you can use selected attribute.
    – Ram
    Jul 23, 2012 at 6:11
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());
});
2
  • 1
    If you look in the HTML source, you can see that none of the items get the "selected" attribute. Jul 23, 2012 at 5:43
  • In that case, You should look at my answer Jul 23, 2012 at 5:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.