如何根据输入字段动态更改网页内容


How to dynamically change webpage content based on input fields

我有一个网页,我正在建设,我希望它更新一些页面上的文本作为一对输入值改变。基本上,这是我的算法,我认为它应该遵循,但我不太确定。(澄清我正在使用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>

几个问题,首先,当页面加载时,它给了我一些未定义的东西,当我宁愿它只是开始为空白时,其次,当我将内容放入输入字段时,它不会更新。最重要的是,我需要利润作为POST表单中的值之一实际发送。谢谢你的帮助。

当页面加载时,您的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;

附上您的文件。编写一个函数,然后在输入中添加一个onChange来调用该函数。

除了你的javascript,这里是你可能需要的php。还有form元素

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