Can you change form field type from hidden to text with Javascript?

@-asx-Nov 13.2008

I have a form that is supposed to preload hidden form fields with user info via LDAP. Occasionally the LDAP server is down or there are other problems, and some of these fields are not populated properly.

What I am wondering is whether there is a way to dynamically change the field type from hidden to text when the LDAP query fails to return a valid result.

I’ve tried something like this without success:

Prepopulate the field with ASP and LDAP:

[CODE]<input type=”hidden” name=”name” size=”20″ value=”<%=vName %>”>[/CODE]

Then, if the field is empty, the client side JS would change the field type to “text” so that an empty field is displayed for the user to fill out:

[CODE]<script type=”text/javascript”> <!– if (form.name.value == “”) { form.name.type = “text” } –> </script>[/CODE]

When I run this code, I get the following error in IE:

~~[QUOTE]~~

Could not get the type property. This command is not supported.

[/QUOTE]

Is there any way to make this work?

Thanks for any insight or assistance!

to post a comment

JavaScript

14 Comments(s) _↴

@MrNobodyNov 13.2008 — #Yes. Using JavaScript, you can remove the type=hidden element and insert a type=text element. A better way, though, is for the server-side code which is prepopulating the fields to change the field type before sending the field to the client.

Otherwise, your coding is wrong. The value and type properties, in your case, can be obtained as follows:

document.forms['formName'].elements['name'].value

document.forms['formName'].elements['name'].type

@-asx-authorNov 13.2008 — #First of all — thank you for your help!

Yes. Using JavaScript, you can remove the type=hidden element and insert a type=text element. A better way, though, is for the server-side code which is prepopulating the fields to change the field type before sending the field to the client.[/QUOTE]
Ah, excellent suggestion! Good point.

Otherwise, your coding is wrong. The value and type properties, in your case, can be obtained as follows:

document.forms['formName'].elements['name'].value

document.forms['formName'].elements['name'].type[/QUOTE]
Although I think I will follow your suggestion above, I was curious to see this working with the corrected syntax you've provided. Unfortunatley, I still get the same error.

Here's the relevant code (this time with the UserID property):

[CODE]<input type="hidden" name="userid" size="20" value="<%=vUserID %>">
 
 <script type="text/javascript">
 <!--
 if (document.forms['myForm'].elements['userid'].value == "")
 { 
 document.forms['myForm'].elements['userid'].type = "text"
 }
 -->
 </script>[/CODE]

Still generates the same error: "Could not get the type property. This command is not supported."

Is there a syntax error I'm missing, or is this just not allowed once a form is generated?

@FangNov 13.2008 — #IE won't let you change the [I]type[/I].

You will have to create a new element like this: http://alt-tag.com/blog/archives/2006/02/ie-dom-bugs/

@MrNobodyNov 13.2008 — #Still generates the same error: "Could not get the type property. This command is not supported."

Is there a syntax error I'm missing, or is this just not allowed once a form is generated?[/QUOTE]
The message text is a bit vague, but what I think it is really trying to tell you is that the [B]type[/B] property is read-only and cannot be set (changed) once the element has been rendered.

@-asx-authorNov 13.2008 — #Well, thank you both again for your assistance. Fortunately it looks like there are at least a couple of different ways this can be accomplished. I will use the server side suggestion from MrNobody.

Cheers!

@ShikarnovNov 19.2008 — #Seems I've got a similar problem. I've got some javascript code that works going in one direction (from Password to Text) but not in the other with IE.

Here's the Javascript. The Bold code errs out every time (unless I type "password" instead of "text").

