Delete Entry from Front End

Question

I have this form

    <form method="post" enctype="multipart/form-data">
        {{ csrfInput() }}
        <input type="hidden" name="action" value="entries/save-entry">
        <input type="hidden" name="entryId" value="{{ entry.id }}">

        <div class="form-group">
          <label>Listing Title</label>
          <input type="text" name="title" class="form-control" value="{{ entry.title }}">
        </div>
   </form>

Is it possible to add a delete button to this form or will it have to be within another form targeting a different end point for entries?

Answer 1

I have a single form with a Save button and a Delete button.

The action value is set to entries/save-entry by default. However, when the user clicks the Delete button, the action value is changed to entries/delete-entry via JavaScript.

I'm using Vue.js to accomplish this as follows:

<input type="hidden" name="action" id="action" v-bind:value="'entries/' + actionVal">

Delete button:

<button type="submit" value="delete" v-on:click="actionVal = 'delete-entry'">Delete</button>

In my Vue instance:

new Vue({
    el: '#app',
    delimiters: ['${', '}'],
    data: {
        actionVal: 'save-entry'
    },
});

Answer 2

According to the corresponding controller method, there is no way to delete the entry on save. You'd have to call entries/delete-entry for that.

Of course, if this is really something you want and you're comfortable writing some PHP code, you could programmatically delete the entry before or after save, using a plugin or module.