Javascript 带有表单 JS 的 Sweet Alert（3 个输入）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30655649/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sweet Alert with form JS (3 input)
提问by Alejandro Lora
I would like to implement a form inside of the sweet alert. I can put just one input inside, with title and body.
我想在甜蜜警报中实现一个表单。我只能在里面放一个输入，包括标题和正文。
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.
有一种方法可以自定义警报，文档说它，但不允许从我的框架（customizecss.com）或我的 style.css 加载类 css3。
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...
我想知道有没有什么方法可以做到...
Thanks!
谢谢！
Sweet Alert -> https://github.com/t4t5/sweetalert
Sweet Alert -> https://github.com/t4t5/sweetalert
采纳答案by jarey
You can use this plugin in order to achive what you want:
您可以使用此插件来实现您想要的：
https://github.com/taromero/swal-forms
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' }
})
回答by Fons
I know this is old, but I'll answer the question for all the web searchers out there:
You need to give an array as an argument, using an htmlproperty:
我知道这是旧的，但我会回答所有网络搜索者的问题：您需要使用一个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>"});
Replace verify.phpwith whatever page you need the data in, and replace the string after html:with whatever HTML code you need.
用verify.php您需要数据的任何页面替换，然后html:用您需要的任何 HTML 代码替换后面的字符串。
The only downside is that people need to hit the submit-button on the form, and not SweetAlert's own button, although there might be a way to remove SweetAlert's own button too.
唯一的缺点是人们需要点击表单上的提交按钮，而不是 SweetAlert 自己的按钮，尽管也有一种方法可以删除 SweetAlert 自己的按钮。
回答by Jon Edwards
It looks like you can use a Sweet Alert with a type of 'input' (as opposed to 'error' or 'warning').
看起来您可以使用带有“输入”类型（而不是“错误”或“警告”）的 Sweet Alert。
$window.swal({title: 'Text Entry', text: 'Put some text here, please.', type: 'input'});
From the Github README: A prompt modal where the user's input is logged:
来自 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);
});
