Berechnen Sie die Summe zweier Variablen

Question

Ich möchte die Summe von zwei Variablen auf Zweig in Echtzeit berechnen? ist das mit Zweig machbar oder soll ich es mit Javascript versuchen?

Ich habe mit dem Zweig versucht, den Code unten verwenden, aber es funktioniert nicht in Rollen Zeit sollte ich füllen Sie das Formular dann auf die Seite zurückkehren (meine Form auf 3 Seiten)

<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

Server-Seite Skript wird nicht funktionieren In Echtzeit benötigen Sie etwas wie jQuery, um dies zu erreichen, bevor Sie die Seite aktualisieren. Sie können mit jQuery mit Leichtigkeit berechnen. Es gibt auch Javascript Mathe-Plugins, die Sie hinzufügen können, die machen Mathe einfacher in JS-basierten Skripten machen.

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