serialize array inputs and send it via post jQuery

Question

I'm trying to format the data to send it to the server via ajax but I can't serialize exactly the inputs to get the correct array at the end, I cannot understand what I'm doing wrong.

<input name="option[16]" value="Value1">
<input name="option[17]" value="Value2">
<input name="option[18]" value="Value3">

var final_options = new Array();
$('input[name="option[]"]').each(function() {
    final_options[$(this).attr('name')] = $(this).attr('value');
});
$.ajax({
    type: "POST",
    url:"./urlPost",    
    data: {final_options: final_options},
    dataType: 'json',
    success: function(data){
        console.log('Ok');
    }
});

On server side I need to translate it as;

array(
  array(
    '16' => 'Value1'
  ),
  array(
    '17' => 'Value2'
  ),
  array(
    '18' => 'Value3'
  ),
)

Because im not using a form, im getting the values from part of inputs. — ndAR
– ndAR, Commented Nov 25, 2015 at 19:28
you can serialize anything, doesn't have to be in a form. serialize will accept any dom element that contains form inputs/textareas — Marc B
– Marc B, Commented Nov 25, 2015 at 19:34

Barmar · Accepted Answer · 2015-11-25 19:50:37Z

1

Use .serialize. You don't need a form, you can select the elements themselves.

var final_options = $("input[name^=option]").serialize();

Note that I used an Attribute Starts With Selector to match all the option[#] inputs. Your selector would only match name=option[], not name=option[16].

On the server this will become:

$_POST['final_options'] = array(
    'options' => array(
        16 => 'Value1',
        17 => 'Value2',
        18 => 'Value3'
    )
)

In your code, $(this).attr('name') will be something like option[16]. So when you do

final_options[$(this).attr('name')] = $(this).attr('value');

you're assigning to final_options['option[16]'], not final_options[16].

Finally, to get the current value of an input, use .val(), not .attr('value'). The latter gets the value attribute from the DOM, which is just the initial default value.

edited Nov 25, 2015 at 19:50

answered Nov 25, 2015 at 19:33

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

4 Comments

ndAR Over a year ago

Ok, i understand you, but for this i will need to push some how the keys that are 16,17 an 18. Thx

Barmar Over a year ago

They are the keys in the resulting array.

ndAR Over a year ago

I'm not fallowing you, can you please be more exactly ?, you can just give me a link with documentation to understand how to serialize only by selecting an element,but that element contains the key inside of square brackets, so what i need is to send to the server side the key and value.

Barmar Over a year ago

I've corrected the answer, maybe it will be clearer now. .serialize takes care of parsing the name attributes and serializing it so that PHP will turn it back into an array properly.

Collectives™ on Stack Overflow

serialize array inputs and send it via post jQuery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related