CODEWITHSUNDEEP
jquery
tirenweb
tirenweb

Reputation: 31749

jQuery: about the output of serialize()

I'm getting this output after serializing a form using serialize().

cambio_estado_factura%5Bestado%5D=1

As the doc says, I expected something in this format:

a=1&b=2&c=3&d=4&e=5

This is the form I'm serializing:

<form id="cambio_estado" action="">
    <div class="fld ">
        <label for="cambio_estado_factura_estado">Estado</label>
        <ul class="radio_list">
            <li>
                <input name="cambio_estado_factura[estado]" type="radio" value="1" id="cambio_estado_factura_estado_1">
                <label for="cambio_estado_factura_estado_1">Recibida</label>
            </li>
            <li>
                <input name="cambio_estado_factura[estado]" type="radio" value="2" id="cambio_estado_factura_estado_2">
                <label for="cambio_estado_factura_estado_2">Registrada</label>
            </li>
        </div>
    <input id="cambio_estado" type="submit" value="Cambiar">
</form>

And this is the jquery code:

$('form#cambio_estado').submit(function(e){
    e.preventDefault();
    alert();
    console.log($('form#cambio_estado'));
    var datos_formulario = $('form#cambio_estado').serialize();
    console.log(datos_formulario);
    $.post($("section#consultarFactura").data("url-cambio-estado"),
        {"cambio_estado_factura": datos_formulario }
    );

});

Any idea?

jQuery 1.6.1

Upvotes: 0

Views: 610

Answers (3)

Ioannis Karadimas
Ioannis Karadimas

Reputation: 7906

This actually is the correct behavior for serialize().

Your issue is that the name in the form is cambio_estado_factura[estado]. This would actually translate to cambio_estado_factura%5Bestado%5D, which is the escaped name of the element. Serialize() will take the name you use for each element on the form. If you want to have a different name appear on the resulting query string, use the appropriate names on the form itself.

An example - this form will return a=1&a=2 on calling serialize() on it.

<form>
    <input type="text" name="a" value="1" />
    <input type="text" name="b" value="2" />
</form>

EDIT:

Referring to your comments, this is my example of parse_str:

parse_str('cambio_estado_factura%5Bestado%5D=1', $arr);
var_dump($arr);
echo $arr["cambio_estado_factura"]["estado"] == 1 ? "Value set" : "Value not set";

This returns:

array
 'cambio_estado_factura' => 
    array
      'estado' => string '1' (length=1)

Value set

Which means that you assume your array is single-level while in fact it is multi-level.

Upvotes: 2

robasta
robasta

Reputation: 4701

Its taking the name of the input, which is name="cambio_estado_factura[estado]" also, since the two input controls share the same name, the form will submit just one.

The name is used when sending data in a form submission. Different controls respond differently. For example, you may have several radio buttons with different ids, but the same name. When submitted, there is just the one value in the response.

So be careful to have unique names in the form.

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167240

The string has been encoded.

%20 is space
%5B is '['
and %5D is ']'

Since you have given cambio_estado_factura[5Bestado] as an array, the final output it passes is only one parameter:

cambio_estado_factura[5Bestado] = 1

This is same as URL Encoding and it is the safe way of transmitting content to URLs. This is the expected way too.

Upvotes: 0

Related Questions