Monday, April 8, 2013

Combination of input box and dropdown menu using JavaScript



Sometimes users may not only want to select the value from the dropdown menu, but also can input new values if the values are not in the list, We can use
onChange="this.form.event_name.value=this.options[this.selectedIndex].value
In SELECT where input box name is event_name.
Example code:
<form>
 <input type="text"  name="event_name" maxlength="255"  style="width:50%"    />    
<SELECT NAME="options"
onChange="this.form.event_name.value=this.options[this.selectedIndex].value">
     <OPTION VALUE=" ">Type event name or choose from the list
    <OPTION VALUE="Emergency Medicine 3 Year Resuscitation Sim">Emergency Medicine 3 Year Resuscitation Sim
    <OPTION VALUE="ENT Research Cadaver Lab">ENT Research Cadaver Lab
    <OPTION VALUE="Feeding Tube Insertion">Feeding Tube Insertion
    <OPTION VALUE="General Surgery Laparoscopic Training">General Surgery Laparoscopic Training
    <OPTION VALUE="General Surgery M&M Rounds">General Surgery M&M Rounds
    <OPTION VALUE="Harvey Internal Medicine Residents">Harvey Internal Medicine Residents
    <OPTION VALUE="Harvey Internal Medicine Student Teaching">Harvey Internal Medicine Student Teaching
    <OPTION VALUE="Internal Medicine Resident Procedural Train">Internal Medicine Resident Procedural Train   
    <OPTION VALUE="Perioperative Nursing">Perioperative Nursing
    <OPTION VALUE="Plastic Cadaver Lab">Plastic Cadaver Lab
    <OPTION VALUE="Tour for Laerdal">Tour for Laerdal
    <OPTION VALUE="Orthopedic Resident Cadaver Lab">Orthopedic Resident Cadaver Lab
    <OPTION VALUE="Simulation Fellows">Simulation Fellows
    <OPTION VALUE="Simulation Fellows Lecture">Simulation Fellows Lecture
    <OPTION VALUE="Simulation Fellow Reflection">Simulation Fellow Reflection
    <OPTION VALUE="Surgery Undergraduate Curriculum Comm.">Surgery Undergraduate Curriculum Comm.
    <OPTION VALUE="UBC Ethics Committee">UBC Ethics Committee
    <OPTION VALUE="UBC Summer eHealth Camp">UBC Summer eHealth Camp
</SELECT>
</form>
DEMO: the selection in drop-down menu will go to input box

No comments:

Post a Comment