入力フィールドに基づいてWebページコンテンツを動的に変更する方法

Question

ビルドしているWebページがあり、入力値が変更されたときにページのテキストを更新したい。基本的には、ここに私のアルゴリズムがありますが、それは私が正確にはあまり確かではないと思います。 （私はPHPを使用していることを明確にするために）しかし、私はHTMLやCSS以外の他の言語やJavascriptをあまり知らない。

Open Amount: $<input type="text" name="openamount"><br /> 
Close Amount: $<input type="text" name="closeamount"><br /> 
<script type="text/javascript"> 
    document.write("Profit $" + document.getElementsByName("openamount").value - document.getElementsByName("closeamount").value); 
</script> 

問題のカップルは、最初のページには、私はむしろそれはちょうど私が入力フィールドにコンテンツを置くように、第2のそれは更新されない、などのブランクから始めるだろうというとき、それは私にいくつかの未定義のものを与えてロードしたとき。しかし、私は実際にPOSTフォームの値の1つとして送られた利益を必要としています。事前に助けてくれてありがとう。

Answer 1

私はあなたのdocument.writeを関数に囲んで、その関数を呼び出すために入力にonChangeを追加します。

Answer 2

javascript以外に、必要な場合があります。フォーム要素も同様です。

<php 
if(isset($_POST['openamount']) && isset($_POST['closeamount'])) 
{ 
    print "PHP got values " . $_POST['openamount'] . " and " . $_POST['closeamount']; 
} 
?> 



<form method="POST" action=""> 
    Open Amount: $<input type="text" name="openamount"><br /> 
    Close Amount: $<input type="text" name="closeamount"><br /> 
    <input type="submit" value="submit money"> 
</form> 

Answer 3

あなたのJavaScriptは、ページが読み込まれたらすぐに実行されています。この代わりに、コードが変更されるたびにコードを実行するために、要素の変更イベントにフックする必要があります。 POST変数に利益を追加する場合は、利益値を保持するフォーム内に隠れた入力を作成するだけです。ここで

はすべて、この実証jsfiddleです： https://jsfiddle.net/yjvvjq49/

HTML：

<form method="POST"> 
    Open Amount: $<input type="text" id="openamount" name="openamount"><br /> 
    Close Amount: $<input type="text" id="closeamount" name="closeamount"><br /> 

    <input type="hidden" id="profit" name="profit"/> 
    Profit: $<span id="profitText"></span> 
</form> 

Javascriptを：

var openElement = document.getElementById("openamount"); 
var closeElement = document.getElementById("closeamount"); 
var profitElement = document.getElementById("profit"); 
var profitTextElement = document.getElementById("profitText"); 

function updateProfit() { 
    var profit = (Number(closeElement.value) - Number(openElement.value)).toFixed(2); 
    profitElement.value = profit; 
    profitTextElement.innerText = profit; 
} 

openElement.onchange = closeElement.onchange = updateProfit;