Home > Enterprise >  Using fieldset element to bundle inputs in laravel
Using fieldset element to bundle inputs in laravel

Time:10-21

I'm working on a form with a lot of possible values in laravel. I've made use of the fieldset element to bundle certain inputs and make it ever so slightly easier to disable inputs. I can do that by simply disabling the fieldset element but I can't seem to get back this or any other information about the fieldset element wrapping around certain inputs through laravel.

I've currently set up the name of the input with an array notation so that data is organized in a way I can iterate over it like so:

<input type="number" name="input[items][{{$item->id}}][price]">

This implementation works like I want it to but it's repeated across many lines resulting in large blocks of repeated text which I'd like to condense where possible for both maintainability and readability.

My code that I'm trying to make work currently looks somewhat like this example:

@foreach($list as $item)
<fieldset name="input[items][{{$item->id}}]">
    <input type="text" name="title">
    <input type="number" name="amount">
</fieldset>
@endforeach

<fieldset name="input[tasks][878]">
    <input type="text" name="...">
</fieldset>

I expect the data coming through to be in a format like this (ignore triple dots as placeholder)

input: [
   items: [    
       321: {
           title: "product name"
           amount: 7
       },
       123: {
           title: "other product name"
           amount: 2
       } 
   ],
   tasks: [ 
      878: {
         ...
      } 
   ]
]

So my question is: Is the fieldset element even included in a POST request or is it purely for client side use? Is there a way I can make this work, by sending data about the fieldset along the inputs? The only thing I can think of without this possibility is making hidden inputs but that seems like the wrong way to do it.

There's some more information I found but it's not quite answering my question.

HTML input arrays HTML Input name attribute as array - how to access values in laravel

https://laravel.com/docs/8.x/requests#flashing-input-then-redirecting

CodePudding user response:

The <fieldset> is just a block level element used for logically grouping related elements together. It is useful for accessibility requirements, when used with the <legend> element, but isn't actually included as part of a form submission.

As the <input> elements of your <fieldset> do not have unique name attributes, all that will happen with your implementation is any subsequent element(s) with the same name will override the value previously assigned to that key when the form is submitted (you may already have seen this if you've done some debugging etc.).

Rather than applying the $item->id key to the <fieldset>, apply it to the inputs instead:

<fieldset>
    <legend>items</legend>
    @foreach($list as $item)
        <input type="text" name="items[{{ $item->id }}][title]" />
        <input type="number" name="items[{{ $item->id }}][amount]" />
    @endforeach
</fieldset>

The above will result in the following structure when accessed from your $request object (dd($request->items);):

^ array:2 [▼
  321 => array:2 [▼
    "title" => "product name"
    "amount" => "7"
  ]
  123 => array:2 [▼
    "title" => "other product name"
    "amount" => "2"
  ]
]

You can then apply the same principle to tasks.

  • Related