Sweet Alert – Using Textarea as Content

We used Sweet Alert JavaScript plugin as a beautiful replacement for JavaScript alert and confirmation popups. It supports showing input box too which is good when asking for feedback from users. In our case, we needed a textarea instead and it supports textarea too with minimal tweaks.

Sweet Alert Basics

Calling Sweet Alert to show information popups is very simple.

swal('Error', 'Unexpected error occurred. Try again.', 'error');

A more advanced usage like asking for an input and processing the input text looks like this:

swal("Write something here:", {
  content: "input",
})
.then((value) => {
  swal(`You typed: ${value}`);
});

Using Custom Contents

Sweet Alert also allows custom contents, like DOM elements. What we are trying to achieve are:

• Use textarea as input for feedback text.
• Capture the value of the textarea and process it.
• Capture cancelled input too in case use does not want to send any feedback.

We’ve found out that we cannot capture the value of the textarea easily like the input box so we do some tweaks with the DOM element to manually set the textarea value as the result of Sweet Alert button click. Note that we combined it with classic jQuery too.

$("#btn-show-feedback").click(function(){
  var textarea = document.createElement('textarea');
  textarea.rows = 6;
  textarea.className = 'swal-content__textarea';

  // Set swal return value every time an onkeyup event is fired in this textarea
  textarea.onkeyup = function () {
    swal.setActionValue({
      confirm: this.value
    });
  };

  swal({
    text: 'How can we improve this site?',
    content: textarea,
    buttons: {
      cancel: {
        text: 'Cancel',
        visible: true
      },
      confirm: {
        text: 'Submit',
        closeModal: false
      }
    }
  }).then(function (value) {
    if (value && value !== true && value !== '') {
      var data = { feedback: value };
      $.ajax({
        url: '/send-feedback',
        method: 'POST',
        data: data,
        success: function (res) {
          swal('Success', 'Feedback successfully submitted.', 'success');
        },
        error: function (err) {
          swal('Error', 'Unfortunately, an error occurred. Please try again.', 'error');
        }
      });
    }

    if (value === true || value === '') {
      swal.close();
    }
  });
});

That’s it!