How to get a php style array from form in javascript
0
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'
)
jquery html forms
edited Jan 19 at 11:38
sking
37619
asked Jan 19 at 9:37
TimTim
8811
|
show 2 more comments
0
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'
)
jquery html forms
edited Jan 19 at 11:38
sking
37619
asked Jan 19 at 9:37
TimTim
8811
1
@Mohamed-Yousef, Yes, thank you. I've added a button.
– Tim
Jan 19 at 9:50
are you trying to process the data in php or javascript ?
– sking
Jan 19 at 10:04
@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
Jan 19 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
Jan 19 at 10:09
Ok, so from what I understand is best approach is to build a method myself to rebuild the array.
– Tim
Jan 19 at 10:12
|
show 2 more comments
0
0
0
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'
)
jquery html forms
edited Jan 19 at 11:38
sking
37619
asked Jan 19 at 9:37
TimTim
8811
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'
)
jquery html forms
jquery html forms
edited Jan 19 at 11:38
sking
37619
asked Jan 19 at 9:37
TimTim
8811
edited Jan 19 at 11:38
sking
37619
asked Jan 19 at 9:37
TimTim
8811
edited Jan 19 at 11:38
sking
37619
edited Jan 19 at 11:38
sking
37619
edited Jan 19 at 11:38
sking
37619
37619
asked Jan 19 at 9:37
TimTim
8811
asked Jan 19 at 9:37
TimTim
8811
asked Jan 19 at 9:37
TimTim
8811
8811
1
@Mohamed-Yousef, Yes, thank you. I've added a button.
– Tim
Jan 19 at 9:50
are you trying to process the data in php or javascript ?
– sking
Jan 19 at 10:04
@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
Jan 19 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
Jan 19 at 10:09
Ok, so from what I understand is best approach is to build a method myself to rebuild the array.
– Tim
Jan 19 at 10:12
|
show 2 more comments
1
@Mohamed-Yousef, Yes, thank you. I've added a button.
– Tim
Jan 19 at 9:50
are you trying to process the data in php or javascript ?
– sking
Jan 19 at 10:04
@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
Jan 19 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
Jan 19 at 10:09
Ok, so from what I understand is best approach is to build a method myself to rebuild the array.
– Tim
Jan 19 at 10:12
1
1
@Mohamed-Yousef, Yes, thank you. I've added a button.
– Tim
Jan 19 at 9:50
@Mohamed-Yousef, Yes, thank you. I've added a button.
– Tim
Jan 19 at 9:50
are you trying to process the data in php or javascript ?
– sking
Jan 19 at 10:04
are you trying to process the data in php or javascript ?
– sking
Jan 19 at 10:04
@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
Jan 19 at 10:09
@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
Jan 19 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
Jan 19 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
Jan 19 at 10:09
Ok, so from what I understand is best approach is to build a method myself to rebuild the array.
– Tim
Jan 19 at 10:12
Ok, so from what I understand is best approach is to build a method myself to rebuild the array.
– Tim
Jan 19 at 10:12
|
show 2 more comments
1 Answer
1
active
oldest
votes
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/
answered Jan 19 at 11:29
skingsking
37619
Well that's just gorgeous, plug and play. Thank you very much :)
– Tim
Jan 19 at 11:51
:) :) 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
– Tim
Jan 19 at 11:55
@TIm glad to help :)
– sking
Jan 19 at 11:56
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54265767%2fhow-to-get-a-php-style-array-from-form-in-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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/
answered Jan 19 at 11:29
skingsking
37619
Well that's just gorgeous, plug and play. Thank you very much :)
– Tim
Jan 19 at 11:51
:) :) 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
– Tim
Jan 19 at 11:55
@TIm glad to help :)
– sking
Jan 19 at 11:56
add a comment |
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/
answered Jan 19 at 11:29
skingsking
37619
Well that's just gorgeous, plug and play. Thank you very much :)
– Tim
Jan 19 at 11:51
:) :) 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
– Tim
Jan 19 at 11:55
@TIm glad to help :)
– sking
Jan 19 at 11:56
add a comment |
1
1
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/
answered Jan 19 at 11:29
skingsking
37619
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/
answered Jan 19 at 11:29
skingsking
37619
edited Jan 19 at 11:37
answered Jan 19 at 11:29
skingsking
37619
answered Jan 19 at 11:29
skingsking
37619
answered Jan 19 at 11:29
skingsking
37619
37619
Well that's just gorgeous, plug and play. Thank you very much :)
– Tim
Jan 19 at 11:51
:) :) 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
– Tim
Jan 19 at 11:55
@TIm glad to help :)
– sking
Jan 19 at 11:56
add a comment |
Well that's just gorgeous, plug and play. Thank you very much :)
– Tim
Jan 19 at 11:51
:) :) 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
– Tim
Jan 19 at 11:55
@TIm glad to help :)
– sking
Jan 19 at 11:56
Well that's just gorgeous, plug and play. Thank you very much :)
– Tim
Jan 19 at 11:51
Well that's just gorgeous, plug and play. Thank you very much :)
– Tim
Jan 19 at 11:51
:) :) 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
– Tim
Jan 19 at 11:55
:) :) 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
– Tim
Jan 19 at 11:55
@TIm glad to help :)
– sking
Jan 19 at 11:56
@TIm glad to help :)
– sking
Jan 19 at 11:56
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54265767%2fhow-to-get-a-php-style-array-from-form-in-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
@Mohamed-Yousef, Yes, thank you. I've added a button.
– Tim
Jan 19 at 9:50
are you trying to process the data in php or javascript ?
– sking
Jan 19 at 10:04
@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
Jan 19 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
Jan 19 at 10:09
Ok, so from what I understand is best approach is to build a method myself to rebuild the array.
– Tim
Jan 19 at 10:12