如何将 SweetAlert textarea 值传递给 axios 请求

Question

我正在尝试使用 SweetAlert 构建一个基本的弹出式表单步进器，它允许用户提供报告名称、描述和评论，然后将其发送到服务器以将值保存在存储中。

我遇到的问题是 textarea 选项没有 return 给我值，只有 true 所以我无法将值传递给后端。

这是我目前拥有的：

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

如何获取此处文本区域的值？

Answer 1

在 sweetalert1 中，您可以通过以下方式手动获取文本区域的值：

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

完整代码：

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

如果可能，您也可以使用 sweetalert2。

如何将 SweetAlert textarea 值传递给 axios 请求

How to pass SweetAlert textarea value to axios request

javascript

vue.js

sweetalert