计算两个变量的总和

时间:2017-07-14 11:33:50

标签: twig

我想实时计算树枝上两个变量的总和? 这是可以用树枝或我应该尝试使用Javascript吗?

我已尝试使用下面的代码使用twig,但它在卷轴时间不起作用我应该完成表单然后返回页面(我的表格在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>

1 个答案:

答案 0 :(得分:0)

服务器端脚本不能实时工作,在刷新页面之前需要像jQuery这样的东西来实现这一点。您可以轻松地使用jQuery进行计算。还有一些javascript数学插件可以添加,使基于JS的脚本更容易进行数学运算。

&#13;
&#13;
$(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);    
    });
});
&#13;
<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>
&#13;
&#13;
&#13;