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!'});
  }
});

但是当我添加另一个输入时，它只会读取第二个输入。如何添加其他输入，以便侦听器可以包含用于shoutouts的名称/用户名？

Answer 1

请注意您的选择器#request-song，它是 ID 选择器。 ID在单个网页中应该是唯一的，因此选择器只返回第一个匹配元素（我猜你使用的是jQuery）。

要选择多个元素，请尝试使用类或其他类型的选择器而不是ID选择器。

有关CSS选择器的更多信息，请查看MDN page。

Answer 2

来自SweetAlert2's documentation：

不支持多个输入，您可以使用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))
}

根据您的代码进行调整：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.3.5/sweetalert2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.3.5/sweetalert2.all.js"></script>
<button id="request-song">Request a Song</button>

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!'});
}

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

2 个答案: