Is it possible to change the input type of an input element inside a <td> using <td> 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?

shadow2020
– shadow2020

2019-05-13 15:31:25 +00:00
Commented May 13, 2019 at 15:31 — shadow2020
– shadow2020, Commented May 13, 2019 at 15:31

Reinstate Monica Cellio · Accepted Answer · 2019-05-13 15:37:11Z

2

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"/>

edited May 13, 2019 at 15:37

answered May 13, 2019 at 15:30

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

justin Over a year ago

Oh nice one, i never knew you could do away with the onclick function by doing it all in javascript one upvote

dwpu · Accepted Answer · 2019-05-13 15:29:45Z

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, 2019 at 15:29

dwpu

2683 silver badges23 bronze badges

2 Comments

justin Over a year ago

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?

dwpu Over a year ago

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 <td> 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.

Enol García González · Accepted Answer · 2019-05-13 15:40:17Z

0

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">");
 }

answered May 13, 2019 at 15:40

Enol García González

749 bronze badges

Comments

tevemadar · Accepted Answer · 2019-05-15 07:55:49Z

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, 2019 at 7:55

answered May 13, 2019 at 15:57

tevemadar

13.3k3 gold badges27 silver badges63 bronze badges

2 Comments

justin Over a year ago

just a clarification though, is the hashtag meant for selecting id name? might as well give this a try, thank you very much

tevemadar Over a year ago

@justin yes, it is the selector for id. Similarly to linking (like something.domain/stuff/index.html#pass), or formatting in CSS (like #pass{color:red;})

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

2 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related