CODEWITHSUNDEEP
javascriptjquerypopup
Arushi Tomar
Arushi Tomar

Reputation: 63

prompt confirmation box, cancel should stop execution

I have a prompt box, which when i click on delete user, should ask to confirm if he wants to delete the user, HTML

<form name="myform" id="myform" action="/AWSCustomerJavaWebFinal/DeleteUser" method="POST" onSubmit="myFunction()">
  Choose User:
  <br>
  <select name="selectUser" multiple style="width: 200px !important; min-width: 200px; max-width: 200px;">
    <c:forEach var="user" items="${listUsers.rows}">
      <option value="${user.id}">
        <c:out value="${user.userId}" />
    </c:forEach>
  </select>
  <input type="submit" value="Delete User" class="btn btn-primary" />
  <input type="reset" value="Reset" class="btn btn-primary" id=button1>
</form>

javascript

function myFunction() {
  var confirm = prompt("Do you want to continue", "yes");
  if (confirm == yes) {
    var form = $('#myform');
    form.submit(function() {
      $.ajax({
        type: form.attr('method'),
        url: form.attr('action'),
        data: form.serialize(),
        success: function(data) {
          var result2 = data;
          alert("deleted")
        }
      });
      return false;
    });
    $(document).ready(function() {
      $(document).ajaxStart(function() {
        $("#wait").css("display", "block");
      });
      $(document).ajaxComplete(function() {
        $("#wait").css("display", "none");
      });
    });
    return false;
  } else {
    alert("User not deleted")
    return false;
  }
  return false;
}

It asks to confirm, and if I press ok after writing yes in the textbox, it goes to the servlet, and does not give the alert("deleted"), and I have returned false, it still refreshes after pressing submit, also, if i press cancel, it still executes and deletes the user. I tried a lot of different approaches but nothing seems to work here. Thanks in advance.

Upvotes: 1

Views: 6457

Answers (2)

Jeremy Thille
Jeremy Thille

Reputation: 26360

A nice one-liner :

if( !confirm("Do you want to continue?") ) return alert("User was not deleted.")

return will stop the execution of the function.

You have a form.submit(function() { $.ajax... that will always trigger your ajax call whenever the form is submitted, regardless of any validation mechanism you set up.

Here is a clean, rewritten version of your code :

in HTML : <form onSubmit="confirmSubmission()"> (a bit more explicit than myFunction() ;)

$(document).ready(function() {
    var $wait = $("#wait");

    $(document).ajaxStart(function() {
        $wait.hide();
    }).ajaxComplete(function() {
        $wait.show();
    });
});

function confirmSubmission() {
    if ( !confirm("Do you want to continue")) return alert("Submission has been canceled.")

    submit();
}

function submit(){
    var $form = $('#myform');
    $.ajax({
        type   : $form.attr('method'),
        url    : $form.attr('action'),
        data   : $form.serialize(),
        success: function(data) {
            var result2 = data;
            alert("deleted")
        }
    });
}

Upvotes: 2

IamRuku
IamRuku

Reputation: 158

Try using confirm rather than prompt

var r = confirm("Continue delete?");
if (r == true) {
   //your logic to delete
} else {
    //alert('user dint delete')
}

Upvotes: 1

Related Questions