How to add textarea tag as input element in sweet alert using jQuery

Question

I don't understand how to add a textarea type in sweet alert. Similar to type: "input"

$('#saveBtn).click(function(){
    swal({   
        title: "Enter your Name!",  
        text: "your name:",  
        type: "input",   
        showCancelButton: true,   
        closeOnConfirm: false, 
        showLoaderOnConfirm: true,
        animation: "slide-from-top",   
        inputPlaceholder: "Write something" }, 
        function(inputValue){  
             if (inputValue === false) 
                 return false;    
             if (inputValue === "") {
                swal.showInputError("You need to write something!");  
                return false
                }
            swal("Nice!", "You wrote: " + inputValue, "success"); 
         });
});

This works fine. But if I use type: "textarea" instead of type: "input"

This gives error like this:

sweetalert.min.js:1 Uncaught ReferenceError: logStr is not defined

Thanks for help.

Answer 1

You can use input: "textarea" instead of input: "text" If you are using sweetalert2 or want to use sweetalert2, you can include these:

function openSwal(){
  swal({
      title: "Are you sure you want write somethin' in text area?",
      input: "textarea",
      inputPlaceholder: "Enter somethinn",
      showCancelButton: true,
      cancelButtonText: 'Cancel',
      confirmButtonText: "Submit ",
      inputValidator: function(value) { // validates your input
        return new Promise(function(resolve, reject) {
          if (value != '' && value != null) {
            // document.getElementById('closeComment').value = value; // assign this to other elements in your form
            swal("Success!", "You comment: " + value, "success");
            // call other functions or do an AJAX call or sumbit your form
          }
          else {
            reject('Please enter a valid text');
          }
        });
      }
    })
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.11.5/sweetalert2.all.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.0.0/sweetalert2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.0.0/sweetalert2.min.js"></script>
<button id="something" onclick="openSwal();">Open Sweet Alert</button>

Answer 2

The original SweetAlert plugin is currently unsupported and you probably won't see textarea functionality in it. I created SweetAlert2 which has the textarea functionlaity:

Swal.fire({
  title: 'Input something',
  input: 'textarea'
}).then(function(result) {
  if (result.value) {
    Swal.fire(result.value)
  }
})

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

Textarea example in SweetAlert2 documentation ↗

The transition from SweetAlert to SweetAlert2 is easy, here's the migration guide.