Is it possible to change the input type of an input element inside a using id with the use of javascript?

Question

I have an input element of type password which is inside a <td> with id type="pass". I want to change the type of the input element inside that <td> to type="text" using javascript, how would I go about doing this? I also made a checkbox with onclick() events to toggle showing password.

Sorry I'm just a beginner and just started learning javascript a few days ago.

Below is my sample code:

        <tr>
           <td><input type="text" name="username"></td>
           <td id="pass"><input type="password" name="password"></td>
           <td><input type="checkbox" onclick="showPass()"></td> 
        </tr>

All I know is directly changing the input type using javascript provided that the input element has the id.

Here is my javascript:

        function showPass(){
           var x = document.getElementById("pass");
              if(x.type === "password"){
                  x.type = "text";
              }else{
                  x.type = "password";
              }

Possible duplicate of [change html input type by JS?](https://stackoverflow.com/questions/9093992/change-html-input-type-by-js) — shadow2020, May 13 '19 at 15:31

Reinstate Monica Cellio · Answer 1 · 2019-05-13T15:37:11.807

Put the id on the input instead of the cell that the input is in. Also, you can pass the value of the checkbox into the function that toggles the password input type to avoid the checkbox being out of sync with the input.

function showPass(show) {
  var input = document.getElementById("pass");
  var label = document.getElementById("toggle-label");

  if (show) {
    input.type = "text";
    label.textContent = "Hide password";
  }
  else {
    input.type = "password";
    label.textContent = "Show password";
  }
}

<input id="pass" type="password" name="password" value="your-password" /><br/>
<label id="toggle-label" for="toggle-password">Show password</label>
<input id="toggle-password" type="checkbox" onclick="showPass(this.checked)" />

However, I'd recommend doing away with the inline onclick and do it all with Javascript, like this...

var input = document.getElementById("pass");
var label = document.getElementById("toggle-label");
var checkbox = document.getElementById("toggle-password");

checkbox.addEventListener("change", function() {
  if (checkbox.checked) {
    input.type = "text";
    label.textContent = "Hide password";
  }
  else {
    input.type = "password";
    label.textContent = "Show password";
  }
});

<input id="pass" type="password" name="password" value="your-password" /><br/>
<label id="toggle-label" for="toggle-password">Show password</label>
<input id="toggle-password" type="checkbox"/>

Oh nice one, i never knew you could do away with the onclick function by doing it all in javascript one upvote — justin, May 13 '19 at 15:49

score 0 · Answer 2 · answered May 13 '19 at 15:29

0

Add the pass id to the input element instead of using it with the td.

<tr>
  <td><input type="text" name="username"></td>
  <td><input type="password" name="password" id="pass"></td>
  <td><input type="checkbox" onclick="showPass()"></td> 
</tr>

<script>
   function showPass(){
     var x = document.getElementById("pass");
       if(x.type === "password"){
         x.type = "text";
       }else{
         x.type = "password";
       }
</script>

answered May 13 '19 at 15:29

dwpu

258
3
19

already tried it, it works just fine, just wondering if its possible to change the input type using the td id? also if i wanna try it with a loop, might cause an error cause and id is unique for each element right? – justin May 13 '19 at 15:45
The id must be unique for each element. If you want to use a loop you can use the class of your elements, but this isn't the best approach. To use the id of your `` instead, you can use the `.children()` method of jquery: `$('#pass').children('input[type=password]')` .This will select the child input element inside the td of type password. – dwpu May 13 '19 at 15:50

score 0 · Answer 3 · answered May 13 '19 at 15:40

If nothing works try the simplest. Remove the input and recreate it. Here you have the example using JQuery:

function showPass(){
  var x = document.getElementById("pass");
  vat type;
  if(x.type === "password") {
    type = "text";
  } else {
    type = "password";
  }
  $("#pass").html("<input type='" + type + "' name="password">");
 }

tevemadar · Answer 4 · 2019-05-15T07:55:49.493

0

Yes, it is. As you know the type-switch already, your real question migth be more like "How to get the single child element of an element with an id?". Which also happens to be an input.
There is firstElementChild for example, but you can do magic with querySelector() too, see commented line.

function showPass() {
  var x = document.getElementById("pass").firstElementChild;
  //var x = document.querySelector("#pass input");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}

<table>
<tr>
    <td><input type="text" name="username"></td>
    <td id="pass"><input type="password" name="password"></td>
    <td><input type="checkbox" onclick="showPass()"></td> 
</tr>
</table>

edited May 15 '19 at 07:55

answered May 13 '19 at 15:57

tevemadar

12,389
3
21
49

just a clarification though, is the hashtag meant for selecting id name? might as well give this a try, thank you very much – justin May 17 '19 at 14:02
@justin yes, it is the selector for `id`. Similarly to linking (like http://something.domain/stuff/index.html#pass), or formatting in CSS (like `#pass{color:red;}`) – tevemadar May 17 '19 at 23:04

Is it possible to change the input type of an input element inside a using id with the use of javascript?

4 Answers4