Question

Let’s say, for example, i have that code:

<form id="validate_form2">
    <ul>
        <li>
            <label for="nome">Nome:</label>
            <input id="nome" type="text">
        </li>
        <li>
            <label for="email">Email:</label>
            <input id="email" type="text">
        </li>
        <li>
            <label for="phone">Phone:</label>
            <input id="phone" type="text">
        </li>
    </ul>
</form>

How can i change the TYPE from INPUT with ID=’email’ inside “VALIDATE_FORM2” form?

Answer 1

You can do it like this with jquery – having to convert it back into a dom element

$('#email')[0].type = 'password';​​​​​​
// or using .prop $('#email').prop('type','password');​​​​​​

http://jsfiddle.net/68ZPh/

or just plain js

document.getElementById('email').type = 'password';

http://jsfiddle.net/tHWwZ/

As mentioned in the comments, this may cause issues in IE..

From jQuery .attr() docs

Note: jQuery prohibits changing the type attribute on an or element and will throw an error in all browsers. This is because the type attribute cannot be changed in Internet Explorer.

Another way would be to create a new input to replace it with

$('#email').replaceWith('<input type="password" id="email"/>');

http://jsfiddle.net/uVXvk/