SweetAlert with two input fields

Question

Currently working on a personal project. I want the user to click a button and a SweetAlert prompt will be presented to the user to verify their credentials. However, the code I see on the SweetAlert website only allows one input field. Here is the code I have:

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

So, is there a way to get two input fields? One input field for the password and another input field for the text.

Answer 1

As far as I know, you cannot do it ready. You can either use fork and implement it, or simply use the HTML element as modal (for example, as in Bootstrap Modification ).

Answer 2

Now SweetAlert2 is available: https://sweetalert2.imtqy.com

According to their information at the bottom:

Multiple inputs are not supported, you can reach them using HTML and pre-validate the parameters. Inside the preConfirm () function, you can pass the custom result to the resol () 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 () { 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) 

Answer 3

You can have input in the standard SweetAlert style if you set the html property to true. The problem is that if the type is not set to "input", SweetAlert adds display: none fields for input.

This is 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-alert input { 

to

 .sweet-alert #swalInput { 

Then you can simply add your html to the text parameter when called, for example:

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

This method simply indicates that the only input that will be created this way is the one generated by SweetAlert, so any inputs you add to the text will not be affected by this style.

Answer 4

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

Answer 5

Multiple inputs are not supported, they can be achieved using the html and preConfirm parameters. Note that in the preConfirm function, you can pass a custom result for permission ():

You can do this using this method:

 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.imtqy.com/sweetalert2/ 

Answer 6

Yes, you can!!!

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

Answer 7

Here is an example of using sweetalert@ ^ 2.1.0, showing one way to have multiple input fields. The example uses jQuery, but jQuery is not required for this method to work.

 // ============================================================== //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 (ie 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()); 

Answer 8

check it out https://sweetalert2.imtqy.com/

"Example AJAX request" + "Example chain of modals (queues)" has inputs, and you can work with them

Answer 9

It is very simple using the preConfirm method and using the ok button as the submit button in sweetalert2

 swal.fire({ showCancelButton:true, html:'input1:<input id="input1" type="text"> input2: <input id="input2" type="text"> input3: <input id="input3" type="text">', preConfirm:function(){ in1= $('#input1').val(); in2= $('#input2').val(); in3 = $('#input3').val(); console.log(in1,in2,in3) // use user input value freely } })