change item type in java script

**sanoop** · 01-30-2007, 03:29 AM

Dear friends,

Is it possible to change item type in java script. for example change type text to password.

Thanks
Sanoop

**thetestingsite** · 01-30-2007, 03:42 AM

Try the following, just edit out what you need to.

Code:

<html>
<head>
<script type="text/javascript">

function changeField() {
var field = document.testForm.textField;

  if (field.type == "text") {
     test = false;
     field.type = "password";
  }

  else {
     field.type = "text"; 
  }

}
</script>
</head>
<body>
<form name="testForm">

<input type="" name="textField">
</form>

<a href="#" onclick="changeField(); return false">Change Field	</a>
</body>
</html>

Hope this helps.

Added Later: There's probably a much better way of doing this, but I'm not sure. The above script has been tested in FF and it works.

**sanoop** · 01-30-2007, 04:00 AM

Thank for your repaly.

there is an error while running this code "could not get the type property" at line no 10(field.type = "password").

document.testForm.textField.type = "text" also tried

**tech_support** · 01-30-2007, 04:20 AM

Slight Modifications:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Change Field</title>
<script type="text/javascript">

function changeField() {
var field = document.forms['testForm'].elements['textField'];

  if (field.getAttribute("type") == "text") {
     field.setAttribute("type","password");
  }

  else {
     field.setAttribute("type","text"); 
  }

}
</script>
</head>

<body>
<form name="testForm">

<input type="text" name="textField">
</form>

<a href="javascript:changeField()">Change Field	</a>
</body>
</html>

Should work. Untested.

**sanoop** · 01-30-2007, 05:01 AM

this code also not working in IE. field.setAttribute function is not supporting in IE

**tech_support** · 02-03-2007, 06:24 AM

Well, time to use another method:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Change Field</title>
<script type="text/javascript">
var switcher = 0;
function changeField() {
var textfield = document.forms['testForm'].elements['textField'];
var passfield = document.forms['testForm'].elements['passField'];

  if (switcher == 0) {
     textfield.style.display = "none"
	 passfield.value = textfield.value
	 passfield.style.display = "block"
	 switcher++
  }

  else {
     textfield.style.display = "block"
	 textfield.value = passfield.value
	 passfield.style.display = "none"
	 switcher--
  }

}
</script>
</head>

<body>
<form name="testForm">

<input type="text" name="textField">
<input type="password" name="passField" style="display:none">
</form>

<a href="javascript:changeField()">Change Field	</a>
</body>
</html>

**jscheuer1** · 02-03-2007, 08:52 AM

See also:

http://www.dynamicdrive.com/forums/s...56&postcount=5

from:

http://www.dynamicdrive.com/forums/s...ad.php?t=17058

**tech_support** · 02-04-2007, 04:19 AM

Oh, so this is basically a cross-post.

Thread: change item type in java script

Thread Tools

Search Thread

change item type in java script

Bookmarks

Bookmarks

Posting Permissions