Sweet Alert with form JS (3 input)
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' }
})
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 html
property:
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.php
with whatever page you need the data in, and replace the string after html:
with whatever HTML code you need.
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.