im new using sweet alert, first i will show the code :

    $('#byr').keydown(function (e){
      var bayar = Number($('#byr').val());
      var total = Number($('.rp-harga').text());
      var kmb = $('.rp-kmb').text();

      if(e.keyCode == 13)
      {
        if(bayar<total)
        {
          alert("Uang Anda Kurang");
        }
        else {
          swal("Transaksi Berhasil", "Kembalian : Rp " + (bayar-total).toString(), "success");
        }
      }
    });

The problem is when i hit enter after fill the input text with else condition, it will show the sweet alert, but the sweet alert will immidiately closed before i click OK button or hit enter when sweet alert appear

I tried adding e.preventDevaults(), and get these problem :

1. if i add it before swal code, the alert cant appear in else contidion
2. if i add it after swal code, the same problem will happen (swal closed immidiately before click OK / hit enter).

Here is a working JSFiddle with my problem.

im new using sweet alert, first i will show the code :

    $('#byr').keydown(function (e){
      var bayar = Number($('#byr').val());
      var total = Number($('.rp-harga').text());
      var kmb = $('.rp-kmb').text();

      if(e.keyCode == 13)
      {
        if(bayar<total)
        {
          alert("Uang Anda Kurang");
        }
        else {
          swal("Transaksi Berhasil", "Kembalian : Rp " + (bayar-total).toString(), "success");
        }
      }
    });

The problem is when i hit enter after fill the input text with else condition, it will show the sweet alert, but the sweet alert will immidiately closed before i click OK button or hit enter when sweet alert appear

I tried adding e.preventDevaults(), and get these problem :

1. if i add it before swal code, the alert cant appear in else contidion
2. if i add it after swal code, the same problem will happen (swal closed immidiately before click OK / hit enter).

Here is a working JSFiddle with my problem.

• javascript
• jquery
• sweetalert

• Can you provide your HTML as well? – Lincoln Bergeson Commented May 22, 2017 at 17:33
• 1 Relevant question: stackoverflow./questions/29348785/… – Lincoln Bergeson Commented May 22, 2017 at 17:37
• the HTML code just like this <input type="text" class="form-control input-sm" id="byr" >. I already see that post, but the question using button, and i have no idea on my work which it using input text – janotama Commented May 22, 2017 at 17:45
• Try adding e.preventDefault(); when you call swal(). – Barmar Commented May 22, 2017 at 17:54
• It's probably similar to stackoverflow./questions/44010744/… – Barmar Commented May 22, 2017 at 17:55

1 Answer 1

I assume you are using sweetalert2. This plugin has a configuration option:

allowEnterKey: If set to false, the user can't confirm the modal by pressing the Enter or Space keys, unless they manually focus the confirm button.

Therefore you can:

• disable this feauture setting allowEnterKey to false

• call swal after 10 milliseconds in order to overe the following src code for the first keydown:

  window.onkeydown = handleKeyDown;

$('#byr').keydown(function (e) {
    var bayar = Number($('#byr').val());
    var total = 0;

    if (e.keyCode == 13) {
        if (bayar < total) {
            alert("Uang Anda Kurang");
        }
        else {
            setTimeout(function() {
                swal({
                    title: "Transaksi Berhasil",
                    text: "Kembalian : Rp " + (bayar - total).toString(),
                    type: "success",
                    allowEnterKey: true // default value
                });
            }, 10)
        }
    }
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr/sweetalert2/6.6.2/sweetalert2.min.css">
<script src="https://cdn.jsdelivr/sweetalert2/6.6.2/sweetalert2.min.js"></script>

<input type="text" id="byr">