I was wondering if there is a way to store pass an array to an input tag's value attribute? So if I have a form.

<form action="/some-route" method="POST">
   <input type=hidden name=someProperty />
   <button type="submitt">send</button>
</form>

So with a hidden input tag with name equal to someProperty is there a way to store an Array of data inside the value property? Basically when I submitt the form I want the value of the input tag post the data in the form of an array.

I have read somewhere that I can do this by setting the value of someProperty to name=someProptery[]. However I think this may only work in PHP.

CodePudding user response：

With HTTP there are basically no data types, including array. When you send a request or response via HTTP the data are just basic text. But how is it possible that some languages like JavaScript or PHP give us the data in easy to use variables? That is because we use something called media type.

Media type

Media types (or MIME) are basically different formats/representations of data. After all all the data we send are basically just bytes (or we might see as a text). MIME universaly describes how data are structured so when one programmer sends some data to other programmer they will both know how to properly parse it. Take for example JSON. JSON is simple media type where we represent our data with specific syntax in which we use concepts like objects, arrays, int or strings. JSON is generally recognized in many languges so you might send data with JavaScript and parse it with PHP, because they both know how the JSON is structured and they will parse into its own structure (like yours PHP array).

Sending data with HTML forms

When we submit a HTML form its data are by default sent as application/x-www-form-urlencoded media type (if you inspect the raw HTTP request you can see it for yourself). This media type is much more simpler than JSON because it only contains keys and values. For example name=Bob&message=hello contains two keys: name and message. name holds value Bob and message holds hello. And you see why this might be a problem when you want to send an array with this media type.

Solution

You wrote a solution that works only for PHP and you are right. PHP can translate keys that end with [] to an array. So if you have data arr[]=first&arr[]=second PHP will parse into array ["first", "second"] stored under arr as its name. But there is no specification that says this is the correct way of parsing application/x-www-form-urlencoded. Every language might parse into a bit different structure. So the solution? It depends on the server side. Altough some languages can't interpret the [] notation into an array like PHP do, you can write your own parser which can parse it into an array (or you might find library for it). Or if you can just put values into a input and seperate with some character like ; and when the input is recieved on the server you just split the accepted value into multiple values and you got your array! Or you can even put a JSON into some of your inputs and parse JSON instead. The solution is really up to you.

CodePudding user response：

Form inputs can only contain string values, not arbitrary javascript constructs.

HTML does support multiple form inputs of the same name, and will pass all of the individual values to the server as separate params (with the same name) which could then be parsed back into an array on the server. For example, this form would end up calling the URL http(s)://example.com?foo=1&foo=2&foo=3:

<form method=GET>
  <input name="foo" type="hidden" value="1">
  <input name="foo" type="hidden" value="2">
  <input name="foo" type="hidden" value="3">  
  <input type="submit">
</form>

PHP uses the convention that if the input name includes [] then it will automatically parse the results into an array for you; that is specific to PHP however, the brackets have no meaning otherwise. If you are using some other serverside language (or using the data clientside) then you would need to read each of the values individually yourself and combine them into an array. In some cases it may be simpler to convert your array into a string form, CSV or JSON perhaps, and stuff that into a single input.

CodePudding user response：

Seems like you need to first store the array you want to output inside of a variable.

Once you have done that you should set the "name={variable}". Then write a function that iterates through that array every time your button submits.