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

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

来源

2016-11-04 Kyal Lanum

所以我得到的网页被undefinedundefinedundefined（那字面上它说什么）。在我的Web服务器错误日志中，它根本没有发布错误。 –

哎唷！ 'document.write（）'是古老的！为什么不只是将一个事件处理程序附加到输入字段中，以使AJAX调用将更新的内容注入到文档中？ –

因为我从来没有使用AJAX，我不知道那是什么？我会对AJAX做更多的研究。谢谢你。 –

-1

我会把你的document.write放在一个函数中，然后在你的输入中添加一个onChange来调用这个函数。

来源

2016-11-04 21:24:50 msimmons

哦，好吧，这更有意义。最重要的是。将提交的利润实际作为提交条目发送的最佳方式是什么？ –

就在我头顶，我会为了获利而做一个元素，并做一个form.submit（我不确定提交的语法，但它很容易找到）。 – msimmons

-1

除了你的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>

来源

2016-11-04 21:30:50

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

来源

2016-11-04 21:37:51 Mogzol

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

回答

相关问题