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

【问题标题】：How to dynamically change webpage content based on input fields如何根据输入字段动态更改网页内容
【发布时间】：2016-11-04 21:17:29
【问题描述】：

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

【问题讨论】：

所以我在网页上得到的只是 undefinedundefinedundefined （字面意思就是这样）。在我的网络服务器错误日志中，它根本没有发布错误。
哎哟！ document.write() 很古老！为什么不直接将事件处理程序附加到您的输入字段，以进行 AJAX 调用以将更新的内容注入回文档中？
因为我从来没有用过 AJAX 也不知道那是什么？我将对 AJAX 做更多的研究。不过谢谢。
看这里：developer.mozilla.org/en-US/docs/AJAX/Getting_Started

标签： javascript php html css dynamic-html

【解决方案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;

【讨论】：

【解决方案2】：

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

【讨论】：

哦，好吧，这更有意义。最重要的是。什么是使所得利润实际作为提交中的条目发送的最佳方式。
就在我的脑海中，我会为了盈利而制作一个元素并执行 form.submit（我不确定提交的语法，但很容易找到）。

【解决方案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>

【讨论】：