How to add textarea tag as input element in sweet alert using jQuery
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.
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>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>