django/javascript/jquery/html/css:汇总要显示的表单内容

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

本文关键字：显示 表单 jquery javascript html css django      更新时间：2023-09-26

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

将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、选择器和val.的文档

顺便说一句，如果您添加更多的输入（类的向右拉），此代码将起作用。代码在它们之间循环。。

如果它只是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>
相关文章：