입력란을 기반으로 웹 페이지 콘텐츠를 동적으로 변경하는 방법

Question

건물 웹 페이지가 있고 몇 개의 입력 값이 변경되면 페이지의 일부 텍스트가 업데이트되기를 원합니다. 근본적으로, 여기에 따라야한다고 생각하는 알고리즘이 있습니다. 그러나 나는 정확하게 확신 할 수 없습니다. (명확히하기 위해 PHP도 사용하고 있습니다.)하지만 HTML과 CSS 외에도 다른 언어에 대한 더 자세한 지식은 없으며 자바 스크립트도 아주 적습니다.

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

함수에 document.write를 묶은 다음 입력에 onChange를 추가하여 함수를 호출하십시오.

Answer 2

자바 스크립트 이외에도 필요한 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> 

Answer 3

페이지가로드 될 때 자바 스크립트가 실행 중이고 다시는 실행되지 않습니다. 대신이 요소의 변경 이벤트에 연결하여 코드가 변경 될 때마다 코드를 실행하려고합니다. 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> 

자바 스크립트 :

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;