javascript - How can I add multiple inputs to a SweetAlert2 popup? - Stack Overflow

admin管理员组

文章数量:1393900

I have code on my website that uses a SweetAlert2 popup to let users request songs:

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

But when I add another input it will only read the second one. How do I add another input so listeners can include their name/username for shoutouts?

I have code on my website that uses a SweetAlert2 popup to let users request songs:

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

But when I add another input it will only read the second one. How do I add another input so listeners can include their name/username for shoutouts?

• javascript
• sweetalert2

Share Improve this question Follow edited Mar 23, 2018 at 1:41 AuxTaco 5,18111 gold badge1616 silver badges2828 bronze badges asked Mar 22, 2018 at 0:36 Joshua RJoshua R 1111 gold badge11 silver badge11 bronze badge 1

• Please give more info. What is your requirement? – Shrihari Balasubramani Commented Mar 22, 2018 at 1:03

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

From SweetAlert2's documentation:

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:

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

Adapting this to your code:

$("#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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare./ajax/libs/limonte-sweetalert2/7.3.5/sweetalert2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare./ajax/libs/limonte-sweetalert2/7.3.5/sweetalert2.all.js"></script>
<button id="request-song">Request a Song</button>

The preConfirm property contains a function that returns the object that will eventually be returned from your swal call. Before, swal().value was a string: the name of the requested song. Now, it's an object: {song: 'the song I want to hear', listener: 'me'}. You can pass this object to $.post and modify request.php to handle it:

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

Or, if you don't want to modify the PHP, you can convert the object to a string and pass it that way:

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

Note your selector #request-song, which is an ID selector. ID should be unique in a single web page, therefore the selector only returns the first matching element (I guess you are using jQuery).

To select multiple elements, try to use class or other types of selectors instead of ID selector.

For more information about CSS selectors, take a look at the MDN page.

本文标签： javascriptHow can I add multiple inputs to a SweetAlert2 popupStack Overflow