How To Add Textarea Tag As Input Element In Sweet Alert Using Jquery

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!', te

Solution 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 idhtml: true,
  showCancelButton: true,
  closeOnConfirm: false,
  showLoaderOnConfirm: true,
  animation: "slide-from-top",
  inputPlaceholder: "Write something"
}, function(inputValue) {
  if (inputValue === false) returnfalse;
  if (inputValue === "") {
    swal.showInputError("You need to write something!");
    returnfalse
  }
  // get value using textarea idvar val = document.getElementById('text').value;
  swal("Nice!", "You wrote: " + val, "success");
});

<linkhref="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css"  /><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script>

Solution 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)
  }
})

<scriptsrc="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.

Solution 3:

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

functionopenSwal(){
  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 inputreturnnewPromise(function(resolve, reject) {
          if (value != '' && value != null) {
            // document.getElementById('closeComment').value = value; // assign this to other elements in your formswal("Success!", "You comment: " + value, "success");
            // call other functions or do an AJAX call or sumbit your form
          }
          else {
            reject('Please enter a valid text');
          }
        });
      }
    })
  }

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

Solution 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) thrownull;
  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).