web-dev-qa-db-fra.com

SweetAlert Invite avec deux champs de saisie

Travaille actuellement sur un projet personnel. Je veux que l'utilisateur clique sur un bouton et une invite SweetAlert lui soit présentée pour lui permettre de vérifier ses informations d'identification. Cependant, le code que je vois sur le site Web SweetAlert n'autorise qu'un seul champ de saisie. Voici le code que j'ai:

swal({
  title: "Authenicating for continuation",
  text: "Test",
  type: "input",
  showCancelButton: true,
  closeOnConfirm: false,
  animation: "slide-from-top",
  inputPlaceholder: "Write something"
}, function(inputValue) {
  if (inputValue === false) return false;
  if (inputValue === "") {
    swal.showInputError("You need to write something!");
    return false
  }
  // swal("Nice!", "You wrote: " + inputValue, "success");
});

Alors, est-il possible d'obtenir deux champs de saisie? Un champ de saisie pour le mot de passe et l'autre pour le texte.

javascriptpromptsweetalert
8
ballerz

Autant que je sache, vous ne pouvez pas faire cela dans le commerce. Vous pouvez soit forker et implémenter, soit simplement utiliser un élément HTML comme modal (par exemple, comme dans modals de Bootstrap ).

4
Michael Bar-Sinai

Maintenant, SweetAlert2 est disponible: https://limonte.github.io/sweetalert2/

Selon leurs informations en bas:

Plusieurs entrées ne sont pas prises en charge, vous pouvez les atteindre en utilisant HTML et pré-confirmer les paramètres. Dans la fonction preConfirm (), vous pouvez transmettez le résultat personnalisé à la fonction resolve () en tant que paramètre:

swal({
  title: 'Multiple inputs',
  html:
    '<input id="swal-input1" class="swal2-input">' +
    '<input id="swal-input2" class="swal2-input">',
  preConfirm: function () {
    return new Promise(function (resolve) {
      resolve([
        $('#swal-input1').val(),
        $('#swal-input2').val()
      ])
    })
  },
  onOpen: function () {
    $('#swal-input1').focus()
  }
}).then(function (result) {
  swal(JSON.stringify(result))
}).catch(swal.noop)
15
Tikky

Vous pouvez avoir des entrées dans le type SweetAlert par défaut, tant que vous définissez la propriété html sur true. Le problème est que, sauf si le type est défini sur "entrée", SweetAlert ajoute un display: none aux champs de saisie. 

C'est un peu une solution de contournement, mais vous pouvez changer cela dans le fichier js à partir de

<input type=\"text\" tabIndex=\"3\" />\n

à

<input id=\"swalInput\" type=\"text\" tabIndex=\"3\" />\n

Et changez le fichier css de

.sweet-alert input {

à

.sweet-alert #swalInput {

Ensuite, vous pouvez simplement ajouter votre code HTML au paramètre text lors de l'appel, comme suit:

swal({
    title: "Log In to Continue",
    html: true,
    text: "Username: <input type='text'><br>Password: <input type='password'>"
});

Cette méthode spécifie simplement que la seule entrée ainsi stylisée est celle générée par SweetAlert, de sorte que les entrées que vous ajoutez à votre texte ne soient pas affectées par ce style. 

7
DaftDeath
$(document).ready(function(){
    $("a").click(function(){
        swal({
            title: "Teste",   
            text: "Test:",   
            type: "input",
            showCancelButton: true,   
            closeOnConfirm: false,   
            animation: "slide-from-top",   
            inputPlaceholder: "User" 
        },
        function(inputValue){
            if (inputValue === false) return false;      
            if (inputValue === "") {
                swal.showInputError("Error");     
                return false;
            }
            swal({
                title: "Teste",   
                text: "E-mail:",   
                type: "input",
                showCancelButton: true,   
                closeOnConfirm: false,   
                animation: "slide-from-top",   
                inputPlaceholder: "Digite seu e-mail" 
            },
            function(inputValue){
                if (inputValue === false) return false;      
                if (inputValue === "") {     
                    swal.showInputError("E-mail error");     
                    return false;
                }
                swal("Nice!", "You wrote: " + inputValue, "success"); 
            });
        });                 
    });
});
3
Igor Luciano

Plusieurs entrées ne sont pas prises en charge, vous pouvez les obtenir en utilisant les paramètres html et preConfirm . Notez que, dans la fonction preConfirm, vous pouvez transmettre le résultat personnalisé pour résoudre ():

Vous pouvez le faire de cette manière:

swal({
title: 'Multiple inputs',
html:
'<h2>Login details for waybill generation</h2>'+
'<input id="swal-input1" class="swal2-input" autofocus placeholder="User ID">' +
'<input id="swal-input2" class="swal2-input" placeholder="Password">',
 preConfirm: function() {
   return new Promise(function(resolve) {
   if (true) {
    resolve([
      document.getElementById('swal-input1').value,
      document.getElementById('swal-input2').value
    ]);
   }
  });
 }
 }).then(function(result) {
swal(JSON.stringify(result));
})
}
The link here: https://limonte.github.io/sweetalert2/
1
Abhradip

check this out https://sweetalert2.github.io/

"Exemple de demande AJAX" + "Exemple de chaînage de modaux (file d'attente)" a des entrées et vous pouvez les utiliser

0
user9083221

Oui, vous pouvez!!! 

swal({
                  title: "An input!",
                  text: "Write something interesting:",
                  type: "input",
                  showCancelButton: true,
                  closeOnConfirm: false,
                  animation: "slide-from-top",
                  inputPlaceholder: "Write something"
                },
                function(inputValue){
                  if (inputValue === false) return false;

                  if (inputValue === "") {
                    swal.showInputError("You need to write something!");
                    return false
                  }

                  swal("Nice!", "You wrote: " + inputValue, "success");
                });
0
Rodrigo Butta

Voici un exemple utilisant sweetalert@^2.1.0, montrant une façon d’avoir plusieurs champs de saisie. L'exemple utilise jQuery, mais jQuery n'est pas requis pour que cette technique fonctionne.

// ==============================================================
//swal does not block, and the last swal wins
//so these swals are closed by later calls to swal, before you can see them
// ==============================================================
swal("aaa");
swal("bbb");

// ==============================================================
//for multiple inputs, use content: anHtmlElement
// ==============================================================
const div = document.createElement("div");
console.log(div);
$(div).html("first<input id='111' value='one'></input></br>second<input id='222' value='two'></input></br>third<input id='333' value='three'></input>");
swal({
    title: "Three Inputs",
    content: div,
    // ==============================================================
    //true means show cancel button, with default values
    // ==============================================================
    buttons: [true, "Do It"]
}).then(value => {
    if (value) {
        const outputString = `
            value is true for confirm (i.e. OK); false for cancel
            value: ${value}
            ` + $("#111").val() + " " + $("#222").val() + " " + $("#333").val();
        // ==============================================================
        // there are no open swals at this point, so another call to swal  is OK here
        // ==============================================================
        swal(outputString);
    } else {
        swal("You cancelled");
    }
});

alert("swal is not blocking: " + $("#111").val() + " " + $("#222").val() + " " + $("#333").val());
0
Stan