I created a URL using jQuery serialize() and it creates something like this:
client_number=4&start_date&client_number=5
the problem is that I would like to have an url with arrays like this:
client_number[]=4&start_date&client_number[]=5
2 Answers
The [name] of the input elements that are being serialized must contain [] to produce those PHP compatible query strings.
$(function () {
$('form').on('submit', function (e) {
$('pre').text($(this).serialize());
e.preventDefault();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" name="example1">
<input type="text" name="example1">
<input type="text" name="example2[]">
<input type="text" name="example2[]">
<input type="submit" value="Serialize">
</form>
<pre></pre>Note: the keys will appear with %5B%5D instead of []. This is expected and OK because that is the proper URL encoding for [].
9 Comments
castletheperson
This is an HTML answer to a JavaScript question. OP never tagged HTML, which makes an HTML answer inappropriate. Sound familiar?
castletheperson
I don't understand why this answer was selected. It's a workaround among actual answers. I feel like if anyone was Googling around and found this page, this answer wouldn't help them a bit. If this is the correct answer to the question, then the question is actually a duplicate of this question.
zzzzBov
@4castle, it's not a workaround when it's the expected solution for serializing a form to PHP. The difference between this question and the question you've linked is that this question is with regard to getting jQuery's serialize to work with PHP's query string array syntax while the other one is about how to just post to PHP directly. If jQuery had a different behavior, the answer to this question would need to change while the answer to the other wouldn't.
castletheperson
But the question never mentioned a form. This question actually did ask just how to post the data. If you aren't going to use jQuery or modify the behavior of jQuery
serialize, then how is this an answer to the question? The question that I linked has this as an answer.castletheperson
The behavior of jQuery
serialize is identical to how a browser serializes a form, so jQuery really isn't doing anything unique to merit a separate question. |
If I understand your question, you want to append [] to the duplicate query string items.
A JavaScript solution would be to use .serializeArray() on the form, mark the key/value pairs which are duplicates, add [] to the the name properties of the duplicates, and then convert the object back to a query string using $.param().
function serializeWithDuplicates(form) {
var pairs = $(form).serializeArray();
for (i = 0; i < pairs.length; i++)
for (j = i + 1; j < pairs.length; j++)
if (pairs[i].name === pairs[j].name)
pairs[i].isDuplicate = pairs[j].isDuplicate = true;
for (i = 0; i < pairs.length; i++)
if (pairs[i].isDuplicate)
pairs[i].name += "[]";
return $.param(pairs);
}
1 Comment
castletheperson
I've updated my code so it's much better. See what you think!
$_GET. Without the[]characters, the behavior is drastically different.