How to change the <input> type?
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.
Please Login to comment...