laravel 如何通过表单上的按钮取消创建或编辑?

aelbi1ox  于 2023-01-14  发布在  其他
关注(0)|答案(1)|浏览(140)

我正在Laravel 9.x中编写一个原型,至少到目前为止,它主要是针对几个表中的每一个的CRUD,对于每个表,我在该表的控制器中有标准方法:索引、显示、创建、存储、编辑、更新和销毁。所有这些都可以,但是我想在表格中添加取消选项,用于创建和编辑表格中的行。
我一直在纠结如何让取消选项起作用,我试着让Create表单中的Cancel按钮调用Controller中一个名为cancelCreate的新方法;它所要做的只是重定向到索引视图并创建一个会话消息,表明创建操作已被取消。令我非常惊讶的是,我发现即使按下Cancel按钮,控制器的常规创建操作()方法。创建()方法坚持所有验证都要成功,存储新记录,报告成功创建,然后在索引视图中显示新记录。这与取消按钮应该做的完全相反。
那么,我如何编写代码,以便无论用户在表单中输入了什么内容,“取消”按钮都允许用户退出“创建”屏幕(或者从表单中省略)并返回到Index视图,而不对表做任何更改?我学习的CRUD编写课程不包括Cancel功能。我找不到任何关于Laravel讨论Cancel功能的视频,在StackOverflow搜索也没有找到任何相关的信息。
下面是我的Create blade,以便您可以看到我的尝试:

<x-layout>
    <x-card xclass="p-10 max-w-lg mx-auto mt-24">
    <h1 class="text-3xl text-center text-white font-bold bg-indigo-700">Create a New Non-driving Reason</h1>
    <h1 class="pb-5"></h1><!-- spacer beneath title -->
    
    <form method="POST" action="/nonDrivingReasons/store" enctype="multipart/form-data">
    @csrf
        <div class="mb-6">
            <label for="reason_for_not_driving" class="inline-block text-lg mb-2">Reason for not driving</label>
            <input type="text" class="border border-gray-200 rounded p-2 w-full" name="reason_for_not_driving" value="{{old('reason_for_not_driving')}}"/>
            @error('reason_for_not_driving')
                <p class="text-red-500 text-xs mt-1">{{$message}}</p>
            @enderror
        </div>            
        <div class="mb-6">
            {{-- Submit the completed form --}}
            <button class="text-xl text-white bg-green-500 rounded-md py-2 px-4 hover:bg-black">Submit</button>
            {{-- Cancel submission of the form --}}
            <form method="POST" action="/nonDrivingReasons/cancelCreate/">
                <button class="text-xl text-black bg-white rounded-md py-2 px-4 hover:bg-grey-500">Cancel</button>
            </form>
            </button>
        </div>
    </form>
    </x-card>
    </x-layout>

下面是我的控制器中的create()和cancelCreate()方法:

//Show create the form
    public function create() {
        return view('nonDrivingReasons.create');
    }

    //Cancel creation of a new non-driving reason
    public function cancelCreate() {
        return redirect('/nonDrivingReasons/index')->with('message', 'Creation of non-driving reason cancelled');
    }

这个表非常简单,只有一列。
如果能指导我在原型中构建Cancel功能,我将不胜感激。

ar7v8xwq

ar7v8xwq1#

您可以在表单中添加一个“Cancel”按钮,方法是包含一个HTML button元素,将type属性设置为“button”,并包含一个将用户重定向到索引页的onclick属性。
在创建刀片模板中:

<div class="mb-6">
    {{-- Submit the completed form --}}
    <button class="text-xl text-white bg-green-500 rounded-md py-2 px-4 hover:bg-black">Submit</button>
    {{-- Cancel submission of the form --}}
    <button type="button" class="text-xl text-black bg-white rounded-md py-2 px-4 hover:bg-grey-500" onclick="window.location.href='/nonDrivingReasons'">Cancel</button>
</div>

相关问题