<p>I have a single form with a Save button and a Delete button.</p>

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

<p>I'm using <a href="https://vuejs.org/" rel="noreferrer">Vue.js</a> to accomplish this as follows:</p>

<p><code>&lt;input type="hidden" name="action" id="action" v-bind:value="'entries/' + actionVal"&gt;</code></p>

<p>Delete button:</p>

<p><code>&lt;button type="submit" value="delete" v-on:click="actionVal = 'delete-entry'"&gt;Delete&lt;/button&gt;</code></p>

<p>In my Vue instance:</p>

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

CC BY-SA 4.0
2018-11-30T16:39:50.307Z
Thanks for the answer Andrea, is there anyway you can add normal JS/Jquery to this answer?
JMKelley
CC BY-SA 4.0
2018-11-30T17:04:29.323Z
I'm actually not very skilled at JavaScript, so perhaps someone else could chime in and I'll update my answer accordingly. Vue.js actually made it easier for me.
Andrea DeMers
CC BY-SA 4.0
2018-11-30T16:02:39.550Z
2018-11-30T16:02:39.550Z
Andrea DeMers
<p>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:</p>

<ol>
<li><p>Add an <code>id</code> to your form and to your hidden action input:</p>

<pre class="lang-html prettyprint-override"><code>&lt;form id="myForm" method="post" enctype="multipart/form-data"&gt;
    {{ csrfInput() }}
    &lt;input id="formAction" type="hidden" name="action" value="entries/save-entry"&gt;
    &lt;input type="hidden" name="entryId" value="{{ entry.id }}"&gt;

    &lt;div class="form-group"&gt;
        &lt;label&gt;Listing Title&lt;/label&gt;
        &lt;input type="text" name="title" class="form-control" value="{{ entry.title }}"&gt;
    &lt;/div&gt;
&lt;/form&gt;
</code></pre></li>
<li><p>Include two buttons with <code>onclick</code> attributes:</p>

<pre class="lang-html prettyprint-override"><code>&lt;button value="save" onclick="submitForm('entries/save-entry')"&gt;Save&lt;/button&gt;
&lt;button value="delete" onclick="submitForm('entries/delete-entry')"&gt;Delete&lt;/button&gt;
</code></pre></li>
<li><p>Add this script tag to handle the form action swapping:</p>

<pre class="lang-html prettyprint-override"><code>&lt;script&gt;
    function submitForm(action) {
        document.getElementById('formAction').value = action;
        document.getElementById('myForm').submit();
    }
&lt;/script&gt;
</code></pre></li>
</ol>

CC BY-SA 4.0
2018-12-15T14:25:48.550Z
2018-12-15T14:25:48.550Z
Jalen Davenport
<p>According to the corresponding <a href="https://github.com/craftcms/cms/blob/master/src/controllers/EntriesController.php#L465-L593" rel="nofollow noreferrer">controller method</a>, there is no way to delete the entry on save. You'd have to call <a href="https://github.com/craftcms/cms/blob/master/src/controllers/EntriesController.php#L601-L644" rel="nofollow noreferrer">entries/delete-entry</a> for that.</p>

<p>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.</p>

CC BY-SA 4.0
2018-11-30T14:41:43.853Z
2018-11-30T14:41:43.853Z
Paul
<p>I have this form </p>

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

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

<p>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?</p>

<templating>
Delete Entry from Front End
# Delete Entry from Front End

(Asked by: username_0 on 2018-11-30)

I have this form 
    
        {{ csrfInput() }}
        
        

        
          Listing Title
          
        
   

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?

**Tags:** templating


---

## 3 answers

### Answer by username_1 on 2018-11-30. Score: 5 | Accepted answer

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:

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

> **Comments:**
> **username_0**: Thanks for the answer Andrea, is there anyway you can add normal JS/Jquery to this answer?  
> **username_1**: I'm actually not very skilled at JavaScript, so perhaps someone else could chime in and I'll update my answer accordingly. Vue.js actually made it easier for me.  

---

### Answer by username_2 on 2018-12-15. Score: 4

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:

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

    {{ csrfInput() }}
    
    

    
        Listing Title
        
    


Include two buttons with onclick attributes:
Save
Delete

Add this script tag to handle the form action swapping:


---

### Answer by username_3 on 2018-11-30. Score: 1

According to the corresponding [controller method](https://github.com/craftcms/cms/blob/master/src/controllers/EntriesController.php#L465-L593), there is no way to delete the entry on save. You'd have to call [entries/delete-entry](https://github.com/craftcms/cms/blob/master/src/controllers/EntriesController.php#L601-L644) 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.


---

