create a drop down menu with custom option?

[slymongoose]

hi there,

is it possible to create a drop down (select) menu with the option to enter a custom value as the selection?

here's what i want:
i have a drop down menu of 10 choices that a user can select from. and then, at the bottom of the list, i've added the option "custom"

if the user doesn't see what he wants in those top 10 choices, could he select "custom" from the bottom, and then have a text box appear where he could enter whatever value he wants?

[Nile]

Try:

<script type="text/javascript">
var cDrop = function(el){
  var parentTarget = document.getElementById(el);
  if(!parentTarget){
    alert("No such element with id!");
	return false;
  }
  var target = document.getElementById("custom");
  if(!target || target.parentNode.id != el){
	alert("No option tag with id of 'custom'");
	return false;
  }
  parentTarget.onchange = function(){
    if(this.options[this.selectedIndex].id == "custom"){
	  var el = document.createElement("input");
	  el.type = "text";
	  el.name = "customtext";
	  el.value = "";
	  var submit = document.createElement("input");
	  submit.type = "button";
	  submit.value = "+";
	  var cancel = document.createElement("input");
	  cancel.type = "button";
	  cancel.value = "cancel";
	  cancel.onclick = function(){
	    document.body.removeChild(submit);
		document.body.removeChild(el);
		document.body.removeChild(cancel);
		parentTarget.style.display = "block";
		parentTarget.selectedIndex = 0;
	  };
	  submit.onclick = function(){
	    var opt = document.createElement("option");
		var text = document.createTextNode(el.value);
		opt.value = el.value;
		opt.appendChild(text);
		parentTarget.insertBefore(opt, target);
		parentTarget.selectedIndex = opt.index;
		document.body.removeChild(submit);
		document.body.removeChild(el);
		document.body.removeChild(cancel);
		parentTarget.style.display = "block";
	  };
	  parentTarget.style.display = "none";
	  document.body.insertBefore(el, parentTarget.nextSibling);
	  document.body.insertBefore(submit, el.nextSibling);
	  document.body.insertBefore(cancel, submit.nextSibling);
	}
  };
};
</script>
<select name="options" id="options">
  <option value="1">Dog1</option>
  <option value="2">Dog2</option>
  <option value="3">Dog3</option>
  <option value="4">Dog4</option>
  <option value="5">Dog5</option>
  <option value="6">Dog6</option>
  <option value="7" id="custom">Custom</option>
</select>
<script type="text/javascript">
cDrop("options");
</script>

[slymongoose]

Nile,

That is awesome! Exactly what I was talking about. Thank you so much for your help!

[slymongoose]

OK, so the setup is perfect .. but how do i grab/save the value that they enter?
(sorry my javascript knowledge is terrible)

[Nile]

What are you grabbing it with? Php?

[slymongoose]

yeah, using php to shoot it into a mysql database.
i have options 1-12, which are already assigned values in the database. so the "custom" option would be 13, which i would have to assign a value to and then somehow input it into the db

[Nile]

You would just do: $_GET['options'] or $_POST['options'] whatever the name of the <select> field is

[slymongoose]

ok, i'm having a weird issue...
this drop box doesn't work when i put it inside a <DIV> tag. the dropdown menu still works, but when i select the "custom" field, the select box/menu disappears.
when i move it outside the div tag, it works fine.

am i overlooking something? maybe it's something simple i'm missing because my javascript knowledge is bad...

more specifically, the IE gives me an "invalid argument" error, which points to this line in the code:
document.body.insertBefore(el, parentTarget.nextSibling);
FF doesn't give an error, but it disappears there all the same

[Nile]

Yea... I know why this occurs. I'll work on it.

[slymongoose]

yeah it's weird. took me a bit to figure out it was the <div> doing it.
then i tried all i could think of to get it to stay, but that sucker disappeared no matter what i did.