Сладкое предупреждение с формой JS (3 ввода)

Question

Я хотел бы реализовать форму внутри сладкого предупреждения. Я могу вставить только один вход внутрь, с заголовком и телом.

Существует способ настроить оповещение, сообщает docs, но не разрешено загружать класс css3 из моей структуры (customizecss.com) или из моего стиля. Css.

Я пытаюсь включить вход внутри чеку, так:

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

И это не работает, только показать этикетку ... почему?

Интересно, есть ли какой-то способ сделать это ...

Спасибо!

Сладкие оповещения ->https://github.com/t4t5/sweetalert

Answer 1

Вы можете использовать этот плагин для того, для того чтобы достигнуть того, что вы хотите:

https://github.com/taromero/swal-forms

Это создает формы внутри модального в синтаксически fiendly образом:

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

Похоже, что вы можете использовать Сладкие оповещения с типом «вход» (в отличие от «ошибки» или «предупреждение»).

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

Из README 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); 
}); 

Answer 3

Я знаю, что это старый, но я отвечу на вопрос, для всех веб-поисковиков там : Вы должны дать массив в качестве аргумента, используя 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 с whateve r вам нужны данные, и замените строку после html: на любой HTML-код, который вам нужен.

Единственным недостатком является то, что людям нужно нажать кнопку отправки в форме, а не собственную кнопку SweetAlert, хотя может быть и способ удалить собственную кнопку SweetAlert.