How to get a php style array from form in javascript

Question

I’ve got a HTML Form and I want to pass multiple options to an Array in Ajax. And in the name attribute I define the nested array like: name="query[taxonomy_01][value]” First some code and the question is below.

Rendered HTML

<form>
    <input type="hidden" name="query[taxonomy_01][value][]" value="term_01"  />
    <input type="hidden" name="query[taxonomy_01][value][]" value="term_02"  />

    <input type="hidden" name="query[taxonomy_02][value][]" value="term_01"  />
    <input type="hidden" name="query[taxonomy_02][value][]" value="term_02"  />

    <input type="hidden" name="post_type" value="news" />
    <input type="hidden" name="date_from" value="today" />

    <button type="button" class="button" >Filter content</button>
</form>

This is the Javascript I have so far:

 $(".button").click(function () {
        var formData = $(this).closest('form').serializeArray();
        console.log(formData); 
  });

This would be the desired array in JS:

formData  = array(
    [query] => array(
        [taxonomy_01] => array(
            [value] =>  array(
                ’term_1',
                ’term_2’,
            )
        )
        [taxonomy_02] => array(
            [value] =>  array(
                ’term_1',
                ’term_2’,
            )
        )
    ),
    [post_type] => 'news',
    [date_from] => 'today'
)

The Question

How do I process the values to the array and combine them?

Thoughts, am I using .serializeArray() wrong. Or should I split the value of the name attribute somehow to convert it into an array?

Unlike the desired output the current output is like this:

formData  = array(
    [query[taxonomy_01][value]] => ’term_1',
    [query[taxonomy_01][value]] => ’term_2’,
    [query[taxonomy_02][value]] => ’term_1',
    [query[taxonomy_02][value]] => ’term_2’,            
    [post_type] => 'news',
    [date_from] => 'today'
)

@sking I would like to process it in javascript / jquery. The PHP side is all-done. I'm building this add-on on top of something existing. Therefore I first need to create/re-create the array on the jquery side before sending the array through ajax. — Tim
– Tim, Commented Jan 19, 2019 at 10:09
Neither jQuery nor standard browser APIs include a built-in function for converting a form to a PHP-style data structure based on square brackets in the name attributes. You'll need to either build this from scratch or find a different third-party library that does it for you. — Quentin
– Quentin, Commented Jan 19, 2019 at 10:09
Ok, so from what I understand is best approach is to build a method myself to rebuild the array. — Tim
– Tim, Commented Jan 19, 2019 at 10:12

tinker · Accepted Answer · 2019-01-19 11:37:45Z

1

To convert form value to php style array in javascript, we can use a port of php function parse_str in javascript found here. Jquery does have a api to get form as encoded string .serialize()

A demo using your form https://jsfiddle.net/cp9akow0/

edited Jan 19, 2019 at 11:37

answered Jan 19, 2019 at 11:29

tinker

9251 gold badge6 silver badges13 bronze badges

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

3 Comments

Tim Over a year ago

Well that's just gorgeous, plug and play. Thank you very much :)

Tim Over a year ago

:) :) It even fixed a problem I wanted to address later on. Within one of the values in my actual code I also send some encoded (nested) array values. This script also decoded it and passed it as separate elements in the final array. Big bonus, thanks

tinker Over a year ago

@TIm glad to help :)

Collectives™ on Stack Overflow

How to get a php style array from form in javascript

The Question

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

The Question

1 Answer 1

3 Comments

Related