CODEWITHSUNDEEP
javascriptasp.net
Erbez
Erbez

Reputation: 321

Change label from input javascript

I want to change the label text once the user has changed the input field text.

This is what I have so far:

script function:

 function ModuleName() {
        var text = document.getElementById('txtModCode').innerHTML;
        document.getElementById('lblModCode').innerHTML = text;

    }

fields and label

<input type="text" name="txtModCode" id="txtModCode" class="form-control" placeholder="Enter Module Code Here" onchange="ModuleName()" />
<label id="lblModCode"></label>

Thank you in advance

Upvotes: 0

Views: 1780

Answers (2)

Asons
Asons

Reputation: 87191

You should use .value in document.getElementById('txtModCode').value;, not .innerHTML

function ModuleName() {
  var text = document.getElementById('txtModCode').value;
  document.getElementById('lblModCode').innerHTML = text;
}
<input type="text" name="txtModCode" id="txtModCode" class="form-control" placeholder="Enter Module Code Here" onchange="ModuleName()" />
<label id="lblModCode"></label>

And by utilizing this in onchange="ModuleName(this)" you can pass a direct reference to the input and avoid the extra getElementById

function ModuleName(el) {
  document.getElementById('lblModCode').innerHTML = el.value;
}
<input type="text" name="txtModCode" id="txtModCode" class="form-control" placeholder="Enter Module Code Here" onchange="ModuleName(this)" />
<label id="lblModCode"></label>

Upvotes: 5

Tyler Hudson
Tyler Hudson

Reputation: 30

To have a textbox that triggers a function when the contained text is changed use this:

 <body>
      <span id="thing2">you have not changed the textbox</span>
      <input type="text" id="thing" onchange="myFunction()">
 </body>
 <script>
      function myFunction(){
           document.getElementById("thing2").innerText = "you have changed the textbox"
      }
 </script>

This changes the contents of the element

Upvotes: 0

Related Questions