CODEWITHSUNDEEP
javascriptconfirmsubmit-button
Jan Ferrer
Jan Ferrer

Reputation: 21

Confirm submit with Alert

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>

Upvotes: 0

Views: 2302

Answers (4)

Jesus Carrasco
Jesus Carrasco

Reputation: 1354

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>

Upvotes: 1

Gabriel Gomes
Gabriel Gomes

Reputation: 348

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>

Upvotes: 0

P.S.
P.S.

Reputation: 16384

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.

Upvotes: 0

sheplu
sheplu

Reputation: 2975

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()

Upvotes: 0

Related Questions