Кнопка Django с предупреждением javascript

Question

Я улучшаю свой сайт Django, и я хотел бы добавить javascript button с предупреждением окна, когда пользователи нажали эту кнопку.

Я сделал это в своем шаблоне HTML, но не уверен, как мне это написать. Мой сценарий выглядит следующим образом:

<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> 

Но я получаю этот вид дисплея:

я получил 2 кнопки, но я хочу, чтобы отобразить только стиль начальной загрузки. У вас есть идеи?

Спасибо;)

Answer 1

Проблема в том, что ваш HTML является недействительным. Элемент <form> должен обернуть все входы в нем, он никогда не должен находиться внутри кнопки. Причина для двух кнопок заключается в том, что вы использовали <button> и <input type="button">. Опять же, они не должны быть вложенными. Попробуйте эту исправленную версию:

<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>

отметить также, что с помощью on* атрибуты событий считается плохой практикой, как она связывает между собой HTML и JS кода непосредственно, что плохо для разделения проблем. Чтобы исправить это, вы можете использовать ненавязчивый обработчик событий. Как вы уже помечено вопрос с JQuery, вот как вы можете сделать это:

$(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>