帶有表單 JS 的 Sweet Alert（3 個輸入）

Question

我想在甜蜜警報中實現一個表單。 我只能在里面放一個輸入，包括標題和正文。

有一種方法可以自定義警報，文檔說它，但不允許從我的框架（customizecss.com）或我的 style.css 加載類 css3。

我試圖在警報中包含一個輸入，這樣：

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

它不起作用，只顯示標簽......為什么？

我想知道有沒有什么方法可以做到...

謝謝！

Sweet Alert -> 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

看起來您可以使用帶有“輸入”類型（而不是“錯誤”或“警告”）的 Sweet Alert。

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

來自 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);   
});