2つの変数の合計を計算する

Question

twigの2つの変数の合計をリアルタイムで計算したいですか？ これは枝のついたドリブルか、私はJavascriptで試すべきですか？私は、ページに戻り、フォームを完了する必要があり、私は以下のコードを使用して小枝を試してみましたが、それはリール時間で作業をdoesntの

（3ページに私のフォーム）

<div > 
    <label for="nbStudentClassA" >Number of studentA</label> 
    <div > 
     {{ form_widget(form.nbStudentA}} 
    </div> 
</div> 

<div > 
    <label for="nbStudentClassB" >Number of student B</label> 
    <div> 
     {{ form_widget(form.nbStudentB}} 
    </div> 
</div> 

<div 
    <label >Sum </label> 
    <div > 
    {% set sum = form.vars.value.nbStudentA + form.vars.value.nbStudentB %} 
    {{ sum }} 
    </div> 
</div> 

サーバー側のスクリプトは動作しません

Answer 1

リアルタイムでは、ページを更新する前に、これを達成するためにjQueryのようなものが必要になります。簡単にjQueryを使って計算できます。また、JSベースのスクリプトで数学を簡単に行うことができるように追加できるjavascript数学のプラグインもあります。

$(document).ready(function() { 
 
    $(".calculate").click(function() {    
 
     var x = $('input[id="nbStudentClassA"]').val(); 
 
     var y = $('input[id="nbStudentClassB"]').val(); 
 
     var mult = x + y; 
 
     var add = (+x) + (+y); 
 
     var sub = (+x) - (+y); 
 
     var div = x/y; 
 
     $('.result').html("Multiply: " + mult + "<br /> Addition: " + add + "<br />Subtration: " + sub + "<br />Division : " + div);  
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label>Enter two numbers to calculate as an example: Addition, subtraction, multipication and division</label> 
 
    <div> 
 
     <label for="nbStudentClassA" >Number of student A</label> 
 
     <input id="nbStudentClassA" type="text" name="nbStudentClassA" /> 
 
    </div> 
 
    <div> 
 
     <label for="nbStudentClassB" >Number of student B</label> 
 
     <input id="nbStudentClassB" type="text" name="nbStudentClassB" /> 
 
    </div> 
 
    <div class="result"></div> 
 
    <button type="button" class="calculate">Calculate</button>