How to change textbox options onclick or onchange

Hello,

We are building a medical demo application and would like to be able to have some options change with a textbox. The options that I have are (Acute, Chronic, Self Limiting and none). What I would like is that the textbox already have a value when page is loaded and then when the user either clicks the mouse or uses the down arrow on the keyboard that the additional options would cycle through. So cycling through the down arrow would then display (Chronic, Self Limiting, None).The application will be primarily keyboard driven and may even touchscreen, so would prefer not the use of a drop down for this, but a simple textbox. I don't know how to program in Javascript, so the more code or examples you can provide would be most appreciated.

Thank You
PdesignzPPC SpecialistAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

jessegivyDeveloperCommented:
Is there a reason you want to use a textbox instead of a select element?
I know you're not going to like this but the standard way to do this kind of thing follows:
<select>
    <option value="Acute" selected>Acute</option>
    <option value="Chronic">Chronic</option>
    <option value="Self Limiting">Self Limiting</option>
    <option value="none">none</option>
</select>

Open in new window

0
OnthraxCommented:
I wrote a little code that will do what you want..

Hope this helps :)

<body>
 
 
<form name="MyForm">
<input name="MyOptions" id="MyOptions" type="text" value="Acute" />
</form>
 
<script language="JavaScript">
 
document.getElementById('MyOptions').onkeypress = function (e) {
  if(!e) e=window.event;
  key = e.keycode ? e.keycode : e.which;
  if(key==0) ChangeMe();
}
 
function ChangeMe() {
	
	var CurrentValue = document.getElementById("MyOptions").value;
 
	if (CurrentValue == "Acute") {
		CurrentValue = "Chronic";
	} else if (CurrentValue == "Chronic") {
		CurrentValue = "Self Limiting";
	} else if (CurrentValue == "Self Limiting") {
		CurrentValue = "None";
	} else {
		CurrentValue = "Acute";
	}
	document.getElementById("MyOptions").value = CurrentValue;
}
 
</script>
 
</body>

Open in new window

0
OnthraxCommented:
Just noticed it doesn't work in IE.. crap..
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

OnthraxCommented:
Fixed the code...

Now works in IE and Firefox (etc)

Good luck :)

<body>
 
 
<form name="MyForm">
<input name="MyOptions" id="MyOptions" type="text" value="Acute" />
</form>
 
<script language="JavaScript">
 
document.getElementById('MyOptions').onkeyup = function (e) {
  if(!e) e=window.event;
  key = e.keyCode ? e.keyCode : e.which;
  if((key==37) || (key==38) || (key==39) || (key==40)) ChangeMe();
}
 
function ChangeMe() {
	
	var CurrentValue = document.getElementById("MyOptions").value;
 
	if (CurrentValue == "Acute") {
		CurrentValue = "Chronic";
	} else if (CurrentValue == "Chronic") {
		CurrentValue = "Self Limiting";
	} else if (CurrentValue == "Self Limiting") {
		CurrentValue = "None";
	} else {
		CurrentValue = "Acute";
	}
	document.getElementById("MyOptions").value = CurrentValue;
}
 
</script>
 
</body>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
PdesignzPPC SpecialistAuthor Commented:
Onthrax,

Works great!  is it possible to also add an onclick event, so that the options would cycle through if you either use the mouse click or the down arrow.

Thanks
0
PdesignzPPC SpecialistAuthor Commented:
jessegivy,

This is a healthcare app demo and limited on space as they will use on small touch screen, so we are trying to see if possible to use just a textbox with options that you could cycle through rather than a full drop down menu.

Thanks
0
OnthraxCommented:
Sure..

replace
<input name="MyOptions" id="MyOptions" type="text" value="Acute" />

with
<input name="MyOptions" id="MyOptions" type="text" onclick="ChangeMe();" value="Acute" />

0
PdesignzPPC SpecialistAuthor Commented:
Also can it be made possible that this could be used on multiple textboxes.
0
OnthraxCommented:
You keep on asking more and more :p

I'll modify some code after dinner.. be back in about an hour or so..
0
PdesignzPPC SpecialistAuthor Commented:
Great!, I really appreciate your help!!
0
PdesignzPPC SpecialistAuthor Commented:
Just a question as I am trying to learn and understand Javascript. Most scrips I have seen are in between , but yours are contained within the  Is there a particular reason for that.

Thanks
0
OnthraxCommented:
Something came up.. I can't do the code right now.. I'll do this first thing tomorrow morning though..

As for your question. Usually all javascript is indeed inside the head tags of the page.
However the code that attaches the key press event can only be fired when the element (the text field) is already on the page, so in that specific case it should be in the body.
I can implement a simple trick that allows all code to be in the head tags though..

I'll be back :D
0
PdesignzPPC SpecialistAuthor Commented:
That would be great, thanks!!
0
PdesignzPPC SpecialistAuthor Commented:
When making changes, I wanted to see if it would be possible to use div's rather than an input box. We do not want the user to have the ability to change the text.

Thanks again, for all the help!!
0
OnthraxCommented:
That would be possible, but only the click event would work as you can't select a DIV and then press the arrow keys. As you have multiple instance you would like to change this way only the click event would be possible..

Let me know what you would like before I make the changes to the code..
0
OnthraxCommented:
Also a little extra javascript would prevent a user from editing the textbox.. so that could still be an option..
0
PdesignzPPC SpecialistAuthor Commented:
Seems that this will be used for a touchscreen system, so let's use the div option. If I need to use the textbox option, I guess I can always repost the question.

Thanks
0
PdesignzPPC SpecialistAuthor Commented:
Great work. Awesome work and help!!
0
OnthraxCommented:
Do you still need the div code as you have accepted an answer?
0
PdesignzPPC SpecialistAuthor Commented:
If you can provide and possible to move inline javascript to head, would be much appreciated. Accepted as you had already fullfilled original request.

Thanks
0
OnthraxCommented:
Great.. Please reply when you see this :)
0
PdesignzPPC SpecialistAuthor Commented:
Onthrax,

Reply to your last comment...
0
OnthraxCommented:
never mind :p

Below is the script you'll need.

If you need any explaination or further assistance please let me know :)



<head>
 
<script language="JavaScript">
 
function ChangeMe(DivID, FormID) {
        
        var CurrentValue = document.getElementById(DivID).innerHTML;
 
        if (CurrentValue == "Acute") {
                CurrentValue = "Chronic";
        } else if (CurrentValue == "Chronic") {
                CurrentValue = "Self Limiting";
        } else if (CurrentValue == "Self Limiting") {
                CurrentValue = "None";
        } else {
                CurrentValue = "Acute";
        }
        document.getElementById(FormID).value = CurrentValue;
	document.getElementById(DivID).innerHTML = CurrentValue;
}
 
</script>
 
</head>
 
<body>
 
	<div id="MyOptionsDiv" onclick="ChangeMe('MyOptionsDiv', 'MyOptions')">Actute</div>
	 
	<form name="MyForm">
	<input name="MyOptions" id="MyOptions" type="hidden" value="Acute" />
	</form>
 
</body>

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.