0

I created a sweetalert popup with html inside and select options. I cannot find a way to detect and assign the value of the selected option

this is my code:

Swal.fire({

  title: 'test title',
  html: '<form><select id="trasp">' +
    '<option value="val-aaaa" selected>value AAAA</option>' +
    '<option value="val-bbb" selected>value BBB</option>' +
    '<option value="val-cccc" selected>value CCC</option>' +
    '</form></select>',

  text: "emailreg",
  iconHtml: '<i class="far fa-edit" style="font-size: 45px; color: #41617e;"></i>',

  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Edit and send',
  cancelButtonText: 'Annulla',


}).then((result) => {
  if (result.isConfirmed) {
    $.ajax({
      type: "POST",
      url: "_status.php",
      data: 'value=' + value,

      success: function() {
        Swal.fire('All sent', '', 'success').then(okay => {
          if (okay) {
            window.location.reload();
          }
        })
      }
    })
  }

})
var e = document.getElementById("trasp");

function onChange() {
  var value = e.value;
  var text = e.options[e.selectedIndex].text;
  console.log(value);
}
e.onchange = onChange;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9.17.1/dist/sweetalert2.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@9.17.1/dist/sweetalert2.css">

i would like to have the option selected value top be passed to ajax url. (In my case i wrote the variable called value but doesn't work)

Any help?

freedomn-m
  • 27,664
  • 8
  • 35
  • 57
dev2023it
  • 11
  • 1
  • Your only issue appears to *scope* - your `var value =` is defined within `onChange` so can only be used within that function. Move the declaration outside (next to `var e =`) but keep `value = e.value` inside `onChange`. The event itself works fine in your code – freedomn-m Dec 05 '22 at 09:07

0 Answers0