如何在django中链接提交按钮和javascript功能？

Question

我想通过点击按钮显示脚本代码，但是当我点击时没有任何反应 模型字段：PointDeCollecte (nom , latitude , longitude ) 通常通过点击按钮它返回select（#id vehicle）和（#id PointDeCollecte）的数据 vehicules：选定车辆的清单 demandes：所选({{PointDeCollecte.latitude}},{{PointDeCollecte.longitude}})

的列表

    <form>
    <div class="form-row">
<div class="form-group col-md-6">
<label for="pt_collecte">Les destinations a visités </label>
                        <select multiple class="form-control" id="pt_collecte">
                            {% for PointDeCollecte in pt_collectes%}
                                <option value="{{ PointDeCollecte.id }}">{{ PointDeCollecte.Nom }} </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="vehicule_sel">Les véhicules a utilisés </label>
                        <select multiple class="form-control" id="vehicule_sel">
                            {% for vehicule in vehicules %}
                            <option value="{{ vehicule.id }}">{{ vehicule.Matricule }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="form-group col-md-4">
                    <button id="resoudre" class="btn btn-primary my-1">valider </button>
                </div>
            </form>
<div class="card card-map">
            <div class="map">
                <div id="map"></div>
            </div>
        </div>
</div>
<script>
        $(document).ready(function() {
            $("#resoudre").click(function(){
                var strVehicules = $('#vehicule_sel')[0].value.innerText;
                var vehicules = strVehicules.split(" ");
                var idDemandes = $('#pt_collecte')[0].value;
                p = PointCollecte.objects.get(id=idDemandes);
                var strDemandes = (p.Latitude,p.Longitude);
                var demandes = strDemandes.split(" ");
                myMap(vehicules,demandes);
             });

            function myMap(vehicules,demandes){
             initMap(vehicules,demandes);
            }

            function initMap(vehicules,demandes){
                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 15,
                    center: {lat: 33.589886, lng: -7.603869}
             });

             if(vehicules.length > 1 && vehicules.length <= demandes.length){
                 var liste = [];
                 var i = parseInt(demandes.length/vehicules.length | 0);
                 var j = i;
                 var k = 0;
                 while(j<=demandes.length){
                     if((j+i)>vehicules.length*i){
                         liste.push(demandes.slice(k,j+j+1));
                         break;
                     }
                     else
                         {
                             liste.push(demandes.slice(k,j));
                             k=j;
                             j=j+i;
                         }
                 }
                 moreThanOneRoute(liste,map);}
                 else {
                 oneRoute(demandes,map);
             }
            }

             function calculateAndDisplayRoute(waypoints,directionsService, directionsDisplay) {
             directionsService.route({
                 origin: "Haj Kaddour,km 10",
                 destination: "Haj Kaddour,km 10",
                 waypoints: waypoints,
                 travelMode: 'DRIVING'
             }, function(response, status) {
                 if (status === 'OK') {
                     directionsDisplay.setDirections(response);
                 } else {
                 }
             });
         }
             function oneRoute(liste,map) {
                 var directionsService = new google.maps.DirectionsService;
                 var directionsDisplay = new google.maps.DirectionsRenderer;
                 directionsDisplay.setMap(map);

                 var waypoints = [];
                 for (var i = 0; i < liste.length; i++) {
                     var address = liste[i];
                     if (address !== "") {
                         waypoints.push({
                             location: adress+"Casablanca, Morocco",
                             stopover: true
                         });
                     }
                 }
                 calculateAndDisplayRoute(waypoints, directionsService, directionsDisplay);
             }

        });


    </script>