如何根據輸入字段動態更改網頁內容

我有一個正在構建的網頁，我希望它在頁面上更新一些文本，以便更改一些輸入值。基本上，這是我認爲應該遵循的算法，但我並不太確定。（爲了說明我使用的是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

如何根據輸入字段動態更改網頁內容

回答

相關問題