1

我将为一个网页构建一个 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" />

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

编辑（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 %}
4

2 回答 2

0

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

$('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 的keyup、selectors和val的文档。

顺便说一句，如果您添加更多输入（类 pull-right），则此代码将起作用。代码循环通过它们所有..

于 2013-02-15T08:41:02.073 回答
0

如果它只是 2 个数字的乘积，你可以做

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);

如果它变得更复杂，你应该考虑使用像 knockout.js 这样的模板库

这是一个工作示例：

            <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>
于 2013-02-15T08:43:51.650 回答