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

Andrea's question is definitely the best way to solve this. However, if you did not want to use Vue in your project, here's how you would solve this in plain JS:

1. Add an id to your form and to your hidden action input:

   <form id="myForm" method="post" enctype="multipart/form-data">
       {{ csrfInput() }}
       <input id="formAction" 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>
   

2. Include two buttons with onclick attributes:

   <button value="save" onclick="submitForm('entries/save-entry')">Save</button>
   <button value="delete" onclick="submitForm('entries/delete-entry')">Delete</button>
   

3. Add this script tag to handle the form action swapping:

   <script>
       function submitForm(action) {
           document.getElementById('formAction').value = action;
           document.getElementById('myForm').submit();
       }
   </script>
   

Answer 3

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.