2

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

zzzzBov
  • 174,988
  • 54
  • 320
  • 367
Stefano Maglione
  • 3,946
  • 11
  • 49
  • 96
  • http://stackoverflow.com/a/1764199/989920 – evolutionxbox Apr 07 '16 at 15:11
  • 2
    What's the difference? A url is just a meaningless string. If you want it to be handled as an array, then handle it as an array in whatever code accesses the url. – 4castle Apr 07 '16 at 15:11
  • @4castle - I commented too soon. – evolutionxbox Apr 07 '16 at 15:11
  • 2
    @4castle, PHP uses this particular non-standard array syntax to automatically parse query strings on the server and populate `$_GET`. Without the `[]` characters, the behavior is drastically different. – zzzzBov Apr 07 '16 at 15:17
  • @zzzzBov Who said anything about PHP? The OP needs to explain why they are doing this. If it's in order to use the convenience methods in PHP, then I understand. – 4castle Apr 07 '16 at 15:40
  • @4castle, I brought up PHP because that's the only place I've seen the `[]` syntax used, and this question exactly matches the use case. – zzzzBov Apr 07 '16 at 15:45
  • @4castle it's inappropriate and rude to make sweeping changes to a question without feedback from the OP. while I'm certain that the use case is for PHP, I'm not about to go changing the tags or question until stefano responds. – zzzzBov Apr 08 '16 at 12:18
  • Possible duplicate of [How to pass an array within a query string?](http://stackoverflow.com/questions/6243051/how-to-pass-an-array-within-a-query-string) – 4castle Apr 08 '16 at 13:19
  • If you were going to fix this question so that it isn't a duplicate, then you need to ask a question such as "I see the answers to this other question, but what solutions are there that use jQuery?" Then it would be an acceptable question. – 4castle Apr 08 '16 at 15:19

2 Answers2

1

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 [].

zzzzBov
  • 174,988
  • 54
  • 320
  • 367
  • This is an HTML answer to a JavaScript question. OP never tagged HTML, which makes an HTML answer inappropriate. Sound familiar? – 4castle Apr 08 '16 at 12:57
  • 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](http://stackoverflow.com/questions/6243051/how-to-pass-an-array-within-a-query-string). – 4castle Apr 08 '16 at 13:17
  • @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. – zzzzBov Apr 08 '16 at 13:51
  • 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. – 4castle Apr 08 '16 at 14:20
  • 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. – 4castle Apr 08 '16 at 14:26
  • @4castle, The question mentioned using [`.serialize()`](http://api.jquery.com/serialize/) which works with `
    ` elements.
     – zzzzBov Apr 08 '16 at 14:27
  • Right, but I'm saying if this is the answer to the question, then jQuery is not relevant, and this is a duplicate question. – 4castle Apr 08 '16 at 14:31
  • @4castle, I understood what you were saying the first time. I also disagree with it. Comments are not the place for this sort of extended discussion. If enough others agree with you this question will be closed anyway. – zzzzBov Apr 08 '16 at 14:35
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/108645/discussion-between-4castle-and-zzzzbov). – 4castle Apr 08 '16 at 14:53
0

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);
}

JSFiddle

4castle
  • 32,613
  • 11
  • 69
  • 106