Django button with javascript alert

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>