CODEWITHSUNDEEP
javascriptjquerysweetalertsweetalert2
Zeeshan Adil
Zeeshan Adil

Reputation: 2115

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

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

Upvotes: 6

Views: 6915

Answers (3)

Alexander Santos
Alexander Santos

Reputation: 1691

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

Upvotes: 0

rb_engineer
rb_engineer

Reputation: 928

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')
            }
        })

Upvotes: 2

DragonBorn
DragonBorn

Reputation: 1809

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>

Upvotes: 8

Related Questions