Send input array with jquery Post without submitting form

Question

I need to Post data to an url without submitting a form and reloading the page but I'm not too good with JQuery. How would I execute something along the lines of this html:

<input type="text" name="name">
<input type="text" name="stuff[]">
<input type="text" name="stuff[]">
<input type="text" name="stuff[]">
<input type="text" name="stuff[]">
<button onclick="send()">send</button>

JQuery:

function send() {
params= {'name': $('#name').val(), 'stuff': $('#stuff[]').val()};
$.post( "url/test", params );
}

it doesn't actually work, this is just what I would logically guess how to do it. — Chaosjosh
– Chaosjosh, Commented Jul 15, 2015 at 22:31
@Chaosjosh - I did a rollback on your last edit for 2 reasons: 1. it breaks my answer ;b . 2. You've created illegal HTML. You're not allowed to have multiple elements share the same id, but you're allowed to have multiple inputs share the same name. — Amit
– Amit, Commented Jul 15, 2015 at 22:47

wrxsti · Accepted Answer · 2015-07-15 22:38:00Z

3

Additionally you could treat it closer to a traditional form and use the .serialize() method.

HTML

<form name="myForm">
    <input type="text" name="name" />
    <input type="text" name="stuff[]" />
    <input type="text" name="stuff[]" />
    <input type="text" name="stuff[]" />
    <input type="text" name="stuff[]" />
    <input type="submit" value="Send" />
</form>

jQuery

$(function(){
    $('form[name="myForm"]').on('submit', function(e){
        e.preventDefault(); // This prevents the form from actually submitting like a traditional form.
        var formData = $(this).serialize(); // Gathers the form field values
        $.post('url/test', formData, function(data){
            alert(data); // This is the callback that will handle the response from the server.
        });
    });
});

Here is a DEMO. Hope this helps!

edited Jul 15, 2015 at 22:38

answered Jul 15, 2015 at 22:32

wrxsti

3,4941 gold badge21 silver badges30 bronze badges

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

Comments

Amit · Accepted Answer · 2015-07-15 22:36:00Z

2

You can get all the values in all inputs named "stuff[]" like this:

$('#stuff[]').map(function() { return $(this).val(); }).get().join()

This will give you a string concatenating all values, separated by commas.

Use that inside your code like this:

function send() {
  params= {'name': $('#name').val(),
    'stuff': $('input[name="stuff[]"]').map(function() {
       return $(this).val(); }).get().join()};
  $.post( "url/test", params );
}

edited Jul 15, 2015 at 22:36

answered Jul 15, 2015 at 22:17

Amit

46.4k9 gold badges83 silver badges113 bronze badges

6 Comments

Chaosjosh Over a year ago

using this gives me a Syntax error, unrecognized expression :#stuff[]

Amit Over a year ago

@Chaosjosh - sorry, try now

Chaosjosh Over a year ago

Upon using print_r($_POST) I notice that the data is not actually sent in an array, is there a way to do this or should I just use PHP to fix this issue

wrxsti Over a year ago

@Chaosjosh Take a look at my answer. print_r($_POST) will work just fine with it.

Chaosjosh Over a year ago

@wrxsti I appreciate your help but unfortunately my application is a lot more complex than my code shows(simplified for sanity sake), Amit's answer was easiest to expand towards my code. All i had to do was getcsv() the data and it worked fine.

|

DominicValenciana · Accepted Answer · 2015-07-15 22:45:22Z

0

You could possibly use the a for loop to iterate through the elements and then put them all in an array.

answered Jul 15, 2015 at 22:45

DominicValenciana

1,7512 gold badges16 silver badges27 bronze badges

Collectives™ on Stack Overflow

Send input array with jquery Post without submitting form

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related