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't use textarea as a type since the sweetalert does not support that.

The type of the modal. SweetAlert comes with 4 built-in types which will show a corresponding icon animation: "warning", "error", "success" and "info". You can also set it as "input" to get a prompt modal. It can either be put in the object under the key "type" or passed as the third parameter of the function.( Taken from here )

---

Instead you can use html markup with text option by setting html option true. But in this way you can't get value inside the textarea as callback variable. For that give an id to the textarea and get value using that.

 swal({ title: "Enter your Name!", text: "<textarea id='text'></textarea>", // --------------^-- define html element with id html: true, 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 } // get value using textarea id var val = document.getElementById('text').value; swal("Nice!", "You wrote: " + val, "success"); });

 <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script>

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 .

Answer 3

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 4

In sweetalert1 , html: true is not supported any more (so the accepted answer doesn't work anymore). instead you can get the value of text area manually with:

value = document.querySelector(".swal-content__textarea").value

Full code:

swal({
  text: "Enter some text :",
  content: { element: "textarea" },
  buttons: "Next"
}).then((value) => {
  if (!value) throw null;
  value = document.querySelector(".swal-content__textarea").value;
  alert("you entered: " + value);
});

Run it on codepen

Also you can use sweetalert2 instead if it's possible (see other answers).