Поместите удалить и патч на той же странице в Laravel

Question

<form action="/projects/{{$project->id}}" method="POST">
{{  method_field('DELETE') }}
{{  method_field('PATCH')  }}

{{ csrf_field() }}
<input type="text" name="heroname" value="{{$project->heroname}}"><br>

<textarea name="description" cols="30" rows="10" type="text">{{$project->description}}</textarea><br>

<button type="submit">Edit Info</button>

<button type="submit">Delete data</button>

</form>

В чем проблема, если я поставлю «PATCH» позже, обе мои кнопки обновят материал, а если я добавлю «DELETE» позже, обе кнопки удалят его.Так как можно решить эту проблему, чтобы обе кнопки работали там, а не другие.

Answer 1

У вас есть два (на самом деле три, как заметил Саман) варианта:
1-й: используйте две формы
Это может быть самый простой вариант (пока речь не идет о макете).

<form action="/projects/{{$project->id}}" method="POST">
{{  method_field('DELETE') }}
{{ csrf_field() }}

<button type="submit">Delete data</button>

</form>

<form action="/projects/{{$project->id}}" method="POST">
{{  method_field('PATCH')  }}

{{ csrf_field() }}
<input type="text" name="heroname" value="{{$project->heroname}}"><br>

<textarea name="description" cols="30" rows="10" type="text">{{$project->description}}</textarea><br>

<button type="submit">Edit Info</button>
</form>

Используя CSS, вы можете выровнять две кнопки и сделать их похожими на одну форму.

2-й: Javascript (/ JQuery)
Я буду использовать JQuery для демонстрации этого.

HTML

<form id="form" action="/projects/{{$project->id}}" method="POST">

{{ csrf_field() }}
<input type="text" name="heroname" value="{{$project->heroname}}"><br>

<textarea name="description" cols="30" rows="10" type="text">{{$project->description}}</textarea><br>

<button type="submit">Edit Info</button>

<button type="submit">Delete data</button>

</form>

JS

$("#edit-button").click(function(event) {
//I experienced that sometimes the form submits although it's not a submit button
event.preventDefault(); 

$("#form input[type=hidden]").val("PATCH");
$(form).submit();
});

$("#delete-button").click(function(event) {
//I experienced that sometimes the form submits although it's not a submit button
event.preventDefault(); 

$("#form input[type=hidden]").val("DELETE");
$(form).submit();
});

Answer 2

у вас не может быть 2 метода для 1 формы.

, но вы можете изменить его, когда пользователь нажмет кнопку.

, чтобы сделать это первым, вы должны обработать событие onclick для ваших кнопок с помощьюследующий код:

<button onclick="changeMethod('PATCH')" type="submit">Edit Info</button>

<button onclick="changeMethod('DELETE')" type="submit">Delete data</button>

и добавьте идентификатор для вашей формы

<form action="/projects/{{$project->id}}" method="POST">

finnaly определить функцию javasciprt

<script>
    function changeMethod(methodName){
        $('#myform').find('input[name=_method]').first().val(methodName);
    }
</script>

эта функция будет вызываться, когда пользователь нажимает на каждыйНажмите и измените VALUE метода на правильный.

Таким образом, ваш полный код будет:

<form id="myform" action="/projects/{{$project->id}}" method="POST">
    {{  method_field('DELETE') }}
    {{ csrf_field() }}
    <input type="text" name="heroname" value="3"><br>

    <textarea name="description" cols="30" rows="10" type="text">4</textarea><br>

    <button onclick="changeMethod('PATCH')" type="submit">Edit Info</button>

    <button onclick="changeMethod('DELETE')" type="submit">Delete data</button>

</form>
<script>
    function changeMethod(methodName){
        $('#myform').find('input[name=_method]').first().val(methodName);
    }
</script>