Confirm submit with Alert

Question

I need to confirm submit button, with cancel or ok.

If ok, it submits the form and performs the predefined operations.

If you cancel, close the message and stay on the same page.

My java script code is only running the submit and the operation is not canceled.

Thanks for the help.

function envio() {
  var r = confirm("Tem certeza que deseja excluir este registro?");
  if (r == true) {
    window.location = "edicao-demandas-result.lbsp";
    form.submit();
  }
}

<form method="post" name="form" action="file.html">
  <div class="w3-row-padding">
    <div class="w3-col w3-center w3-rest">
      <label class="w3-text-blue w3-small">ATTENTION...
      </label><br>
      <input type="submit" class="w3-comp-btn w3-blue w3-round"
          value="Delete Record" name=LBWEB_DELETERECORD onClick="envio();">
    </div>
  </div>
</form>

i think you should use this method [https://stackoverflow.com/questions/6515502/javascript-form-submit-confirm-or-cancel-submission-dialog-box](https://stackoverflow.com/questions/6515502/javascript-form-submit-confirm-or-cancel-submission-dialog-box) — Jeisson Huerfano, Jul 30 '17 at 01:00

score 1 · Answer 1 · edited Jul 31 '17 at 02:22

You need to pass the event to your function and prevent the submit using preventDefault().

function envio(event) {
  event.preventDefault();
  var r=confirm("Tem certeza que deseja excluir este registro?");
  if (r==true) {
    window.location="edicao-demandas-result.lbsp";
    form.submit();
  }
}

<form method="post" name="form" action="file.html">
  <div class="w3-row-padding">
    <div class="w3-col w3-center w3-rest">
      <label class="w3-text-blue w3-small">
        ATTENTION...
      </label>
      <br>
      <input id="mySubmit" type="submit" class="w3-comp-btn w3-blue w3-round"
          value="Delete Record" name="LBWEB_DELETERECORD" onClick="envio(event);">
    </div>
  </div>
</form>

score 0 · Answer 2 · answered Jul 30 '17 at 00:55

0

Because even if you catch the click event, you don't stop the form action. To do that, you need in your function to call event.preventDefault()

answered Jul 30 '17 at 00:55

sheplu

2,937
3
24
21

score 0 · Answer 3 · answered Jul 30 '17 at 00:59

0

You need a simple confirm with if statement:

if (confirm('text')) {
    alert('do stuff')
}

If you will click ok, the code in if block will be executed, if cancel - nothing else will happen, you just will stay at this page.

answered Jul 30 '17 at 00:59

P.S.

15,970
14
62
86

Gabriel Gomes · Answer 4 · 2017-07-30T01:44:58.367

This is happening because you are using onclick with a submit input. The default behavior of this type of element is always submit the form.

If you change the type to button it should work. Example:

<input type="button" class="w3-comp-btn w3-blue w3-round" value="Delete Record" name="LBWEB_DELETERECORD" onclick="envio();" />

This is how your code will look with this approach:

function envio() {
  var r=confirm("Tem certeza que deseja excluir este registro?");
  if (r==true) {
    form.submit();
  }
}

<form method="post" name="form" action="file.html">
  <div class="w3-row-padding">
    <div class="w3-col w3-center w3-rest">
      <label class="w3-text-blue w3-small">ATTENTION...</label>
      <br/>
      <input type="button" class="w3-comp-btn w3-blue w3-round" value="Delete Record" name="LBWEB_DELETERECORD" onclick="envio();" />
    </div>
  </div>
</form>

Thanks for the help, however I did the change to "button" but still continued the problem. — Jan Ferrer, Jul 30 '17 at 14:13

Confirm submit with Alert

4 Answers4