How to pass SweetAlert textarea value to axios request

Question

I'm trying to build a basic pop-up form stepper using SweetAlert which allows the user to provide a report name, description and a comment, then send it to the server to save the values in storage.

The issue I'm having is that the textarea option doesn't return me the value, only true so I cannot pass the value to the back-end.

This is what I have so far:

swal({
    text: 'What would you like to name this report?',
    html: true,
    content: {
        element: 'input',
    },
    buttons: 'Next'
})
.then((value) => {
    if (!value) throw null;
    let name = value;

    swal({
            text: 'Give this report a description',
            content: {
                element: 'textarea',
            },
            buttons: 'Next'
        }).then((value) => {
            if (!value) throw null;
            let description = value;

            swal({
                    text: 'Add a comment?',
                    content: {
                        element: 'textarea',
                    },
                    buttons: 'Publish'
                })
                .then((value) => {
                    let comment = value;

                    console.log(name) // Returns the correct value
                    console.log(description) // Returns true
                    console.log(comment) // Returns true
       
                })
                .catch(error => console.log(error))
        })
        .catch(error => console.log(error))
})

How can I get the value for the textarea here?

Please look at [this](https://stackoverflow.com/questions/37790965/how-to-add-textarea-tag-as-input-element-in-sweet-alert-using-jquery) SO question as it will address your issue. In short, you can't use a textarea with sweetalert. — tomerpacific, Sep 01 '20 at 18:53
@tomerpacific According to this in the [SweetAlert2](https://sweetalert2.github.io/#input-textarea) you can use text area — Carlos1232, Sep 01 '20 at 19:03

score 2 · Accepted Answer · answered Sep 01 '20 at 21:20

In sweetalert1 , 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.

Thanks, this is exactly what I have done which works fine for my need. — , Sep 02 '20 at 14:11

How to pass SweetAlert textarea value to axios request

1 Answers1