javascriptによるDjangoのボタン

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>要素は、その中のすべての入力をラップする必要があります。ボタン内に入力することはできません。 2つのボタンの理由は、<button>と<input type="button">を使用したためです。ここでも入れ子にしてはいけません。この固定されたバージョン試してみてください。また、on*イベントを使用すると、属性のことに注意して

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

は関心事の分離のために悪いです直接カップル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>