[CODE]
 function TextOver(txtID,defaultText,isPass)
 { 
 var myBox = document.getElementById(txtID);
 if (myBox.value == defaultText)
 {
 myBox.value = "";
 if (isPass == "yes")
 {
 var msie = ((navigator.appVersion.indexOf("MSIE")!= -1)&&!window.opera)? true : false; 
 if (msie)
 {
 var np=myBox.cloneNode(true);
 np.type="password";
 if(np.value!=myBox.value)
 {
 np.value=myBox.value;
 }
 myBox.parentNode.replaceChild(np,myBox);
 np.focus();
 np.select(); 
 }
 if (!(msie))
 {
 myBox.type = "password"
 }
 
   }
   }
  }
 
 function TextOut(txtID,defaultText,isPass)
 {
 var myBox = document.getElementById(txtID);
 //alert(myBox.value);
 if (myBox.value == "")
 {
 myBox.value = defaultText;
 if (isPass == "yes")
 {
 var msie = ((navigator.appVersion.indexOf("MSIE")!= -1)&&!window.opera)? true : false; 
 if (msie)
 {
 var np=myBox.cloneNode(true);
 [B]np.setAttribute("type", "text");[/B]
 np.value = defaultText
 myBox.parentNode.replaceChild(np,myBox);
 
   }
   if (!(msie))
   {
   myBox.type = "text"
   }
   }
   }
  } 
 [/CODE]

And the HTML:

[CODE]
 <td height="60" width="180" valign="middle" align="left">
 <input id="uname" name="uname" onClick="javascript:TextOver('uname','Username:','no');" onBlur="javascript:TextOut('uname','Username:','no');" type="text" class="textbox font" value="Username:" />
 <td>
 <td height="60" width="187" valign="middle" align="left">
 <div style="padding-left:7px;">
 <input id="upass" name="upass" onClick="javascript:TextOver('upass','Password:','yes');" onBlur="javascript:TextOut('upass','Password:','yes');" type="text" class="textbox font" value="Password:" />
 </div>
 <td>
 <td height="60" width="67" valign="middle" align="left">
 <div style="padding-left:7px;">
 <input type="submit" class="textsubmit font" value="LOG IN" />
 </div>
 </td>
 [/CODE]

Does anybody have any suggestions regarding this?

Thanks!

ZS

@MrNobodyNov 19.2008 — #Yes, just add an adjacent element for the new [B]type[/B] and then delete the old element.

@ShikarnovNov 19.2008 — #Yes, just add an adjacent element for the new [B]type[/B] and then delete the old element.[/QUOTE]

Sorry to sound like a noob, but isn't that what I'm already doing with [COLOR="Red"]var np=myBox.cloneNode(true)[/COLOR]; and [COLOR="Red"]myBox.parentNode.replaceChild(np,myBox);[/COLOR] ?

@MrNobodyNov 19.2008 — #Not precisely. You're copying an existing element. I'm suggesting starting with a completely new element.

@ShikarnovNov 19.2008 — #Why would the code work fine from text to password types, but not vice versa?

@MrNobodyNov 19.2008 — #Perhaps it is considered a potential security breach. Don't ask why you were able to exit your house while the knob lock was engaged but now you're not able to get back in. Concentrate on what works.

@ShikarnovNov 19.2008 — #A security breach... Hmm. Then it's not likely that I'll be able to accomplish this, eh?

Here's new non-working code:

[CODE]
 var np = document.createElement("input")
 np.name=txtID;
 np.value=defaultText;
 np.type="text";
 np.onclick = "TextOver("+txtID+","+defaultText+","+isPass+");";
 np.onBlur = "TextOut("+txtID+","+defaultText+","+isPass+");";
 np.className = "font textbox";
 myBox.parentNode.replaceChild(np,myBox);
 [/CODE]

Got a "not implemented" error this time.

I'm really trying to avoid using a div to hide/unhide since it'll degrade like crap.

@MrNobodyNov 19.2008 — #Must be the very next line of code:

var np = document.createElement("input");

np.type="text";

But that is also the default [B]type[/B].

@ShikarnovNov 19.2008 — #Thanks for the advice. I think I got what I needed, although I've got a new problem. But that's a topic for a different thread.

ZS

Also in #JavaScript _↴

Changing menu images with Javascript Passing values from Javascript to html?Save box

Success!

Help @-asx- spread the word by sharing this article on Twitter...

Tweet This

Can you change form field type from hidden to text with Javascript?

14 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

14 Comments(s) _↴

Also in #JavaScript _↴