...

View Full Version : Convert SELECT box to INPUT



Ricks
08-15-2005, 09:22 AM
Hi,

Im trying to change a SELECT box to a TEXT input box with the text value of the chosen index. ie;

<select name="select" onChange="changeToInput();">
<option value="a">Hey Hey</option>
<option value="b">Doh</option>
</select>

---

<input name="textfield" type="text" value="Hey Hey">

Help muchly appreciated.

Kor
08-15-2005, 09:53 AM
<select name="select" onChange="this.form.textfield.value=this.options[this.selectedIndex].text">

vwphillips
08-15-2005, 10:13 AM
<html>

<script>

function changeToInput(obj){
tb=document.createElement('INPUT');
tb.type='text';
tb.value=obj.options[obj.selectedIndex].text;
obj.parentNode.insertBefore(tb,obj);
obj.parentNode.removeChild(obj);
}

</script>
<body>
<select name="select" onchange="changeToInput(this);">
<option value="a">Hey Hey</option>
<option value="b">Doh</option>
</select>
</body>
</html>

Ricks
08-15-2005, 02:10 PM
<html>

<script>

function changeToInput(obj){
tb=document.createElement('INPUT');
tb.type='text';
tb.value=obj.options[obj.selectedIndex].text;
obj.parentNode.insertBefore(tb,obj);
obj.parentNode.removeChild(obj);
}

</script>
<body>
<select name="select" onchange="changeToInput(this);">
<option value="a">Hey Hey</option>
<option value="b">Doh</option>
</select>
</body>
</html>


Genious! absolute genious. thanks for that.
Ok, say you wanted to have a button which changes it all back to what it was, how would one go about that?

vwphillips
08-15-2005, 04:15 PM
<html>

<script>
var Objs;

function changeToInput(obj){
tb=document.createElement('INPUT');
tb.type='text';
tb.value=obj.options[obj.selectedIndex].text;
tbb=document.createElement('INPUT');
tbb.type='button';
tbb.value='Back';
tbb.objs=[obj,tb,tbb];
tbb.onclick=function(){ Replace(this.objs); }
obj.parentNode.insertBefore(tb,obj);
obj.parentNode.insertBefore(tbb,obj);
obj.parentNode.removeChild(obj);
}

function Replace(obj){
obj[2].parentNode.insertBefore(obj[0],obj[2]);
obj[0].parentNode.removeChild(obj[1]);
obj[0].parentNode.removeChild(obj[2]);
}
</script>
<body>
<select name="select" onchange="changeToInput(this);">
<option value="a">Hey Hey</option>
<option value="b">Doh</option>
</select>
</body>
</html>

Ricks
08-20-2005, 05:56 AM
Champion

Ultragames
08-20-2005, 07:04 AM
I must say, well done! Any idea of how cross-browser this is?

Kor
08-22-2005, 09:39 AM
I must say, well done! Any idea of how cross-browser this is?

All the modern browsers.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum