How to access jQuery serialized data?

Question

How can I access the data that has been 'serialized' using the jQuery function?

var test = $("form").serialize();

I have this data...

url=hello+1&title=hello+1&content=abc

How can I get the value of 'url'? - I tried this...

console.log(test.url); 

But I get undefined - I want to get the result as "hello+1"

Actually

Answer 1

The serialize method only creates a URL encoded string from a form, but this is a string, i.e you can not get the value of url or any other value. To do so you need to parse back the string into an object. You can check library out: https://github.com/kflorence/jquery-deserialize

However it would be best if you simply select the field containing that value and get it from there, i.e.

jQuery('input[name="url"]').val();

or if you have an id or class on that field, you can use it as a selector.

P.S. The value of url is "hello 1" the + is just how spaces are encoded in query strings.

Hypsometer

Answer 2

The serialize() method is designed to create a URL encoded string, usually used for AJAX requests to the server. This means you can't access the string like an object or array in the traditional sense, instead you have two options for achieving the result you want...

(This question might be old but the original answers don't really answer the initial question and nor do they give much explanation...)

Method 1 : Serialize Array

The first method and my preferred one, is to use the serializeArray() method, this can be a useful method if you have several values and want to get the value of each, rather than having to explicitly select each element to get there value.

A solution, like below, using this method will serialize the selected form or element into an array of objects which can then be put into a single object and accessed easily using a function to get the values when and where you need them in your script...

//Serialize the Form
var values = {};
$.each($("form").serializeArray(), function (i, field) {
    values[field.name] = field.value;
});

//Value Retrieval Function
var getValue = function (valueName) {
    return values[valueName];
};

//Retrieve the Values
var url = getValue("url");

Here's a JSFiddle Code Snippet...

$(document).ready(function () {
    var values = {};

    $.each($("form").serializeArray(), function (i, field) {
        values[field.name] = field.value;
    });

    var getValue = function (valueName) {
        return values[valueName];
    };

    var first = getValue("FirstName");
    var last = getValue("LastName");

    $("#results").append(first + " & ");
    $("#results").append(last);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<form action="">
    First name:
    <input type="text" name="FirstName" value="Foo" />
    <br>Last name:
    <input type="text" name="LastName" value="Bar" />
    <br>
</form>
        
<div id="results"></div>

Method 2 : Element Value

The second method, as already mentioned is to simply get the value directly from the form element that you are trying to collect, rather than serialising the value. This can simply be achieve using the jQuery val() method - this will get the entered value of the selector.

While this method is simple for selecting a single element, it can quickly become messy when trying to select and retrieve the value of several elements from a form...

$("input").val();

Ott

Answer 3

serialize() function returns a string so you can't use it like an object.

To deserialize a string you can use the jQuery BBQ $.deparam() function:

You can find example and documentation here

Source code here

Runstadler

Answer 4

So I found a solution to this. Even though you can get the value of Input directly through Jquery with the selector or through pure javascript. But what if we are sending all this data at once and we have no way to set it? So, as it was answered, The serialize method only creates a URL encoded string from a form, from this we can work with URL, we can create a false URL then.

My solution:

var $form = $('#example_form');
var data = $form.serialize();

console.log(data);

var fakeURL = "http://www.example.com/t.html?" +  data;
var createURL = new URL(fakeURL);

From this you can get values ​​from the URL you created:

createURL.searchParams.get('my_parameter_url')

Also, you can take, set, and among other things. Here is the link to the documentation:

https://developer.mozilla.org/en-US/docs/Web/API/URL/URL

There is even a new way to work with URL in javascript, if you want, do a search and you will find.

Contain