如何为SweetAlert2弹窗添加多个输入框？

Got it, let's tackle that problem you're having adding a second input field to your SweetAlert2 song request popup! The core issue here is that the basic input: 'text' option only supports a single input—you need to use either SweetAlert2's built-in multi-input array or custom HTML to add more fields. Here are two straightforward solutions:

Solution 1: Use SweetAlert2's Native Multi-Input Array #

This is the simplest approach for basic multiple text inputs. We'll replace the single input option with an inputs array, where each item defines a separate input field:

$('#request-song').click(async function() {
  const { value: formValues } = await swal({
    title: "Request a Song (please note song request won't be played unless we are live)",
    inputs: [
      {
        type: 'text',
        placeholder: 'Enter Artist Name'
      },
      {
        type: 'text',
        placeholder: 'Enter Song Name'
      }
    ],
    showCancelButton: true,
    confirmButtonText: 'Submit Request'
  });

  if (formValues) {
    // Extract values from the returned array (order matches your inputs)
    const artist = formValues[0];
    const song = formValues[1];
    
    // Send both values to your PHP endpoint
    $.post("functions/request.php", { 
      artist: artist, 
      song: song 
    }, function(data) {
      console.log(data);
    });
    
    swal({type: 'success', title: 'Success!'});
  }
});

Key Notes for This Solution: #

• The formValues variable will be an array where each element corresponds to the input in your inputs array (first input = index 0, second = index 1, etc.).
• Don't forget to update your request.php file to accept the new artist and song parameters instead of the single request parameter from your original code.

Solution 2: Custom HTML Form (For More Control) #

If you want more flexibility—like adding labels, custom styling, or input validation—use the html option to build your own form. We'll also use the preConfirm hook to validate and collect input values before submission:

$('#request-song').click(async function() {
  const { value: formData } = await swal({
    title: "Request a Song (please note song request won't be played unless we are live)",
    html: `
      <div class="swal2-form-group">
        <label for="swal-input-artist">Artist</label>
        <input id="swal-input-artist" class="swal2-input" placeholder="Enter Artist Name">
      </div>
      <div class="swal2-form-group">
        <label for="swal-input-song">Song</label>
        <input id="swal-input-song" class="swal2-input" placeholder="Enter Song Name">
      </div>
    `,
    showCancelButton: true,
    confirmButtonText: 'Submit Request',
    preConfirm: () => {
      // Get input values
      const artist = $('#swal-input-artist').val().trim();
      const song = $('#swal-input-song').val().trim();
      
      // Validate inputs (prevent empty submissions)
      if (!artist || !song) {
        swal.showValidationMessage('Please fill out both artist and song fields!');
      }
      
      // Return validated data to use after confirmation
      return { artist, song };
    }
  });

  if (formData) {
    // Send the validated data to your PHP script
    $.post("functions/request.php", { 
      artist: formData.artist, 
      song: formData.song 
    }, function(data) {
      console.log(data);
    });
    
    swal({type: 'success', title: 'Success!'});
  }
});

Key Notes for This Solution: #

• The preConfirm function runs when the user clicks the confirm button—this is where you should add validation logic to ensure users don't submit empty fields.
• The formData variable will be an object containing the artist and song values you returned from preConfirm, making it easy to pass to your AJAX call.

Whichever solution you choose, just remember to update your request.php to handle the new parameters, and you'll have a working multi-input song request popup in no time!

内容的提问来源于stack exchange，提问作者Joshua R