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

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!

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.5k9 gold badges84 silver badges114 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

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

Collectives™ on Stack Overflow

Send input array with jquery Post without submitting form

3 Answers 3

Comments

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

Comments

Related