django / javascript / jquery / html / css: summing the contents of a form for display -

django / javascript / jquery / html / css: summing the contents of a form for display -

i'm going build django form web page allow user input 2 numbers:

<form action="blah" method="post"> {% csrf_token %} number1: <input type="number" name="number1" value="{{ number1 }}" /> number2: <input type="number" name="number2" value="{{ number2 }}" /> <input type="submit" value="submit" />

elsewhere on page, i'd display product of these 2 numbers user enters them. what's efficient way that?

edit(2): able working slight modification of code provided:

{% if [test] %} <div style="padding-top: 10%; padding-left: 12%"> <div class="row-fluid" > <div class="span10 hero-unit" > ... </div> </div> </div> {% else %} <div style="padding-top: 10%; padding-left: 20%;"> <div class="row-fluid" style="vertical-align: middle"> <div class="span8 hero-unit"> ... <form action="/" method="post"> {% csrf_token %} {% if next %} <input type="hidden" name="next" value="{{ next }}" /> {% endif %} <div class="question"><<question1>> <input type="number" class="pull-right" name = "question1" value="{{ question1 }}" /> </div> <br> <div class="question"><<question2>> <input type="number" class="pull-right" name="question2" value="{{ question2 }}" /> </div> <br> <div style="padding-right: 10%"> <input type="submit" class="btn btn-primary button-text pull-right" value="submit" /> </div> <div id="product_output_container" style="padding-left: 10%;font-weight: bold" ></div> <br> </form> </div> </div> </div> {% endif %} <!-- jquery --> <script type="text/javascript"> $(document).ready( function(){ var refreshproduct = function(){ var question1 = parseint($('[name="question1"]').val(),10); var question2 = parseint($('[name="question2"]').val(),10); var product = question1 * question2; var product_container = $('#product_output_container'); if (!isnan(product)){ product_container.text(product) } else{ product_container.text("") } } $('[name="question1"]').keyup(refreshproduct); $('[name="question2"]').keyup(refreshproduct); } ); </script> {% endblock %}

attach jquery keyup event each of inputs. have event multiply 2 inputs , set total in output element.

$('form input.pull-right').keyup(function() { var $inputs = $('form input.pull-right'); var product = 1; (var = $inputs.length; > 0; i--) { product *= parseint($inputs[i].val()); } $('form input.output').val(total); }

here's docs on jquery's keyup, selectors , val.

incidentally code work if add together more inputs (of class pull-right). code loops through them all..

javascript jquery html css django