Javascript 带表单JS的甜蜜警报（3输入）

我想在sweet alert内部实现一个表单。我可以在里面放一个输入，标题和正文

docs说，有一种自定义警报的方法，但不允许从我的框架（customizecss.com）或从我的style.css加载类css3

我试图在警报中包含一个输入，如下所示：

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

swal({
标题：“HTML标题！”，
文字：“姓名”，
html：对
});

但它不起作用，只显示标签。。。为什么?

我想知道是否有办法做到这一点

谢谢

---

甜警报->

看起来您可以将甜警报与“输入”类型一起使用（与“错误”或“警告”相对）

从Github自述文件： 记录用户输入的提示模式：

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

---

我知道这很古老，但我将为所有的网络搜索者回答这个问题： 您需要使用

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

swal({
html:“
"});

将

verify.php

替换为需要数据的任何页面，并将

html:

之后的字符串替换为需要的任何html代码

---

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

您可以使用此插件来实现您想要的：

它以语法友好的方式在模态内部创建表单：

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

---

我解释得不是很好，我想实现一个表单，有三到四个输入。我看过文档，我知道只有一个输入是容易的。我不相信如果不更改SweetAlert的代码，这是不可能的。你考虑过通用模式吗？嗯，在通用模式中，我的类CSS可能是从我的框架工作中注入的？我需要更多的信息。您正在使用SharePoint吗？或者你正在使用OOCSS框架（例如Bootstrap）？明白了！我很困惑，因为你的问题提到了Customizecs.com。Materialize不提供模态：

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