JavaScript code in sweetalert2 pop up could not work

Question

I have a web app, frontend using basic HTML5, backend using Django.

In the frontend page, there's a sweet alert pop up.

But the JavaScript code in sweet alert pop up could not work.

Swal.fire({
  title: "title",
  html: "<br>" + "Course Code: " + "<select class=\"operator2\" style=\"width: 30%\" id=\"discipline_code_course_code\" name=\"discipline_code_course_code\">\n" +
    "                    <option value=\"\">--Select--</option>\n" +
    "                    {% for code in query_results_code %}\n" +
    "                    <option value=\"{{ code.discipline_code }}{{ code.code }}\">{{ code.discipline_code }}{{ code.code }}</option>" +
    "                    {% endfor %}\n" + "<select>" + "<br>" +

    "Commencing Semester: " + "<select style=\"width: 30%\" id=\"semester\" name=\"semester\">\n" +
    "                    <option value=\"\">--Select--</option>\n" +
    "                    {% for semester in query_results_2.reverse %}\n" +
    "{% if forloop.counter > 3 %}\n" +
    "                    <option value=\"{{ semester.id }}\">{{ semester.slug }}</option>" +
    "{% endif %}\n" +
    "                    {% endfor %}\n" + "<select>" + "<br>" +

    "Course Type: " + "<select style=\"width: 30%\" id=\"type\" name=\"type\">\n" +
    "                    <option value=\"\">--Select--</option>\n" +

    "                    <option value=\"Part Time\">Part Time</option>" +
    "<option value=\"Full Time\">Full Time</option>" +
    "<option value=\"Part time & Full time\">Part time & Full time</option>" +
    "<select><script>$(\"#semester\").change(function(){   //pending220107\n" +
    "                alert('test');\n" +
    "                var code = $('#discipline_code_course_code').val();\n" +
    "                var semester = $(this).val();\n" +
    "\n" +
    "                $.ajax({\n" +
    "                    url: /con2/,\n" +
    "                    type: 'post',\n" +
    "                    data: {code:code, semester:semester},\n" +
    "                    dataType: 'json',\n" +
    "                    success:function(response){\n" +
    "                        alert(response);\n" +
    "                        console.log(response);\n" +
    "                        var len = response.length;\n" +
    "                        $(\"#type\").empty();\n" +
    "                        $(\"#type\").append('<option value=\"\" selected disabled hidden>--Select--</option>');\n" +
    "                        for( var i = 0; i<len; i++){\n" +
    "                            var id = response[i]['id'];\n" +
    "                            var type = response[i]['type'];\n" +
    "                            $(\"#type\").append(\"<option value='\"+type+\"'>\"+type+\"</option>\");\n" +
    "\n" +
    "                        }\n" +
    "                    }\n" +
    "                });\n" +
    "            });<\/script>",

  confirmButtonText: "Submit",
  showCancelButton: true,
  cancelButtonText: "Cancel"

})

Why the JavaScript code in sweet alert could not work?

I have added:alert('test') in the JavaScript code, but nothing alerted, means that the JavaScript code does not run at all.

The JavaScript code could run well in other pages without sweet alert pop up.

Answer 1

you had some error in syntax and as Luca Kiebel said in comment of not including js in html of swal i made a working fiddle https://jsfiddle.net/3nt1b4mc/ your alert is working on change

Swal.fire({
  title: "title",
  html: "<br>" + "Course Code: " + "<select class=\"operator2\" style=\"width: 30%\" id=\"discipline_code_course_code\" name=\"discipline_code_course_code\">\n" +
    "                    <option value=\"\">--Select--</option>\n" +
    "                    {% for code in query_results_code %}\n" +
    "                    <option value=\"{{ code.discipline_code }}{{ code.code }}\">{{ code.discipline_code }}{{ code.code }}</option>" +
    "                    {% endfor %}\n" + "<select>" + "<br>" +

    "Commencing Semester: " + "<select style=\"width: 30%\" id=\"semester\" name=\"semester\">\n" +
    "                    <option value=\"\">--Select--</option>\n" +
    "                    {% for semester in query_results_2.reverse %}\n" +
    "{% if forloop.counter > 3 %}\n" +
    "                    <option value=\"{{ semester.id }}\">{{ semester.slug }}</option>" +
    "{% endif %}\n" +
    "                    {% endfor %}\n" + "<select>" + "<br>" +

    "Course Type: " + "<select style=\"width: 30%\" id=\"type\" name=\"type\">\n" +
    "                    <option value=\"\">--Select--</option>\n" +

    "                    <option value=\"Part Time\">Part Time</option>" +
    "<option value=\"Full Time\">Full Time</option>" +
    "<option value=\"Part time & Full time\">Part time & Full time</option>" +
    "</select>",
  //"Current Adopted Course Code: " + res.data.msg,
  confirmButtonText: "Submit",
  showCancelButton: true,
  cancelButtonText: "Cancel"

});
$("#semester").change(function(){
   alert('test');
   var code = $('#discipline_code_course_code').val();
   var semester = $(this).val();

   $.ajax({
        url: '/con2/',
       type: 'post',
        data: {code:code, semester:semester},
        dataType: 'json',
        success:function(response){
            alert(response);
            console.log(response);
            var len = response.length;
            $("#type").empty();
            $("#type").append('<option value="" selected disabled hidden>--Select--</option>');
           for( var i = 0; i<len; i++){
               var id = response[i]['id'];
                var type = response[i]['type'];
               $("#type").append("<option value='"+type+"'>"+type+"</option>");
            }
        }
    });
});

`