如何向 SweetAlert2 弹出窗口添加多个输入？

Question

我的网站上有代码，使用 SweetAlert2 弹出窗口让用户请求歌曲：

$('#request-song').click(async function() {
  const { value: song } = await swal({
    title: "Request a Song (please note song request won't be played unless we are live)",
    input: 'text',
    inputPlaceholder: 'Enter Artist - Song Name',
  });

  if (song) {
    $.post("functions/request.php", {request: song}, function(data) {
      console.log(data);
    });
    swal({type: 'success', title: 'Success!'});
  }
});

但是当我添加另一个输入时，它只会读取第二个输入。如何添加另一个输入，以便听众可以在喊话中包含他们的姓名/用户名？

Answer 1

来自SweetAlert2 的文档：

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

const {value: formValues} = await swal({
  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(JSON.stringify(formValues))
}

将此调整为您的代码：

const {value: formValues} = await swal({
  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(JSON.stringify(formValues))
}

$("#request-song").click(async function() {
  const {value: songRequest} = await swal ({
    title: 'Request a Song',
    html:
      '<input id="song" class="swal2-input" placeholder="Song">' +
      '<input id="listener" class="swal2-input" placeholder="Listener">',
    preConfirm: () => ({
      song: $('#song').val(),
      listener: $('#listener').val()
    })
  });
  
  if (songRequest) swal(`${songRequest.listener} requests ${songRequest.song}`);
});

该preConfirm属性包含一个函数，该函数返回最终将从您的swal调用返回的对象。之前swal().value是一个字符串：请求的歌曲的名称。现在，它是一个对象：{song: 'the song I want to hear', listener: 'me'}。您可以将此对象传递给$.post并修改request.php以处理它：

if (songRequest) {
  $.post("functions/request.php", {request: songRequest}, function(data) {
    console.log(data);
  });
  swal({type: 'success', title: 'Success!'});
}

或者，如果您不想修改 PHP，您可以将对象转换为字符串并以这种方式传递：

if (songRequest) {
  $.post("functions/request.php", {request: JSON.stringify(songRequest)}, function(data) {
    console.log(data);
  });
  swal({type: 'success', title: 'Success!'});
}