Question 45199 in Html Question posted in
Some basic documentation can be found here.

Display result in a read-only <input> – Html

I would like to display the result from the name field in a read-only text field called output. I have it working via .innerHTML, but I’m not sure how to get the result into a text box.

function myFunction() {
  var x = document.getElementById("myText").value;
  document.getElementById("demo").innerHTML = x;
}
<!DOCTYPE html>
<html>

<body style="text-align:center;">
  <h1 style="color:green;">

  </h1>
  <h2>Text value property</h2>
  <p>
    Change the text of the text field, and then click the button below.
  </p>

  Name:<input type="text" id="myText" value="Mickey">
  <button type="button" onclick="myFunction()">Try it</button>
  <p id="demo"></p>

  Output:<input type="text" id="myText" readonly>
</body>

</html>

I would like to get the result inside a read-only text field.

Tags:

3

Answers


  1. 0

    Try the readonly property on the input element that’s going to hold the output :

      <body>
    <h2>Text value property</h2>
    <p>Change the text of the text field, and then click the button below.</p>

    Name:<input type="text" id="myText" value="Mickey" />
    <button type="button" onclick="myFunction()">Try it</button>
    <input type="text" readonly id="output" style="display: none;">
    <script>
      function myFunction() {
        var x = document.getElementById('myText').value;
        var output = document.getElementById('output');
        output.style.display = 'block';
        output.value = x;
      }
    </script>
  </body>
    Login or Signup to reply.
  2. 0

    I was able to get it to work using this code.

    <script>
function myFunction() {
var x = document.getElementById("myText").value;
document.getElementById("demo").innerHTML =  x;
}
</script>

<h2>Text value property</h2>
<p>
 Change the text of the text field, 
 and then click the button below. 
</p>

Name:<input type="text" id="myText" value="Mickey">
<button onClick="myFunction()">Try it</button><br>
<span id="demo"></span>
    Login or Signup to reply.
  3. 0

    All you need to do is set the .value property of the output text input. The .value property can be written to via JavaScript even if it is read only to the user. Also, make sure that your input and output fields don’t share the same ID:

    const myText = document.getElementById("myText");
const output = document.getElementById("output");

document.getElementById('tryit').addEventListener('click', () => {
  output.value = myText.value;
});
    <!DOCTYPE html>
<html>

<body style="text-align:center;">
  <h2>Text value property</h2>
  <p>
    Change the text of the text field, and then click the button below.
  </p>

  Name:<input type="text" id="myText" value="Mickey">
  <button type="button" id="tryit">Try it</button>
  <p id="demo"></p>

  Output:<input type="text" id="output" readonly>
</body>

</html>

    It’s also a good practice to use .addEventListener() instead of onclick handlers. It is the newer way of doing event handlers.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search