Django Knopf mit Javascript-Alarm

Question

Ich verbessere meine Django Webseite und ich möchte mit Fensteralarm hinzufügen, wenn Benutzer auf diese Schaltfläche geklickt haben.

Ich machte das in meiner HTML-Vorlage, aber ich bin mir nicht sicher, Wie ich das schreiben muss. Mein Skript wie folgt aussieht:

<button onclick="myFunction()"> 
     <form class = "col-sm-10" method='POST' action="{% url "PDF" birthcertificate.id %}"> {% csrf_token %} 
     <input class = "button" type ="submit" value="Générer le PDF des acte de naissance" /> 
    </button> 

    <script> 
    function myFunction() { 
     alert("Votre PDF a été généré"); 
    } 
    </script> 


    </form> 

Aber ich habe diese Art der Anzeige:

Ich habe 2 Knöpfe, aber ich möchte nur den Bootstrap-Stil angezeigt werden soll. Haben Sie eine Idee?

Danke;)

Answer 1

Das Problem ist, weil Ihr HTML ungültig ist. Das Element <form> muss alle Eingaben innerhalb dieses Elements umbrechen, es sollte sich niemals in einer Schaltfläche befinden. Der Grund für die zwei Schaltflächen ist, dass Sie eine <button> und <input type="button"> verwendet haben. Auch hier sollten sie nicht verschachtelt sein. Versuchen Sie, diese feste Version:

<form class="col-sm-10" method='POST' action="{% url "PDF" birthcertificate.id %}"> 
 
    {% csrf_token %}> 
 
    <button onclick="myFunction()">Générer le PDF des acte de naissance </button> 
 
</form> 
 

 
<script> 
 
    function myFunction() { 
 
    alert("Votre PDF a été généré"); 
 
    } 
 
</script>

Beachten Sie auch, dass on* Ereignis verwendet, ist eine schlechte Praxis betrachtet Attribute wie es Paare der HTML-und JS-Code direkt, die Separation of Concerns schlecht ist. Um dies zu beheben, können Sie einen unauffälligen Event-Handler verwenden. Wie Sie die Frage mit jQuery mit Tags versehen haben, ist hier, wie Sie das tun können:

$(function() { 
 
    $('button').click(function() { 
 
    alert("Votre PDF a été généré"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="col-sm-10" method='POST' action="{% url "PDF" birthcertificate.id %}"> 
 
    {% csrf_token %}> 
 
    <button>Générer le PDF des acte de naissance </button> 
 
</form>