web-dev-qa-db-ja.com

フォームJS付きのSweetAlert（3入力）

スイートアラート内にフォームを実装したいと思います。タイトルと本文の入力を1つだけ入れることができます。

アラートをカスタマイズする方法はありますが、私のフレームワーク（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

javascripthtmlformscsssweetalert
5
Alejandro Lora

このプラグインを使用して、必要なものを実現できます。

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' }
  })
2
jarey

私はこれが古いことを知っていますが、そこにいるすべてのWeb検索者への質問に答えます：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自身のボタンではなく、フォームの送信ボタンを押す必要があることです。

1
Fons

（「エラー」や「警告」ではなく）「入力」タイプのSweetAlertを使用できるようです。

    $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);   
});
0
Jon Edwards