javascript - Sweet Alert med formulär JS (3 inmatningar)

Jag skulle vilja implementera ett formulär inuti sweet alert. Jag kan bara lägga en inmatning inuti, med titel och text.

Det finns ett sätt att anpassa alerten, dokumentationen säger det, men det är inte tillåtet att ladda klass css3 från mitt ramverk (customizecss.com) eller från min style.css.

Jag försöker inkludera ett inputfält inuti alerten på det här sättet:

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

Och det fungerar inte, visar bara etiketten... varför?

Jag undrar om det finns något sätt att göra det...

Tack!

Sweet Alert -> https://github.com/t4t5/sweetalert

Svar #1

Du kan använda detta plugin för att uppnå det du vill:

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

Det skapar formulär inuti modalen på ett syntaxvänligt sätt:

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

Svar #2

Jag vet att detta är gammalt, men jag kommer att svara på frågan för alla som söker på webben: Du måste ge ett objekt som ett argument, med en html-egenskap:

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>"});

Byt ut verify.php mot vilken sida du behöver datan på, och byt ut strängen efter html: mot vilken HTML-kod du behöver.

Den enda nackdelen är att folk behöver klicka på skicka-knappen på formuläret, och inte på SweetAlerts egen knapp, även om det kan finnas ett sätt att ta bort SweetAlerts egen knapp också.