django/javascript/jquery/html/css：对表单内容求和以供显示

我将为网页构建一个django表单，允许用户输入两个数字：

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

{%csrf_令牌%}
第一：
第二：

在页面的其他地方，我想在用户输入这两个数字时显示它们的乘积。最有效的方法是什么

---

编辑（2）：我能够通过对提供的代码稍加修改使一切正常工作：

{% 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 %}

{%if[test]}
...
{%else%}
...
{%csrf_令牌%}
{%if next%}
{%endif%}






{%endif%}
$（文件）。准备好了吗(
函数（）{
var refreshProduct=函数（）{
var question1=parseInt（$（'[name=“question1”]'）.val（），10）；
var question2=parseInt（$（'[name=“question2”]'）.val（），10）；
var乘积=问题1*问题2；
var product_container=$（“#product_output_container”）；
如果（！isNaN（产品））{
产品容器文本（产品）
}
否则{
产品容器。文本（“”）
}
}
$（'[name=“question1”]'）。键控（刷新产品）；
$（'[name=“question2”]'）。键控（刷新产品）；
}
);
{%endblock%}

将jquery键控事件附加到每个输入。让事件将两个输入相乘，并将总数放入输出元素中

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

这是jquery上的文档，还有

---

顺便说一句，如果您添加更多输入（类pull right），那么这段代码将起作用。如果它只是两个数字的乘积，那么代码会在它们之间循环。

var refreshProduct = function(){
$('#product_output_container').val(parseInt($('[name="number1"]').val(),10)*parseInt($('[name="number2"]').val(),10));
}
$('[name="number1"]').keyup(refreshProduct);
$('[name="number2"]').keyup(refreshProduct);

<>如果它变得越来越复杂，你应该考虑使用模板化的类库敲除。JS/P> 以下是一个工作示例：

            <form>

                <input type="number" name="question1" />

                <input type="number" name="question2" />


                <input type="number" class="output"/>
            </form>




<script>

    $(document).ready(function(){
        refreshProduct = function(){
            $('.output').val(parseInt($('[name="question1"]').val(),10)*parseInt($('[name="question2"]').val(),10));
        }

        $('[name="question1"]').keyup(refreshProduct);
        $('[name="question2"]').keyup(refreshProduct);
    });
</script>

$（文档）.ready（函数（）{
refreshProduct=函数（）{
$（'.output'）.val（parseInt（$（'[name=“question1”]'）.val（），10）*parseInt（$（'[name=“question2”]'））.val（），10））；
}
$（'[name=“question1”]'）。键控（刷新产品）；
$（'[name=“question2”]'）。键控（刷新产品）；
});

您是否因为使用post而保存它？或者只是搜索一个产品？$（文档）。ready需要一个函数（回调）作为第一个参数，当然，正如aidan在下面通过添加数字输入指出的那样。输出您确实破坏了他的查询选择器，这就是为什么您应该通过您可以指定的唯一项（例如名称）来查询这些项，类或y您已经添加了一个输出，其中type=number。这打破了我的选择。我会更新我的代码。一定要阅读jquery文档中关于选择器如何工作的部分-