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:
Note: Some Old Browsers do not allow a dynamic change in the type of input fields.