display the value of input id in another div

Question

I want to display the value of input id = "flotsam" in div id = "aux_fees". How can that be done?

I meant displaying the "title" of the expenditure. The website is https://verlager.com and the table has a column header with a default of "aux" I want that "aux" (an input field) to be typed over and then the TOTAL "AUX" at the top of the page displays the column title.

Maybe there is a better way. I should edit the AUX input directly and have the fixed string "aux" just remain as it is. I'll try that!

<div id="aux_fees"> AUX $ <input type="text" id="totalAux" disabled /></div>


<div class="AUX "><input onblur="displayResult()" placeholder = "aux" id = "flotsam" /></div>

<script>
function displayResult() {
    document.getElementById("aux_fees").innerHTML = "Have a nice day!";
}
</script>

Possible duplicate of [How do I get the value of text input field using JavaScript?](https://stackoverflow.com/questions/11563638/how-do-i-get-the-value-of-text-input-field-using-javascript) — user247702, Aug 24 '18 at 09:31
in your `onblur()` pass the control as `displayResult(this)` then change the function definition to read the passed variable and set the value as `function displayResult(control){ document.getElementById("aux_fees").innerHTML = control.value;}`. — vikscool, Aug 24 '18 at 09:32
Displaying value in element with id `aux_fees` does not makes sense for me. Did you meant displaying value in disabled input with id `totalAux`? — Nikhil Aggarwal, Aug 24 '18 at 09:35
No. I meant displaying the "title" of the expenditure. The website is https://verlager.com/ and the table has a column header with a default of "aux" I want that "aux" (an input field) to be typed over and then the TOTAL "AUX" at the top of the page displays the column title. — verlager, Aug 24 '18 at 09:45
So basically you need to show the sum in the disabled input box, right? — Nikhil Aggarwal, Aug 24 '18 at 09:49
No, I already have the javacript computations for that. I just need to write the column input header ("aux") string in the table to the TOTAL AUX string. — verlager, Aug 24 '18 at 09:53

score 1 · Accepted Answer · answered Aug 24 '18 at 09:31

Here's a working example - onblur only triggers when you move away from the textbox like tabbing for instance so you will need to type something and then press tab to get it to work.

function displayResult() {
    document.getElementById("aux_fees").innerHTML =document.getElementById("flotsam").value;
}

<div id="aux_fees"> AUX $ <input type="text" id="totalAux" disabled /></div>


<div class="AUX "><input onblur="displayResult()" placeholder="aux" id="flotsam" /></div>

display the value of input id in another div

1 Answers1