Hide dropdown list

[dchard]

I want to hide the drop down list after a client hit a button beside it and replace the dropdown list by a text box. How will I do that?
Thanks in advance!!!

[Dan_Bracuk]

quote:

---

Originally posted by: dchard
I want to hide the drop down list after a client hit a button beside it and replace the dropdown list by a text box. How will I do that?

---

With great difficulty. I had a similar requirement once and could not get it to work. Rather than turning it into a career, I changed my approach. Instead of switching form elements, I switched forms. Here are some bits of code.

<script language="javascript">
function showHide(checkBox) {
/*
controls what the user sees. If he checks the button, all the mail stuff shows up and the 1st submit button disappears and gets disabled. If he unchecks it, the reverse happens. Page loads with button checked.
*/

if (checkBox.checked == true) {
document.getElementById('longform').style.visibility = 'visible';
document.getElementById('shortform').style.visibility = 'hidden';
document.theForm2.startmonth.focus();
document.theForm2.mail2.checked = true;
}

else {
document.getElementById('longform').style.visibility = 'hidden';
document.getElementById('shortform').style.visibility = 'visible';
document.theForm1.mail1.checked = false;
document.theForm1.startmonth.focus();
}

return true;
} // end of function

</script>

and then
<div id="longform" style="position:absolute; top:200">
<cfform name="theForm2">
etc
<div id="shortform" style="visibility:hidden; position:absolute; top:200">
<cfform name="theForm1">

Maybe someone smarter than me can figure out how to do it by switching elements in the same form.

[Newsgroup_User]

it is, in fact, relatively simple, and even simpler if you can go with
hiding your select and showing a textbox instead of switching form
elements; and simpler still with the help from jQuery...

simple jQuery example:

in your form:
<span id="myselectholder">Select: <select name="myselect"
...>...</select></span>
<span id="mytextboxholder" style="display:none;">Textbox: <input
type="text" name="mytextbox"...></span>
<input type="button" id="mybutton" ...>

js:
$(document).ready(function(){
$("#mybutton").click(function() { $("#myselectholder,
#mytextboxholder").toggle(); });
});

just an example.



Azadi Saryev
Sabai-dee.com
http://www.sabai-dee.com/

[Dan_Bracuk]

It's simple until you want both form elements to occupy the same spot on the page.

[fober1]

Hi,
here's a good example below.

cheers,
fober
===== EXAMPLE =====

<div style="width:200px; padding-right: 20px; border: 1px solid red">
<select id="text_select" size="5"
onclick="document.getElementById('text_edit').value=this[this.selectedIndex].text; this.style.display= 'none'"
style="display:none; z-index:99; position:absolute; padding-top:20px; width:100%"
>
<option>Apple</option>
<option>Orange</option>
<option>Banana</option>
</select>
<input name="xyz" id="text_edit" type="Text" style="width:100%">
<input type="Button" value="\/"
onclick="document.getElementById('text_select').style.display= 'inline'"
style="position:absolute; float:right;"
>
</div>

[fober1]

Hi,
here's a good example below.

cheers,
fober
===== EXAMPLE =====

<div style="width:200px; padding-right: 20px; border: 1px solid red">
<select id="text_select" size="5"
onclick="document.getElementById('text_edit').value=this[this.selectedIndex].text; this.style.display= 'none'"
style="display:none; z-index:99; position:absolute; padding-top:20px; width:100%"
>
<option>Apple</option>
<option>Orange</option>
<option>Banana</option>
</select>
<input name="xyz" id="text_edit" type="Text" style="width:100%">
<input type="Button" value="\/"
onclick="document.getElementById('text_select').style.display= 'inline'"
style="position:absolute; float:right;"
>
</div>