javascript - php変数に基づいてJavascriptでループを作成する

Question

合計を計算する次のスクリプトがあるとしましょう。

コードは次のとおりです。

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script language="javascript" type="text/javascript">

    function updatesum() {

    line1 = ((document.form.price_1.value -0) * (document.form.number_1.value -0));

    line2 = ((document.form.price_2.value -0) * (document.form.number_2.value -0));

    line3 = ((document.form.price_3.value -0) * (document.form.number_3.value -0));

    line4 = ((document.form.price_4.value -0) * (document.form.number_4.value -0));

    line5 = ((document.form.price_5.value -0) * (document.form.number_5.value -0));

    document.form.sum.value = line1 + line2 + line3 + line4 + line5;

    }
    </script>

    </head>        
    <body>

    <?php

$tR = 1;
$maxlines = 5;

echo '<form name="form" method="post" action="action.php">';
echo '<table><tbody>';

while($tR <= $maxlines)
{
echo '<tr>';
echo '<td width="1"><input name="price_' . $tR . '" onChange="updatesum();"         type="text"></td>';
echo '<td width="1"> x </td>';
echo '<td width="1"><input name="number_' . $tR . '" onChange="updatesum();"         type="text" value="1"></td>';
echo '</tr>';
++$tR;
}
echo '</tbody></table>';

echo 'Total: <input name="sum" value="0" type="text" readonly="readonly">';
echo '<button type="submit" name="Submit" style="display: hidden;">Submit</button>';
echo '</form>';

    ?>

    </body>
    </html>

そしてそれは問題ありません...しかし今私は変数$maxlinesを5から500に変更します...次のようなものを書かなくてもJavascriptを調整するにはどうすればよいですか？

function updatesum() {

line1 = ((document.form.price_1.value -0) * (document.form.number_1.value -0));

line2 = ((document.form.price_2.value -0) * (document.form.number_2.value -0));

line3 = ((document.form.price_3.value -0) * (document.form.number_3.value -0));

line4 = ((document.form.price_4.value -0) * (document.form.number_4.value -0));

line5 = ((document.form.price_5.value -0) * (document.form.number_5.value -0));

line6 = ((document.form.price_6.value -0) * (document.form.number_6.value -0));

  .......................

line500 = ((document.form.price_500.value -0) * (document.form.number_500.value -0));

document.form.sum.value = line1 + line2 + line3 + line4 + line5 + line6 ........... + line500;

}

score 1 · Accepted Answer

このようにphp変数をjavascriptに簡単に転送できます

<script>
var maxlines = <?php echo $maxLines?>;
</script>

これで、php変数と等しいjavascript変数maxlinesができました。また、文字列を転送して引用符で囲むかどうかを覚えておいてください。

<script>
var myString = '<?php echo $myString?>';
</script>

score 1 · Accepted Answer

ループを使用して、すべてのフィールドを調べることができます。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script language="javascript" type="text/javascript">

        function updatesum() {
            var prices = document.getElementsByName('price');
            var numbers = document.getElementsByName('number');
            var sum = 0;

            for (var i = 0; i < prices.length; i++) {
                sum += prices[i].value * numbers[i].value;
            }
            document.form.sum.value = sum;
        }
        </script>
    </head>        
    <body>
        <?php
            $tR = 1;
            $maxlines = 50;

            echo '<form name="form" method="post" action="action.php">';
            echo '<table><tbody>';

            while($tR <= $maxlines)
            {
                echo '<tr>';
                echo '<td width="1"><input name="price" onChange="updatesum();"         type="text"></td>';
                echo '<td width="1"> x </td>';
                echo '<td width="1"><input name="number" onChange="updatesum();"         type="text" value="1"></td>';
                echo '</tr>';
                ++$tR;
            }
            echo '</tbody></table>';

            echo 'Total: <input name="sum" value="0" type="text" readonly="readonly">';
            echo '<button type="submit" name="Submit" style="display: hidden;">Submit</button>';
            echo '</form>';
        ?>
    </body>
</html>

score 1 · Accepted Answer

短いバージョンは、スクリプトを更新し、これらすべてを実行するループをそこに持つことです。

しかし（そして巨大ですがそれは）

ソリューション自体以外に、スクリプトで改善できることがいくつかあります。問題に対して別のアプローチを試すことができます。

関数を各入力変更要素に個別にバインドする必要はありませんonchange。HTMLで属性を使用するのは少し時代遅れの方法です。
各行を定義する必要はありません。それらの数を知らなくても、JavaScriptを使用してそれらすべてを合計することができます。
事前にサイズを知らなくても、 inputelements属性の名前をPHPで使用できる名前に変更します。nameたとえば、属性の名前をとに変更するname="price[]"とname="number[]"、値は魔法のようにPHPスクリプトに$_POST["price"]ととして送信されます$_POST["number"]。そこから、ダイナミックに遊ぶことができます。

そして今、いくつかの実際のコードに：

私が説明したようにHTMLを構築することにより、次のアイデアに従うことになります。

<form name="form">
<input type="text" name="price[]" value="1" /><input type="text" name="number[]" value="10" /><br />
<input type="text" name="price[]" value="2" /><input type="text" name="number[]" value="20" /><br />
<input type="text" name="price[]" value="3" /><input type="text" name="number[]" value="30" /><br />
<input type="text" name="price[]" value="4" /><input type="text" name="number[]" value="40" /><br />
<br /><input type="text" name="sum" value="0" id="sum" />
</form>

そして、私が提案したイベントバインディング手法に従って、JavaScriptは次のように簡略化されます。

function updateSum() {
    var prices = document.getElementsByName("price[]");
    var numbers = document.getElementsByName("number[]");
    var sum = 0;
    for (var i=0; i < prices.length; i++) {
         sum += prices[i].value * numbers[i].value;
    }

    document.getElementById("sum").value = sum;
} 

var prices = document.getElementsByName("price[]");
var numbers = document.getElementsByName("number[]");
for (var i=0; i < prices.length; i++) {
    prices[i].addEventListener('change', updateSum, false);
    numbers[i].addEventListener('change', updateSum, false);
}

このコードの動作を示すjsFiddle（http://jsfiddle.net/nXqgW/2/ ）を作成しました。

score 0 · Accepted Answer

次のようなコードを使用できます。

<script>
function updatesum() {
    <?php $lines = array() ?>
    <?php for($i = 0; $i < $count; $i++) : ?>
        line<?= $i ?> = ((document.form.price_<?= $i ?>.value -0) * (document.form.number_<?= $i ?>.value -0));
        <?php $lines[] = 'line' . $i;
    <?php endfor; ?>
    document.form.sum.value = <?= implode(' + ', $lines);
}
</script>

score 0 · Accepted Answer

PHPでjavascript行を出力する必要があるため、maxlines変数があるPHPでは、次のようなループを実行できます。

<script>
    ...
    <?php for($i = 0; $i < $maxlines; $i++) {
        //Output javascript line
        ?>

        line<?php echo $i; ?> = ((document.form.price_<?php echo $i; ?>.value -0) * (document.form.number_<?php echo $i; ?>.value -0));
    <?php
    } ?>

    document.form.sum.value = 0 <?php for($int i = 0; $i < $maxlines; $i++) {
        echo '+ line' . $i;
    } ?>
</script>

このコードはテストしていませんが、動作するはずです。

javascript - php変数に基づいてJavascriptでループを作成する

5 に答える 5

Related

Reference