asked on

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

jessegivy

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

Onthrax

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

Onthrax

Just noticed it doesn't work in IE.. crap..

ASKER CERTIFIED SOLUTION

Onthrax

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Pdesignz

ASKER

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

Pdesignz

ASKER

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

Onthrax

Sure..

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

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

Pdesignz

ASKER

Also can it be made possible that this could be used on multiple textboxes.

Onthrax

You keep on asking more and more :p

I'll modify some code after dinner.. be back in about an hour or so..

Pdesignz

ASKER

Great!, I really appreciate your help!!

Pdesignz

ASKER

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

Onthrax

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

Pdesignz

ASKER

That would be great, thanks!!

Pdesignz

ASKER

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!!

Onthrax

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..

Onthrax

Also a little extra javascript would prevent a user from editing the textbox.. so that could still be an option..

Pdesignz

ASKER

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

Pdesignz

ASKER

Great work. Awesome work and help!!

Onthrax

Do you still need the div code as you have accepted an answer?

Pdesignz

ASKER

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

Onthrax

Great.. Please reply when you see this :)

Pdesignz

ASKER

Onthrax,

Reply to your last comment...

Onthrax

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