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

@DragonBorn here's the codepen https://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 — Zeeshan Adil, Sep 06 '18 at 05:55

DragonBorn · Accepted Answer · 2018-09-07T08:05:47.207

8

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>

edited Sep 07 '18 at 08:05

answered Sep 06 '18 at 06:24

DragonBorn

1,809
5
20
44

2

I thought about this and this seems the only solution to this. Thanks for help :) – Zeeshan Adil Sep 06 '18 at 12:48
1

Glad I could help – DragonBorn Sep 06 '18 at 16:53
3

You don't need jQuery to add event listeners :) I simplified the code. – Limon Monte Sep 07 '18 at 05:50
@LimonMonte much better! :) – Zeeshan Adil Sep 07 '18 at 06:17
@LimonMonte The code is much cleaner now. I have updated the explanation according. – DragonBorn Sep 07 '18 at 08:06

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

1 Answers1