Question

我想在甜蜜警报中实现一个表单。我只能输入一个输入，标题和正文。

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

我试图在警报中包含输入，这样：

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

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

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

谢谢！

甜蜜警报 - ＆gt; https://github.com/t4t5/sweetalert

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

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自己的按钮。

Answer 3

看起来您可以使用带有“输入”类型的甜蜜警报（而不是“错误”或“警告”）。

page = form.submit form.button
scrape page

while link = page.link_with :text => 'Next'
  page = link.click
  scrape page
end

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

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

形式JS甜蜜警报（3输入）

3 个答案: