How to edit multiple field from one blade form - php

Question

Hello I have a form like the below image-
The HTML code for this is-
<table style="width:100%" class="table table-striped">
<tr>
<td><strong>First Name</strong></td>
<td>Test Name</td>
<td><a class="btn btn-success" href="#">Edit</a></td>
</tr>
<tr>
<td><strong>Last Name</strong></td>
<td>Test Name</td>
<td><a class="btn btn-success" href="#">Edit</a></td>
</tr>
<tr>
<td><strong>Username</strong></td>
<td>test_username</td>
<td><a class="btn btn-success" href="#">Edit</a></td>
</tr>
</table>
Now what I am trying here is when I click on edit button I only need to be able to edit that specific field and store the updated value to my database only. All I want to know is, each time I click my form submit button only the updated field value should be passed to my controller method. I can pass my field name by a hidden input.
(I know I can keep a hidden input field in a form and change the field value by javascript. But I need to know if there is any better approach.)
Can I implement this using only one form tag in my Laravel blade? If yes how can I implement this without any touch in JS?

Answer 1

Okay, so you can do this with a css trick, look that I have added the input hidden with css, and instead of the a tag I used a label that is linked to the input with the for and id attributes, so when the user clicks on the label it focus on the input and triggers the css input:focus that shows the input and hide the name.
All is wrapped by a single form that if you add a <button type="input">Send</button> will send all to the controller
But you've mentioned that you just want to send the data that has been changed, unfortunately I don't think that this is possible without javascript, but you should set the value of the input to the original value, so when updated it will update to the same value, no problem at all, acctually almost all edit forms works that way
input {
opacity: 0;
width: 0;
}
input:focus {
visibility: visible;
opacity: 1;
width: 100px;
}
input:focus + span {
display: none;
}
<form>
<table style="width:100%" class="table table-striped">
<tr>
<td><strong>First Name</strong></td>
<td>
<input id="first_name" name="first_name" value="Test Name" />
<span>Test Name</span>
</td>
<td>
<label for="first_name" class="btn btn-success" href="#">Edit</label>
</td>
</tr>
<tr>
<td><strong>Last Name</strong></td>
<td>
<input id="last_name" value="Test Name" />
<span>Test Name</span>
</td>
<td>
<label for="last_name" class="btn btn-success" href="#">Edit</label>
</td>
</tr>
<tr>
<td><strong>Last Name</strong></td>
<td>
<input id="username" value="test_username" />
<span>test_username</span>
</td>
<td>
<label for="username" class="btn btn-success" href="#">Edit</label>
</td>
</tr>
</table>
</form>