带有表单 JS 的 Sweet Alert(3 个输入) [英] Sweet Alert with form JS (3 input)
问题描述
我想在甜蜜警报中实现一个表单.我只能在里面放一个输入,包括标题和正文.
I would like to implement a form inside of the sweet alert. I can put just one input inside, with title and body.
文档说有一种方法可以自定义警报,但不允许从我的框架 (customizecss.com) 或我的 style.css 加载类 css3.
There is a way to customize the alert, docs says it, but is not allowed to load class css3 from my framework (customizecss.com) or from my style.css.
我试图在警报中包含一个输入,这样:
I'm trying to include a input inside of the alert, this way:
swal({
title: "HTML <small>Title</small>!",
text: "<input type='text'><label class='my-label'>Name</label>",
html: true
});
而且它不起作用,只显示标签......为什么?
And it doesn't work, only show the label... why?
不知道有没有什么办法...
I wonder if there is some way to do it...
谢谢!
甜蜜警报 -> https://github.com/t4t5/sweetalert
推荐答案
你可以使用这个插件来实现你想要的:
You can use this plugin in order to achive what you want:
https://github.com/taromero/swal-forms
它以语法严格的方式在模态内创建表单:
It creates forms inside the modal in a syntax-fiendly manner:
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' }
})
这篇关于带有表单 JS 的 Sweet Alert(3 个输入)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!