Change select form into text input?

chamlis

I have a form for a web based SMS client.

There is a select dropdown box with the numbers we most use as selectable options.

Is there a way to select we'll say "Manual input" on the list that then change the selct box to a text box where you can enter a number manually?

I know I've done something like this years ago with PHP (by accident actually :rolleyes: ), but that was a select box populated from a database. May or may not be relevant.

Doesn't matter if it's javascript or PHP.

Thanks

Adam

Yes certainly, just use a javascript method on the select box such that it executes a function based on the value of the option for manual input. I'm not big for the javascript off the top of my head, but I guess it would be something like:

[html]
<select name="numbers" onChange="textBox(this.value)">
<option value="0861234567">John Smith</option>
<option value="0861234567">John Smith</option>
<option value="0861234567">John Smith</option>
<option value="manual">Manual Entry</option>
</select>

<script>

function textBox(value) {

//code to output a text box if the value passed was equal to "manual"

}
</script>
[/html]

Now this is a sketchy example, but something to build on. One thing I will say is I wouldn't recommend you replacing the select box with a text area, for the simple reason that if someone accidentally selects the manual entry option, they're then stuck with a text box and no way to get the select box back.

daymobrew

The simplest method would be to include a text box that is initially disabled. Enable it when "Manual Input" is selected.

If you do it the other way, how do people get back to the list after, possibly accidentally, selecting "Manual Input"?

The other thing to think about is how it will work if the user does not have Javascript enabled (though that is unlikely). In the simple method, you could disable the text box on page load (so non-Javascript users still have access to it).

Eoin

If you have the time, you could do something nice with AJAX and/or DHTML- have a textbox with a simulated dropdown underneath with the list of numbers (like Google suggest).

NotMe

eoin_s wrote: »

If you have the time, you could do something nice with AJAX and/or DHTML- have a textbox with a simulated dropdown underneath with the list of numbers (like Google suggest).

Good example here:
http://www.dhtmlgoodies.com/scripts/form_widget_editable_select/form_widget_editable_select.html


or this might be useful:
http://sandy.mcarthur.org/javascript/select/select.html

Eoin

NotMe wrote: »

Good example here:
http://www.dhtmlgoodies.com/scripts/form_widget_editable_select/form_widget_editable_select.html

That one would be really cool if it matched the text being entered with corresponding values in the dropdown as you type.

Adam

eoin_s wrote: »

That one would be really cool if it matched the text being entered with corresponding values in the dropdown as you type.

Agreed, though it would probably be fairly easy to implement that yourself. However I would guess the OP's idea is more along the lines of my example, whereby the persons name is the option, with the number as the value, thereby negating the usefulness.

chamlis

That did the job.

Nice work guys, thanks a mil

EDIT:
Yeah you're right there Mirror. The criteria for the SMS app are quite specific, but sorted now.