I want to use html form elements arranged well.

We have prepared html as follows.

<form>
  <h2>Query 1</h2>
  <input type="hidden" name="query[][name]"value="query1">
  <input type="hidden" name="query[][params][][name]"value="param11">
  Parameter 1<input type="text" name="query[][params][][value]"value="value11"><br>
  <input type="hidden" name="query[][params][][name]"value="param12">
  Parameter 2<input type="text" name="query[][params][][value]"value="value12"><br>
  <input type="hidden" name="query[][params][][name]"value="param13">
  Parameter 3<input type="text" name="query[][params][][value]"value="value13"><br>

  <h2>Query 2</h2>
  <input type="hidden" name="query[][name]"value="query2">
  <input type="hidden" name="query[][params][][name]"value="param21">
  Parameter 1<input type="text" name="query[][params][][value]"value="value21"><br>
  <input type="hidden" name="query[][params][][name]"value="param22">
  Parameter 2<input type="text" name="query[][params][][value]"value="value22"><br>
  <input type="hidden" name="query[][params][][name]"value="param23">
  Parameter 3<input type="text" name="query[][params][][value]"value="value23"><br>

  <input type="submit" value="send">
</form>

When I pressed the Submit button on this form, I expected the data to be sent in json format to look like this:

{
  "query": [
    {
      "name": "query1",
      "params": [
        {
          "name": "param11",
          "value": "value11"
        },
        {
          "name": "param12",
          "value": "value12"
        },
        {
          "name": "param13",
          "value": "value13"
        }
      ]
    },
    {
      "name": "query2",
      "params": [
        {
          "name": "param21",
          "value": "value21"
        },
        {
          "name": "param22",
          "value": "value22"
        },
        {
          "name": "param23",
          "value": "value23"
        }
      ]
    }
  ]
}

However, the results turned out to be as follows:

{
  "query": [
    {
      "params": [
        { "value": "value11"}
      ]
    },
    {
      "params": [
        { "value": "value12"}
      ]
    },
    {
      "params": [
        { "value": "value13"}
      ]
    },
    {
      "params": [
        { "value": "value21"}
      ]
    },
    {
      "params": [
        { "value": "value22"}
      ]
    },
    {
      "params": [
        { "value": "value23"}
      ]
    },
    {
      "params": [
        { "name": "param11"}
      ]
    },
    {
      "params": [
        { "name": "param12"}
      ]
    },
    {
      "params": [
        { "name": "param13"}
      ]
    },
    {
      "params": [
        { "name": "param21"}
      ]
    },
    {
      "params": [
        { "name": "param22"}
      ]
    },
    {
      "name": "query1",
      "params": [
        { "name": "param23"}
      ]
    },
    { "name": "query2"}
  ]
}

How should I write the name attribute of html to make it look like I expected?
By the way, the array part is

{
  "0": {
    ...
  },
  "1": {
    ...
  },
  ...
}

I don't want to write like that.I would like to use it as a normal array instead of an associative array.

html json

2022-09-30 21:39

1 Answers

If you don't specify an index number, you won't be able to convey your intention to include it in the same associative array.

<form>
  <h2>Query 1</h2>
  <input type="hidden" name="query[0][name]"value="query1">
  <input type="hidden" name="query[0][params][0][name]"value="param11">
  Parameter 1<input type="text" name="query[0][params][0][value]"value="value11"><br>
  <input type="hidden" name="query[0][params][1][name]"value="param12">
  Parameter 2<input type="text" name="query[0][params][1][value]"value="value12"><br>
  <input type="hidden" name="query[0][params][2][name]"value="param13">
  Parameter 3<input type="text" name="query[0][params][2][value]"value="value13"><br>

  <h2>Query 2</h2>
  <input type="hidden" name="query[1][name]"value="query2">
  <input type="hidden" name="query[1][params][0][name]"value="param21">
  Parameter 1<input type="text" name="query[1][params][0][value]"value="value21"><br>
  <input type="hidden" name="query[1][params][1][name]"value="param22">
  Parameter 2<input type="text" name="query[1][params][1][value]"value="value22"><br>
  <input type="hidden" name="query[1][params][2][name]"value="param23">
  Parameter 3<input type="text" name="query[1][params][2][value]"value="value23"><br>

  <input type="submit" value="send">
</form>

2022-09-30 21:39

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656