Javascript 带有两个输入字段的 SweetAlert 提示

SweetAlert prompt with two input fields

提问by ballerz

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 see on the SweetAlert website only allows one input field. Here is the code I have:

目前正在做个人项目。我希望用户单击一个按钮，并会向用户显示 SweetAlert 提示以验证他们的凭据。但是，我在 SweetAlert 网站上看到的代码只允许一个输入字段。这是我的代码：

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 I can get two input fields? One input field for the password and the other input field for text.

那么，有没有办法获得两个输入字段？一个输入字段用于密码，另一个输入字段用于文本。

采纳答案by Michael Bar-Sinai

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).

据我所知，你不能这样做现成的。你可以 fork 并实现，或者只使用 HTML 元素作为模态（例如在Bootstrap 的 modals 中）。

回答by Tikky

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

现在 SweetAlert2 可用：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:

不支持多个输入，您可以通过使用 html 和 preConfirm 参数来实现它们。在 preConfirm() 函数中，您可以将自定义结果作为参数传递给 resolve() 函数：

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)

回答by DaftDeath

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: noneto input fields.

只要将 html 属性设置为 true，您就可以使用默认的 SweetAlert 类型输入。问题是，除非类型设置为“输入”，否则 SweetAlert 会display: none在输入字段中添加一个。

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

这是一种解决方法，但您可以在 js 文件中更改它

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

to

到

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

And change the css file from

并将css文件从

.sweet-alert input {

to

到

.sweet-alert #swalInput {

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

然后您可以在调用时简单地将您的 html 添加到 text 参数中，如下所示：

swal({
    title: "Log In to Continue",
    html: true,
    text: "Username: <input type='text'><br>Password: <input type='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.

此方法仅指定唯一要以这种方式设置样式的输入是 SweetAlert 生成的输入，因此您添加到文本中的任何输入都不会受到该样式的影响。

回答by Mr.Senhaji

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

不支持多个输入，您可以通过使用HTML和preConfirm参数来实现它们。在preConfirm()函数内部，您可以返回（或者，如果异步，则使用）自定义结果：

function sweetAlert(){
  (async () => {

  const { value: formValues } = await Swal.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; 
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script>


<button onclick="sweetAlert()">Try me!</button>

Source: INPUT TYPES

来源：输入类型

回答by Igor Luciano

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

回答by Abhradip

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

不支持多个输入，您可以通过使用 html 和 preConfirm 参数来实现它们。请注意，在 preConfirm 函数中，您可以将自定义结果传递给 resolve()：

You can do this using such manner:

您可以使用以下方式执行此操作：

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/

回答by Ahmed Maher

It's very simple through the preConfirm method and using ok button as submission button in sweetalert2

通过 preConfirm 方法并使用 ok 按钮作为 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 
                     }
         })

回答by Jaydeep Pandya

Try this way

试试这个方法

swal({
  text: 'First Input',
  content: "input",
  button: {
    text: "Add New",
    closeModal: false,
  },
})
.then(name => {
    swal({
        text: 'Second Input',
        content: "input",
        button: {
        text: "Add New",
            closeModal: false,
        },
    }).then(id => {
      //save code here.
    }) 
}).catch(err => { 
    swal("Error");
});

回答by Stan

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

这是一个使用 sweetalert@^2.1.0 的示例，展示了具有多个输入字段的一种方法。该示例使用 jQuery，但此技术不需要 jQuery。

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

回答by user9083221

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

看看这个 https://sweetalert2.github.io/

"AJAX request example" + "Chaining modals (queue) example" has inputs and you can work with them

“AJAX 请求示例”+“链接模式（队列）示例”有输入，您可以使用它们