如何发布有条件的已禁用/只读输入字段？

Question

I am trying to make my input field disabled or readonly if a button is not yet pressed but I am having problems with posting/submitting it to the database after I added a condition which makes it disabled or readonly

    <form action="{{ route('amber.timestone.home.start', $task->id) }}" method="POST" class="align-center">
                                {{csrf_field()}}
                            <td>
                                <input class="my-2" type="text" name="ref" value="{{ $task->ref }}"
                                    @if(empty($task->start))
                                        readonly
                                    @endif
                                >


public function startTask($id)
    {
        $user = Task::find($id);
        $user->start = Carbon::now();
        $user->save();
        return back();
    }
public function endTask($id, Request $request)
    {
        $user = Task::find($id);
        $user->end = Carbon::now();
        $start = Carbon::parse($user->start);
        $end = Carbon::parse($user->end);
$user->ref = request('ref');
        $user->remarks = request('remarks');
        $user->campaign = request('campaign');
        $user->type = request('type');
            $hours = $end->diffInHours($start);
            $minutes = $end->diffInMinutes($start);
            $seconds = $end->diffInSeconds($start);
            $user->duration = $hours . ':' . $minutes . ':' . $seconds;
            $user->update();
            return back();
        }

I tried adding hidden with the same names as for those who are with readonly condition still not working

Answer 1

Disabled fields are not posted with the requests however you can add readonly attribute.

One other thing you can do is that disabling the field for the UI purpose and add a hidden input below with the same name and the value.

Answer 2

HTML is a markup language, it highlights the data semantic, not the way the data is seen (eg using <strong> to make a text bold is a totally wrong way). So you should use a CSS-customized text container( <div> or <span> mostly) to encapsulate it and being btw read-only. Then, just like Adam abdul shakoor suggested, you may use an hidden input with the same value. You should also consider using VueJS (already packaged within Laravel), its data-driven approach makes this kind of things trivial to keep container's and input's contents synchronized.

Answer 3

What do you think? If you have a value that needs to be sent back, place it in the hidden input field. So you could create a fake field using css, maybe. But if you do not want to send any data, just to show it, you may simply not include the hidden input field with the value.