Jquery input array form ajax

Question

How do i get the input array username values in the jQuery variable users?

    <input type='text' name='username[]' class='users' value='test1' />
    <input type='text' name='username[]' class='users' value='test2' />
    <input type='text' name='username[]' class='users' value='test3' />

<div class='submit'>Submit</div>

    <script type="text/javascript">
    $(function() {

        $('.submit').click(function() {

            var users = 
        var dataString = 'users=' + users;

            $.ajax({
            type:'POST',
            url:'users.php',
            data: dataString,
            success: function() {


                }
            });
        });


    });
    </script>

Nechehin · Accepted Answer · 2015-03-13 19:10:28Z

15

    <script>

        $(function() {

            $('.submit').click(function() {

                // Get data as array, ['Jon', 'Mike']
                var users = $('input[name="username[]"]').map(function(){ 
                    return this.value; 
                }).get();

                $.ajax({
                    type: 'POST',
                    url: 'users.php',
                    data: {
                        'username[]': users,
                        // other data
                    },
                    success: function() {

                    }
                });

            });

        });

    </script>

edited Mar 13, 2015 at 19:10

answered Mar 13, 2015 at 9:36

Nechehin

1,3811 gold badge10 silver badges10 bronze badges

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

1 Comment

TARKUS Over a year ago

Not as elegant as the other solutions, but it works great.

Cᴏʀʏ · Accepted Answer · 2011-10-22 02:43:14Z

11

Check out jQuery.serialize(). It should give you an array of the usernames.

var users = $('input:text.users').serialize();

You can be however lazy or specific with the selector: .users,input.users,form .users would all work, plus a few more.

For this example:

// users = 
username[]=test1&username[]=test2&username[]=test3

Which, depending on your server-side technology, will come through in the request as an array of strings for the key "username" (PHP, for example).

edited Oct 22, 2011 at 2:43

answered Oct 22, 2011 at 2:25

Cᴏʀʏ

108k20 gold badges169 silver badges201 bronze badges

Comments

mu is too short · Accepted Answer · 2011-10-22 02:29:38Z

3

You can use map to get an array:

// from inside the submit callback
var users = $(this).find('.users').map(function(i, el) {
    return el.value;
});

Demo (run with the console open): http://jsfiddle.net/ambiguous/w2RRW/

answered Oct 22, 2011 at 2:29

mu is too short

436k71 gold badges863 silver badges822 bronze badges

3 Comments

mu is too short Over a year ago

@user892134: See Intersellar's comment or the documentation: api.jquery.com/map, and are you trying to get an array or URL string? Your question and code say different things.

user892134 Over a year ago

an array, which ajax POST to users.php.

mu is too short Over a year ago

@user892134: If you want an array, then your AJAX call would use data: { users: users }, if you're happy with a URL string then do what you're doing now but use Cory's serialize approach.

Collectives™ on Stack Overflow

Jquery input array form ajax

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related