change input TYPE="hidden" to input TYPE="text" 1

[petevick]

Can any one help me out here. I want to change an input TYPE="hidden" to input TYPE="text" when a certain option is chosen from a drop-down list box on a web page. I'm guessing that it could be done with Java using the onChange event somehow, but I'm unable to find any clues from trawling the web.


Pete Vickerstaff - Hedra Software

http://www.hedrasoftware.co.uk

 

[13sio]

i don't know how to change <input type="hidden"> to <input type="text">.

another appoach is that put the <input type="text"> inside a layer, and control the visibility of this layer, visible or hidden.

 

[Vragabond]

Why would you even want to tinker with the type style. Just change the display of the input field:

<a href="#" onclick="document.getElementById('Myinput').style.display = 'inline'; return false;">Show</a>
<a href="#" onclick="document.getElementById('Myinput').style.display = 'none'; return false;">Hide</a>
<br />
<input type="text" id="Myinput" name="Myinput" style="display: none;" />

This example uses hyperlinks to show or hide the text box but you could easily adopt it to use another source.

 

[petevick]

Hi Vragabond, that looks just the thing, and I should be able to do that using the onChange event of the drop down list box, hopefully.

Pete Vickerstaff - Hedra Software

http://www.hedrasoftware.co.uk

 

[petevick]

Right, cracked it. I added the following function....

function ShowHide(retval){
if (retval == "true") {document.getElementById('Myinput').style.display = 'inline'; return false;}
if (retval == "false") {document.getElementById('Myinput').style.display = 'none'; return false;}
}

then added the false value to each list item that would hide the box and true value to the item that would show the box, the function gets fired by the onChange event which reads....

onChange="ShowHide(this.value)";

Thanks again Vragabond for the lead.

Now, all I need to figure out is how to pass focus to the text box and select the value, any offers ???

Pete Vickerstaff - Hedra Software

http://www.hedrasoftware.co.uk

 

[Vragabond]

Try this:

function ShowHide(retval){
var MyElement = document.getElementById('Myinput');
if (retval == "true") {MyElement.style.display = 'inline'; MyElement.focus();}
if (retval == "false") {MyElement.style.display = 'none';}
}

You don't need to return false if you put it in a function like that. Return false was just in my function so that link wouldn't execute (href="#"). I made a variable of your input box, so there's less repeating in the code. When input box is visible, you have focus, when it is not, no focus. Good enough?

 

[petevick]

Good enough?, I'd say, thats exactly what I wanted, thank you very much Vragabond, have another star.

Pete Vickerstaff - Hedra Software

http://www.hedrasoftware.co.uk