SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    May 2008
    Location
    Missouri, USA
    Posts
    273
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery - Multiple Select Form Post

    I'm trying to use jQuery to submit my form data but I can't seem to get it quite right. Here is my jquery function:

    Code JavaScript:
    $("#toremovefromlist").click(function() {
            var ids = [];
            $('#mailinglist :selected').each(function(i, selected){
                    ids[i] = $(selected).val();
            });
            $.post('toggleMailingList.php',
                    {'ids[]':ids ,'action':'remove','type':'entry'},
                    function(){
                            return !$('#mailinglist option:selected').remove().appendTo('#removelist');
                    }
            );
       });
    #toremovefromlist is a button
    #mailinglist is the first select box with multiple select enabled
    #toggleMailingList.php is the destination script
    #removelist is the second select box.

    The idea is that one box has a list of people. A user selects people he wants to move to the other select box. When they hit the move button the people should move to the other select box and the data should be posted so that the change is made permanent (through database interaction). Any suggestions on what I'm doing wrong?
    Follow Me On Twitter: BryceRay

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,097
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Could you try replacing

    Code:
    ids[i] = $(selected).val();
    with

    Code:
    ids.push(i);
    So it becomes a real array instead of a map?
    I'm not sure if it'll work, but it's worth a shot.
    If it doesn't could you describe what's going wrong exactly? Except for what I pointed out above your code seems perfectly fine.
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you expand on what you mean by it not working? I ran the following code and the proper values were posted, and the selected options were correctly moved to the destination select element.

    PHP Code:
    <select id="source" MULTIPLE size=4>
      <
    option>Volvo</option>
      <
    option>Saab</option>
      <
    option>Mercedes</option>
      <
    option>Audi</option>
    </
    select>

    <
    select id="destination" MULTIPLE size=4>
    </
    select>

    <
    button id="move">Move</button>

    <
    script type="text/javascript">
    $(
    document).ready(function() {
        $(
    '#move').click(function() {
            var 
    ids = [];
            $(
    '#source :selected').each(function(iselected){
                    
    ids[i] = $(selected).val();
            });

            $.
    post('index.php',
                    {
    'ids[]':ids ,'action':'remove','type':'entry'}, function(data) {
                    return !$(
    '#source :selected').remove().appendTo('#destination');
                    }
        );
        })


    })

    </script> 


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •