Question

我有一个我正在构建的网页，我希望它更新页面上的一些文本，因为一些输入值已更改。基本上，这是我的算法，我认为它应该遵循，但我不太确定。（澄清我也使用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表单中的一个值。感谢您提前提供任何帮助。

Answer 1

您的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;

Answer 2

我会将你的document.write包含在一个函数中，然后在你的输入中添加一个onChange来调用所述函数。

Answer 3

除了你的javascript，这里是你可能需要的php。以及表单元素。

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

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

3 个答案: