Skip to content
Related Articles

Related Articles

How to change the <input> type?

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Hard
  • Last Updated : 18 Apr, 2021

The purpose of this article is to change the HTML <input> type. Javascript provides document.getElementById().type option to change the type of input field.

Syntax:

  • The selected input type will change to text.
    document.getElementById("id_of_tag_to_be_changed").type="text"; 
  • The selected input type will change to a button.
    document.getElementById("id_of_tag_to_be_changed").type="button";
  • The selected input type will change to a date.
    document.getElementById("id_of_tag_to_be_changed").type="date"; 

Example:

HTML




<!DOCTYPE html>
<html>
  <body>
    <p>
      Please click on Button2 to see the type 
      of Button1 change from button to text
    </p>
  
    <input
      id="inputfield1"
      type="button"
      value="Input1"
      onclick="alert('I am Input1 click on Input2 to see me change my type')"/>
    <input
      id="inputfield2"
      type="button"
      value="Input2"
      onclick="typeChanger()"/>
  </body>
  <script>
    function typeChanger() {
      alert("The type of Input1 will now change from button to text");
      document.getElementById("inputfield1").type = "text";
    }
  </script>
</html>


Output:

Input to text

Note: Some Old Browsers do not allow a dynamic change in the type of input fields.

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!