sweetalert2 swal çoklu input kullanmak

Ajax ili ilgi herşey bu başlıkta dersler, videolar, örnekler
Cevapla
abdulkadirlevent
Site Admin
Mesajlar: 18
Kayıt: Pzr Oca 19, 2020 4:27 pm

sweetalert2 swal çoklu input kullanmak

Mesaj gönderen abdulkadirlevent »

sweetalert2
swal multiple

Kod: Tümünü seç

<link href="assets/sweetalert2/sweetalert2.min.css" rel="stylesheet" type="text/css" />
<script src="/assets/sweetalert2/sweetalert2.all.min.js" type="text/javascript"></script>

<button class="input-type-multiple"  id="request-song" aria-label="Try me! Example: multiple inputs">Try me!</button>
<script type="text/javascript">
$("#request-song").click(async function() {
  const {value: valRequest} = await swal ({
    title: 'Gönderim bilgileri',
    html:
      '<input id="adi"    class="swal2-input" type="email" maxlength="60" placeholder="adi">' +
      '<input id="soyadi" class="swal2-input" type="email" maxlength="60" placeholder="soyadi">' +
      '<input id="posta" class="swal2-input" maxlength="60" placeholder="Posta">' +
      '<input id="mesaj"  class="swal2-textarea" maxlength="600" style="display: flex;" aria-label="Type your message here" placeholder="mesaj">',
    preConfirm: () => ({
      adi   : $('#adi').val(),
      soyadi: $('#soyadi').val(),
      posta : $('#posta').val(),
      mesaj : $('#mesaj').val()
    })
  });
  if (valRequest){ 
      swal( `
       Adı   : ${valRequest.adi} 
       Soyadı: ${valRequest.soyadi} 
       Posta : ${valRequest.posta}  
       Mesaj : ${valRequest.mesaj}
      `);
  }
});
</script>
Örnek çıktısı
swal_demo.png
Sonuç çıktısı
swal_demo2.png
Bu mesaja eklenen dosyaları görüntülemek için gerekli izinlere sahip değilsiniz.

Cevapla