How can I enable Confirm Button on input in sweet alert 2

Question

I need to disable the confirm button when the user hasn't changed any value in the text box inside the sweet alert and enable it only when the value in the text box has changed but I can't seem to find a way for this. here's my code:

swal({
            title: 'Please Enter Page Name',
            input: 'text',
            inputValue: PageName,
            confirmButtonText: 'Save',
            onOpen: function (){
                swal.disableConfirmButton(); //this disables the button
            }
            preConfirm: function (Name) {
                return new Promise(function (resolve, reject) {
                    resolve();
                })
            },
            allowOutsideClick: false
        })

I used onOpen to fire the swal.disableConfirmButton(); method but I don't know where to use swal.enableConfirmButton();. is there any function like onInput or something similar? If yes how to use that to achieve the desired result?

here's a codepen of what I have achieved so far.

https://codepen.io/zeeshanadilbutt/pen/NLvmZz?editors=0010

Nonrecognition

Can you provide a fiddle with what's working so far? – Mcferren

@Mcferren here's the codepen codepen.io/zeeshanadilbutt/pen/NLvmZz?editors=0010 everything is good I just need to disable the Save button when nothing is typed in the text box and enable it when a user types something – Nonrecognition

Answer 1

Since there is no onInput or something similar for input: text, you can use getInput inside onOpen and add an event listener to that to enable or disable your button accordingly.

Check the working snippet.

swal({
  input: 'text',
  onOpen: function () {
    swal.disableConfirmButton();
    swal.getInput().addEventListener('keyup', function(e) {
      if(e.target.value === '') {
        swal.disableConfirmButton();
      } else {
        swal.enableConfirmButton();
      }
    })
  }
});

  <script src="https://unpkg.com/sweetalert2"></script> 

Mcferren

I thought about this and this seems the only solution to this. Thanks for help :) – Nonrecognition

Glad I could help – Mcferren

You don't need jQuery to add event listeners :) I simplified the code. – Karlotte

@LimonMonte much better! :) – Nonrecognition

@LimonMonte The code is much cleaner now. I have updated the explanation according. – Mcferren

Answer 2

We can enable/disable the confirm button via getConfirmButton and didOpen (this part is not on documentation)

SweetAlert2 v11

Swal.fire({
            title: 'Alert',
            didOpen: function () {
                Swal.getConfirmButton().setAttribute('disabled', 'true')
            }
        })

Lir

Answer 3

For future seekers...

Both answers didn't work for me. But @rb_19 's answer gave me a path on how to proceed.

Actually, Swal.getConfirmButton() returns the HTML Element for the button, so Swal.getConfirmButton().setAttribute('disabled', 'true') works but Swal.getConfirmButton().setAttribute('disabled', 'false') doesn't.

disableConfirmButton() and enableConfirmButton() sounds deprecated, those functions doesn't exists in latest version (11.7.32).

So for disabling i used removeAttribute together with didOpen event as in example below

if (e.target.value != inputValidationText) {
  swal.getConfirmButton().setAttribute("disabled", "true");
} else {
  swal.getConfirmButton().removeAttribute("disabled");
}

onOpen also seems deprecated.

Using didOpen only didn't allow me to start the component as disabled, so i used willOpen together.

Full code

swal.fire({
      title: message,
      input: 'text',
      willOpen: function () {
        swal.getConfirmButton().setAttribute('disabled', 'true');
      },
      didOpen: function () {
        swal.getInput().addEventListener('keyup', function (e: any) {
          if (e.target.value != inputValidationText) {
            swal.getConfirmButton().setAttribute('disabled', 'true');
          } else {
            swal.getConfirmButton().removeAttribute('disabled');
          }
        });
      },
      showDenyButton: true,
      showCancelButton: showCancelButton,
      confirmButtonText: confirmationText,
      denyButtonText: denyText,
    });
  }

edit: Confirmed deprecated https://github.com/sweetalert2/sweetalert2/pull/1497

I hope it somehow helps

Phasia