Solved

change a textfield into a password field by a button press

Posted on 2003-11-26
10
443 Views
Last Modified: 2012-08-14
hello is it possibe to change a input text field into a input password field with a button click?

Thanks,
Ferry
0
Comment
Question by:ferryl
  • 5
  • 2
  • 2
  • +1
10 Comments
 
LVL 10

Expert Comment

by:Nushi
ID: 9824140
change the type to:

type='password'

Nushi.
0
 
LVL 1

Author Comment

by:ferryl
ID: 9824159
I have try this: document.form.field.type='password'
but it don't work i get this error: Could not get the type property. This command is not supported.

Is there a other solution?
0
 
LVL 10

Expert Comment

by:Nushi
ID: 9824179
<script>
function changeType( objId ){
      var src =  document.getElementById( objId );
      var type = 'password' ;
      
      //create the new object as a password field
      var input ='';
      input += '<input type=' + type + ' ';
      input += ' name=' + src.name + ' ';
      input += ' id=' + src.id + ' ';
      input += ' value=' + src.value + ' ';
      input += '><br>';
      
      document.getElementById('myField').innerHTML = input;
      }
</script>

<span id='myField'>
<input type='text' id='textField' value='password'><br>
</span>
<input type="button" onclick="changeType( 'textField' )">


Nushi
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 25

Accepted Solution

by:
devic earned 20 total points
ID: 9824203
try this:
==================================
<form name=myform>
<input name=textfield type=text value=devic>
</form>
<script>
function runit()
{
      document.myform.textfield.outerHTML="<input type=password name=textfieldsasa value="+document.myform.textfield.value+">"
}
</script>
<button onclick=runit()>runit()</button>
0
 
LVL 10

Expert Comment

by:Nushi
ID: 9824207
devic

its the same code i wrote for him.

Nushi.
0
 
LVL 10

Expert Comment

by:Nushi
ID: 9824209
the concept is to create new element.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 9824220
Except Nushis code would work in Mozilla too which does not have support for outerHTML...
However would the form submit the content???
0
 
LVL 10

Expert Comment

by:Nushi
ID: 9824248
mplungjan
my guru see all as always

 :-))
0
 
LVL 1

Author Comment

by:ferryl
ID: 9824255
thank, but is it not possbile without the innerHTML?
0
 
LVL 25

Expert Comment

by:devic
ID: 9824607
@ Nushi,

you think that my code is same with your? ;)

@mplungjan, including mozilla, opera
ok here is another version:
=======================
<form name=myform>
<input name=textfield type=text value=devic>
<input name=other type=text value=devic>
</form>
<script>
function runit()
{
    formHTML =document.myform.innerHTML.split("<");
      for(var i=0;i<formHTML.length;i++)
      {
            if(formHTML[i].match(/textfield/))
            {
                  formHTML[i]="input name=textfield type=password value=devic>";
            }
      }
      document.myform.innerHTML=formHTML.join("<")
}
</script>
<button onclick=runit()>runit()</button>
======================================
@ferryl,
yes it possbile:
write manual new form ;)


0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question