How do I cancel a create or edit via a button on the form?-CodePudding

I am writing a prototype in Laravel 9. x that, at least so far, is primarily CRUDs for each of several tables. For each table, I have the standard methods in that table's controller: index, show, create, store, edit, update and destroy. All of those work, but I'd like to add Cancel options to the forms used for creating and editing a row in the table.

I'm struggling with how to make a Cancel option work. I was trying to do it by having the Cancel button in the Create form invoke a new method in Controller called cancelCreate; all it would do was redirect to the index view and create a session message indicating that the create had been canceled. Much to my surprise, I found that even when I pressed the Cancel button, the controller's regular create() method would be executed. The create() method insisted that all validations be successful, stored the new record, reported the successful creation, and then displayed the new record in the index view. This was the exact opposite of what a Cancel button should do.

So how do I write my code so that the Cancel button lets the user exit the Create screen regardless of what he has put in the form (or omitted from the form) and return to the Index view WITHOUT having made any change to the table? The course I took on writing CRUDs didn't include Cancel functionality. I can't find any videos about Laravel discussing Cancel functionality, and a search here at StackOverflow didn't bring up anything relevant.

Here is my Create blade so that you can see what I attempted:

<x-layout>
    <x-card x>
    <h1 >Create a New Non-driving Reason</h1>
    <h1 ></h1><!-- spacer beneath title -->
    
    <form method="POST" action="/nonDrivingReasons/store" enctype="multipart/form-data">
    @csrf
        <div >
            <label for="reason_for_not_driving" >Reason for not driving</label>
            <input type="text"  name="reason_for_not_driving" value="{{old('reason_for_not_driving')}}"/>
            @error('reason_for_not_driving')
                <p >{{$message}}</p>
            @enderror
        </div>            
        <div >
            {{-- Submit the completed form --}}
            <button >Submit</button>
            {{-- Cancel submission of the form --}}
            <form method="POST" action="/nonDrivingReasons/cancelCreate/">
                <button >Cancel</button>
            </form>
            </button>
        </div>
    </form>
    </x-card>
    </x-layout>

And here are the create() and cancelCreate() methods from my Controller:

 //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');
    }

The table in question is as simple as it gets with just a single column.

I'd be grateful for guidance on building Cancel functionality into my prototype.

CodePudding user response：

You can add a "Cancel" button to your form by including an HTML button element with a type attribute set to "button" and an onclick attribute that redirects the user to the index page.

In your Create blade template:

<div >
    {{-- Submit the completed form --}}
    <button >Submit</button>
    {{-- Cancel submission of the form --}}
    <button type="button"  onclick="window.location.href='/nonDrivingReasons'">Cancel</button>
</div>