Delete confirmation for html form

Question

I would like to add a delete confirmation to my form button Possible javascript to use??

<script type="text/javascript"> 
function confirmDelete() { 
return confirm("Are you sure you want to delete?");   
} 
</script>

This is currently working inside my form.

<input type="button" onclick="parent.location='<?php echo "delete.php?id=" . $people['id'] ?>'" value='Delete'>

How can I integrate the javascript into the onclick event? Either using the above javascript or any other way that may be better

similar: http://stackoverflow.com/questions/9139075/confirm-message-before-delete — Ciro Santilli OurBigBook.com, May 10 '16 at 09:21

score 9 · Answer 1 · edited May 03 '13 at 12:16

9

It's possible :)

On the tag, use the attribute onsubmit like this :

<form onsubmit="return confirm('Are you sure?');">

or using a method

<form onsubmit="return myMethod">

The same for a button on onclick event. If it return false, it will be not clicked.

Remember, if the method return false, the form will not be submited

edited May 03 '13 at 12:16

Alfergon

5,463
6
36
56

answered Jul 24 '12 at 20:19

João Mosmann

2,884
19
25

agree same approach I would recommend is onsubmit. If your function returns false, the form will not submit and if true it will. – Mike S. Jul 24 '12 at 20:20
this works fine for the actual submit button in the form. but the added button for delete this doesn't prompt it just delete the row from my database. – user1548769 Jul 24 '12 at 20:39

HatSoft · Answer 2 · 2012-07-24T20:46:34.730

2

How can I integrate the javascript into the onclick event?

<input type="button" onclick="javascript:confirmDelete();" value='Delete'>

and

<script type="text/javascript"> 
function confirmDelete() { 
var status = confirm("Are you sure you want to delete?");   
if(status)
{
 parent.location.replace("parent.location='<?php echo "delete.php?id=" . $people['id'] ?>'");
}
} 
</script>

edited Jul 24 '12 at 20:46

answered Jul 24 '12 at 20:28

HatSoft

11,077
3
28
43

score 2 · Answer 3 · answered Jun 30 '14 at 04:37

2

I hppe this will help you

It work for me

<a href="index.php?action=del&id=125" onclick="return confirm('Are you sure you want to delete?')">Delete</a>

answered Jun 30 '14 at 04:37

user3788986

21
1

Saddam Khan · Answer 4 · 2022-02-05T10:31:37.023

2

First of all add an onclick method in your HTML, like:

**HTML:**
<a class="btn btn-danger" href="some url" onclick="DeleteItem();"></a>
**JavaScript:**
function DeleteItem() 
{
     return confirm("Are you sure to delete this")
}
// Or you can simply do it like below:
<button onclick="javascript: return confirm('Are you sure to delete?');">Delete</button>

edited Feb 05 '22 at 10:31

answered Dec 21 '16 at 07:10

Saddam Khan

159
1
6

score 1 · Accepted Answer · answered Jul 24 '12 at 20:34

1

Bind your event handler in javascript.

<input type="button" id="delete" value='Delete' />

document.getElementById('delete').onclick = function () {
    if (confirm('Are you sure?')) {
        parent.location='<?php echo "delete.php?id=" . $people['id'] ?>';
    }
};

answered Jul 24 '12 at 20:34

jbabey

45,965
12
71
94

If the browser doesn't have javascript enabled, the user will not be able to conclude the process of deleting. – João Mosmann Jun 03 '15 at 19:35
@JoãoMosmann this is a javascript tagged question. if the browser doesn't have javascript enabled, every answer in this tag would be irrelevant. – jbabey Jun 04 '15 at 13:53
Not all. You can use javascript without blocking native functionality. I was just commenting to inform the drawback of this approach in case of someone end up here. – João Mosmann Jun 04 '15 at 18:21

score 1 · Answer 6 · answered Jul 06 '20 at 01:34

Add button element with onclick event handler as below:

<input type="submit" name="delete" value="Delete" onclick="return confirmDelete();">

and the JavaScript content as below:

function confirmDelete() { 
    return confirm("Are you sure you want to delete?");   
}

It works for me.

score -1 · Answer 7 · answered Jul 24 '12 at 20:27

HTML also supports a reset button on the form, if you are not attached to using javaScript. You can have a structure like this:

<form>
...
items in your form
...
<input type="reset">
...
</form>

When the reset button is clicked, all of the form inputs will reset to their default values.

Delete confirmation for html form

7 Answers7