1

ユーザーが 2 つの数字を入力できる Web ページ用の 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 つの数値の積を表示したいと思います。それを行う最も効率的な方法は何ですか？

編集(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

それが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 に答える
0

jquery keyup イベントを各入力に添付します。イベントで 2 つの入力を乗算し、合計を出力要素に入れます。

$('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に関するドキュメントは次のとおりです。

ちなみに、このコードは、(プル ライト クラスの) 入力を追加すると機能します。コードはそれらすべてをループします..

于 2013-02-15T08:41:02.073 に答える