on button click with confirm alert box, query submitting on cancel also

Question

i have created a button to remove data from database. The button code looks like the following:

<form method="post">
  <button name="remove" onclick="myFunction()" style="margin-left: -15%; border-radius: 15px;" class="button button2">Remove</button>
</form>

i have given an alert confirm box to proceed or cancel the button click.

function myFunction() {
  confirm("Do you want to remove?!");
}

now after the button click, if i do cancel or if i do ok, both are executing the query. the cancel button is not cancelling the click. can anyone please tell what is wrong here.

hard to be sure without seeing more code but perhaps `return confirm("Do you want to remove?!");` will work — Nick, Jan 04 '20 at 10:48
What you are doing is correct .. you just need to return the value of confirm ----- `return confirm("Do you want to remove?!");` Read more at https://www.w3schools.com/js/js_popup.asp — Amanjot Kaur, Jan 04 '20 at 10:55

score 1 · Answer 1 · answered Jan 04 '20 at 10:47

1

You need to validate the confirm response

function myFunction() {
  if (confirm("Do you want to remove?!")) {
    //do stufff here...
    console.log('success')
  } else {
    console.log('cancel')
  }
}

<button name="remove" onclick="myFunction()"class="button button2">Remove</button>

answered Jan 04 '20 at 10:47

prasanth

22,145
4
29
53

can you post that used code with fiddle https://jsfiddle.net/ – prasanth Jan 04 '20 at 11:05
this one wont work See in action even with alert https://jsfiddle.net/am5kjbo2/1/ You didnt save @prasanth nothingin your link – Jan 04 '20 at 11:05
@Dilek .its working .In jsfiddle its add the script before the html like inside the `head` tag [see this error](https://stackoverflow.com/questions/26329761/javascript-onclick-not-working-in-jsfiddle).so its undefined while cllick.[see this another fiddle working result](https://jsbin.com/maceboluge/edit?html,js,console,output) – prasanth Jan 04 '20 at 11:14
@prasanth sorry but didnt work on for me and still doesnt in MOBILE here is jsfiddle https://jsfiddle.net/am5kjbo2/2/ even when I open this site in mboile version – Jan 04 '20 at 11:23
@Dilek.i already posted my above comment please read.jsfiddle is a problem not with code, try with jsbin like https://jsbin.com/maceboluge/edit?html,js,console,output .or else create own html and paste the script tag after button then try your mobile – prasanth Jan 04 '20 at 11:25
1

@prasanth I see its working on jsbin and need to include js react to to make it works on jsfiddle Sorry didnt notice jsFiddle problem – Jan 04 '20 at 11:34

Reza sh · Accepted Answer · 2020-01-11T10:17:15.230

1

Way 1: you can use this:

  <button name="remove" onclick="return confirm('Are you sure?')" style="margin-left: -15%; border-radius: 15px;" class="button button2">Remove</button>

the return is very important

WAY 2:

function myFunction() {
     if (confirm('Are you sure?')) {
           //Do SomeThing...!
     }
}

NOTE:

You can use the Sweet Alert

edited Jan 11 '20 at 10:17

answered Jan 04 '20 at 10:48

Reza sh

787
10
20

score 0 · Answer 3 · answered Jan 04 '20 at 11:03

Make sure you do preventDefault because your delete button is inside the form

document.getElementById("uniqueId").addEventListener("click", function(event){
  event.preventDefault();
  if(confirm("Msg")){
    //do something
  }
});

<form method="post">
  <button name="remove" id="uniqueId"  style=" border-radius: 15px;" class="button button2">Remove</button>
</form>

Make sure that every button have a unique id

on button click with confirm alert box, query submitting on cancel also

3 Answers3