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种形式，您不能有2种方法。

但是您可以在用户单击按钮时进行更改。

首先，您应该通过以下代码处理按钮的onclick事件：

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

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

并为您的表单添加ID

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

最后定义javasciprt函数

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

当用户单击每个按钮并将方法的值更改为适当的值时，将调用此函数。

因此您的完整代码将是：

<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>

Answer 2

您有两种选择（实际上是萨满注意到的三种）：
第一：使用两种形式
这可能是最简单的一种（直到布局）。

<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，您可以对齐两个按钮并使它看起来像一种形式。

第二名：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();
});

将删除和补丁放在laravel的同一页面中

2 个答案: