带有表单的Sweet Alert JS（3个输入）

Question

我希望在Sweet Alert中实现一个表单。我可以只放一个输入框，包括标题和正文。

文档中提到了自定义警告框的方法，但是不允许从我的框架（customizecss.com）或style.css中加载CSS3类。

我正在尝试在警告框中包含一个输入框，如下所示：

swal({
       title: "HTML <small>Title</small>!",
       text: "<input type='text'><label class='my-label'>Name</label>",
       html: true 
});

为什么它不起作用，只显示标签呢？

我想知道是否有某种方法可以解决这个问题...

谢谢！

Sweet Alert -> https://github.com/t4t5/sweetalert

- Alejandro Lora

Answer 1

你可以使用这个插件来实现你想要的功能： https://github.com/taromero/swal-forms 它以一种易于理解的语法方式在模态框中创建表单：

 swal.withForm({
    title: 'More complex Swal-Forms example',
    text: 'This has different types of inputs',
    showCancelButton: true,
    confirmButtonColor: '#DD6B55',
    confirmButtonText: 'Get form data!',
    closeOnConfirm: true,
    formFields: [
      { id: 'name', placeholder: 'Name Field' },
      { id: 'nickname', placeholder: 'Add a cool nickname' },
      { id: 'password', type: 'password' },

      { name: 'sex', value: 'Male', type: 'radio' },
      { name: 'sex', value: 'Female', type: 'radio' },

      { name: 'skills', value: 'JS', type: 'checkbox' },
      { name: 'skills', value: 'Ruby', type: 'checkbox' },
      { name: 'skills', value: 'Java', type: 'checkbox' },

      { id: 'select',
        type: 'select',
        options: [
          {value: 'test1', text: 'test1'},
          {value: 'test2', text: 'test2'},
          {value: 'test3', text: 'test3'},
          {value: 'test4', text: 'test4'},
          {value: 'test5', text: 'test5'}
        ]}
    ]
  }, function (isConfirm) {
    // do whatever you want with the form data
    console.log(this.swalForm) // { name: 'user name', nickname: 'what the user sends' }
  })

- jarey

Answer 2

我知道这已经过时了，但我会为所有的网络搜索者回答这个问题： 你需要将一个数组作为参数传递，并使用 html 属性：

swal({
html: "<form action='verify.php' method='post'>
    <input id='user' type='email'>
    <input id='pass' type='password'>
    <input id='idno' type='number'>
    <submit>
</form>"});

将verify.php替换为您需要数据的页面，并将html:后面的字符串替换为您需要的HTML代码。

唯一的缺点是人们需要点击表单上的提交按钮，而不是SweetAlert自己的按钮，尽管可能有一种方法也可以删除SweetAlert自己的按钮。

- Fons

Answer 3

看起来，你可以使用 Sweet Alert 并选择一个 'input' 类型（而不是 'error' 或 'warning'）。

    $window.swal({title: 'Text Entry', text: 'Put some text here, please.', type: 'input'});

来自Github README： 一个提示模态框，其中记录了用户的输入：

sweetAlert({
  title: "An input!",
  text: 'Write something interesting:',
  type: 'input',
  showCancelButton: true,
  closeOnConfirm: false,
  animation: "slide-from-top"
  }, function(inputValue){
    console.log("You wrote", inputValue);   
});

- Jon Edwards

---

我没有解释得很清楚，我想实现一个表单，有三到四个输入框。我看了文档，知道只有一个输入框是容易的。 - Alejandro Lora

我不相信在不改变SweetAlert代码的情况下这是可能的。你考虑过使用通用模态框吗？ - Jon Edwards

在通用模态中，我的框架注入的CSS类是否能够起作用？ - Alejandro Lora

我需要更多信息。您是否在使用SharePoint？或者您正在使用OOCSS框架（例如Bootstrap）吗？ - Jon Edwards

我正在使用materializecss.com。 - Alejandro Lora

明白了！我感到困惑是因为您的问题提到了customizecss.com。Materialize确实提供模态框：http://materializecss.com/modals.html。 - Jon Edwards