October 24, 2024
Chicago 12, Melborne City, USA
HTML

make sweetalert2 html element dynamic via its html method


As anticipated by the title I want to make the html element of sweetalert2 dynamic.

I am using the sweetalert2 library.
https://sweetalert2.github.io/

In particular, I have an array with elements inside it.
My goal is to create as many checkboxes as there are elements in the array.

I tried to use foreach inside the html method that sweetalert2 provides, but as you can easily see from the reproducible example below I get nothing.

const arr = ['Alex','Jasmine','Andrie','Elton','Susy'];

function test() {
Swal.fire({
    html: 
    arr.forEach(user => {
        `  
        <div>
            <input type="checkbox" id="user" name="user" value="">
            <label for="">User</label><br>
        </div>
        `
    }),
    focusConfirm: false,
  })
}

document.getElementById ("test").addEventListener ("click", test);
<script src="https://unpkg.com/sweetalert2@7.18.0/dist/sweetalert2.all.js"></script>



  <button type="button" id="test" class="button">
    Click
  </button>

Can someone help me? Can you tell me where I am going wrong?



You need to sign in to view this answers

Leave feedback about this

  • Quality
  • Price
  • Service

PROS

+
Add Field

CONS

+
Add Field
Choose Image
Choose Video