Sweetalert Prompt With Two Input Fields

Currently working on a personal project. I want the user to click a button and a SweetAlert prompt would be presented for the user to verify their credential. However, the code I s

Solution 1:

Now SweetAlert2 is available: https://sweetalert2.github.io

As per their info on bottom:

Multiple inputs aren't supported, you can achieve them by using html and preConfirm parameters. Inside the preConfirm() function you can pass the custom result to the resolve() function as a parameter:

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

Solution 2:

You can have inputs in the default SweetAlert type, as long as you set the html property to true. The issue is that unless the type is set to "input", SweetAlert adds a display: none to input fields.

It's a bit of a workaround, but you can change this in the js file from

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

to

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

And change the css file from

.sweet-alertinput {

to

.sweet-alert #swalInput {

Then you can simply add your html to the text parameter when calling, like so:

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

This method simply specifies that the only input to be styled that way is the one generated by SweetAlert, so that any inputs you add to your text won't be affected by that styling.

Solution 3:

As far as I know you can't do this off-the-shelf. You can either fork and implement, or just use a HTML element as a modal (e.g. as in Bootstrap's modals).

Solution 4:

Multiple inputs aren't supported, you can achieve them by using HTML and preConfirm parameters. Inside the preConfirm() function you can return (or, if async, resolve with) the custom result:

functionsweetAlert(){
  (async () => {

  const { value: formValues } = awaitSwal.fire({
    title: 'Multiple inputs',
    html:
      '<input id="swal-input1" class="swal2-input">' +
      '<input id="swal-input2" class="swal2-input">',
    focusConfirm: false,
    preConfirm: () => {
      return [
        document.getElementById('swal-input1').value,
        document.getElementById('swal-input2').value
      ]
    }
  })

  if (formValues) {
    Swal.fire(JSON.stringify(formValues))
  }

  })()
}

body {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif; 
}

<scriptsrc="https://cdn.jsdelivr.net/npm/sweetalert2@9.3.4/dist/sweetalert2.all.min.js"></script><buttononclick="sweetAlert()">Try me!</button>

Source: INPUT TYPES

Solution 5:

$(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) returnfalse;      
            if (inputValue === "") {
                swal.showInputError("Error");     
                returnfalse;
            }
            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) returnfalse;      
                if (inputValue === "") {     
                    swal.showInputError("E-mail error");     
                    returnfalse;
                }
                swal("Nice!", "You wrote: " + inputValue, "success"); 
            });
        });                 
    });
});