By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,740 Members | 1,429 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,740 IT Pros & Developers. It's quick & easy.

editable menu/list form

P: 77
Is it possible to have an editable combobox (list/menu) form in HTML using javascript? it seems that this is not an standard widget in HTML. Should I create a new one or there is a better solution?
May 22 '09 #1
Share this Question
Share on Google+
21 Replies


acoder
Expert Mod 15k+
P: 16,027
This is one attempt. The basic idea is to use a text box and a select element and place one on top of the other, so both can be used.
May 22 '09 #2

P: 77
It seems that it is not an easy job... I am not expert in javascript. I have to work around with it.
May 22 '09 #3

acoder
Expert Mod 15k+
P: 16,027
Well, in that case, the link I've posted should at least get you started.
May 22 '09 #4

P: 77
After very long delay I am now here (!)
I tried to implement it and the class was easy to understand. One thing that I have not understand yet is passing the entered value to a variable.
Expand|Select|Wrap|Line Numbers
  1. <form id="form1" name="form1" method="post" action="">
  2. ...<select name="V" id="V" class="comboBox">
  3.       <option selected >Very low</option>
  4.       <option>Low</option>
  5.       <option>Medium</option>
  6.       <option>High</option>
  7.       <option>Very high</option>
  8. </select>
  9. ...
  10.  
now by clicking a button a function is called and I wrote:
Expand|Select|Wrap|Line Numbers
  1. var zz = document.form1.V.selectedIndex;
  2.     switch ( zz ) {
  3.         case 0:
  4.             var v = 0.1;
  5.             break;
  6.         case 1:
  7.             var v = 0.2;
  8.             break;
  9.         case 2:
  10.             var v = 0.3;
  11.             break;
  12.         case 3:
  13.             var v = 0.5;
  14.             break;
  15.         case 4:
  16.             var v = 1.5;
  17.             break;
  18.         default:
  19.             var v = document.form1.V.value;
  20.             alert( v );
  21. }
but it does not work. Anybody knows the problem? Unfortunately in the tutorial, it is not clear how to treat the entered text in the combobox.
Aug 3 '09 #5

gits
Expert Mod 5K+
P: 5,390
how do you want to have the text treated?

kind regards
Aug 4 '09 #6

P: 77
If the user wants, he can select one of the 5 items (very low, ..., very high) or he can write a float number. The default values for items are:
very low = 0.1
low = 0.2
medium = 0.3
high = 0.5
very high = 1.5

Now as a user, I want to enter 0.75. In the function I want the variable 'v' to get 0.75 and then manipulate it. For example var hc = 12.1 * Math.pow(v, 0.5);
Aug 4 '09 #7

gits
Expert Mod 5K+
P: 5,390
so now ... correct me if i'm wrong ... but first i have to summarize that all:

you have an input type=text and a select node where the input 'overlays' the select. now you are able to type in the input element and/or drop down the select options where you could choose from ... right?

then now you just have to do the following to achieve your goal:

1. write a onchange handler for your select element that will write the choosen value to the input's value

2. now you just need to retrieve the value from the input ... when it was typed in then you would have that ... when someone selects from the dropdown it will be instantly set to the input - then do with that value whatever you want :)

the onchange handler could look like this (note the comments too):

Expand|Select|Wrap|Line Numbers
  1. function setInputValue() {
  2.     // retrieve the select's value -> you should add 
  3.     // the value props to the options
  4.     var val = document.getElementById('V').value;
  5.  
  6.     document.getElementById('yourInputIdHere').value = val;
  7. }
kind regards
Aug 4 '09 #8

P: 77
The idea is right but some things are still vague.
1- what do you mean by "yourInputIdHere"? where should I define it?
2- when should I call "setInputValue()"?
3- is this syntax getElementById('V') correct? In my previous post, I wrote 'v' because the variable is a single character. The actual variable name is v as in Math.pow(v, 0.5);
Aug 4 '09 #9

gits
Expert Mod 5K+
P: 5,390
1. the id-property of your input node

2. as i said: onchange of your select node

3. you already have:

Expand|Select|Wrap|Line Numbers
  1. <select name="V" id="V" class="comboBox">
and getElementById() retrieves elements by its id ... so the shown line:

Expand|Select|Wrap|Line Numbers
  1. document.getElementById('V');
  2.  
would be correct when you want to retrieve the above select node.
Aug 4 '09 #10

P: 77
I have wrote this:
Expand|Select|Wrap|Line Numbers
  1.     <select name="V" id="V" class="comboBox" onchange="setInputValue(this.id)">
  2.       <option selected >Very low</option>
  3.       <option>Low</option>
  4.       <option>Medium</option>
  5.       <option>High</option>
  6.       <option>Very high</option>
  7.     </select>
then the function is (as you wrote):
Expand|Select|Wrap|Line Numbers
  1. <script language='javascript' type='text/javascript'>
  2. function setInputValue(x) {
  3.  
  4.  var val = document.getElementById(x).value;
  5.  document.getElementById(x).value = val;
  6. }
  7. </script>
  8.  
The new problem is I use the variable v in another button function. As I said I have a button, and for it I have a function:
Expand|Select|Wrap|Line Numbers
  1. <input name="C2" type="button" id="C2" value="Calculate" onclick="calc()" />
  2. ...
  3. <script language='javascript' type='text/javascript'>
  4. function calc() {
  5.     var zz = document.form1.V.selectedIndex;
  6.     switch ( zz ) {
  7.     ..........
  8.         .........
  9.     }
  10.  
No I can not use val in calc().
Sorry if it is messy, but I have no experience with handlers. I can post the entire code but it is a bit lengthy.
Aug 4 '09 #11

gits
Expert Mod 5K+
P: 5,390
in the options set the value-attribute like this:

Expand|Select|Wrap|Line Numbers
  1. <option value="0.1">Low</option>
  2.  
then in your button's function you just need to use:

Expand|Select|Wrap|Line Numbers
  1. document.getElementById('yourInputIdhere').value
now. this retrieves the value of the input-node ... isn't that what you try to get there?

kind regards
Aug 5 '09 #12

P: 77
I summarize what you said and wrote a sample file and used the combo/edit box to see if it work. Here is the code:
Expand|Select|Wrap|Line Numbers
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <body>
  3. <script type="text/javascript" src="comboBox.js"></script>
  4. <script language='javascript' type='text/javascript'>
  5. function calc() {
  6.     var v = document.getElementById('V').value;
  7.     //alert( v );
  8.     var z = Math.pow( v, 2 );
  9.     //alert( z );
  10.     document.form1.tem.value = z.toFixed(2);
  11. }
  12. </script>
  13. <script language='javascript' type='text/javascript'>
  14. function setInputValue(x) {
  15.  var val = document.getElementById(x).value;
  16.  document.getElementById(x).value = val;
  17.  alert ("input handler");
  18. }
  19. </script>
  20.  
  21. <form id="form1" name="form1" method="post" action="">
  22.     <select name="V" id="V" class="comboBox" onchange="setInputValue(this.id)">
  23.       <option value="0.1" selected >Very low</option>
  24.       <option value="0.2">Low</option>
  25.       <option value="0.3">Medium</option>
  26.       <option value="0.5">High</option>
  27.       <option value="1.5">Very high</option>
  28.     </select>
  29.     <input name="C2" type="button" id="C2" value="Calculate" onclick="calc()" />
  30. <input name="T" type="text" id="tem" size="10" maxlength="5" >
  31. </body>
  32. </html>
If you run the code, you will see that the calc() works fine for selected items, but it does not work for written values in the combo/edit box.

For example, if you select "very low" and press the button, the result will be 0.1^2=0.01
but if you enter 2 and press the button, the result will be 0.01 (!)

Although the onchange handler is present, I don't know why it is not aware of input changes. I know I have not correctly wrote the setInputValue, but I placed an alert inside the onchange handler to see if it is called, but it doesn't execute (!)

Thanks in advance...
Aug 5 '09 #13

gits
Expert Mod 5K+
P: 5,390
you missed something :) ... in the calc-function use:

Expand|Select|Wrap|Line Numbers
  1. var v = document.getElementById('C2').value;
this should always be the correct value, because 'C2' is 'yourInputIdhere' while 'V' would be 'yourSelectIdhere' :)

kind regards
Aug 5 '09 #14

P: 77
I am not so sure... because if you test with 'C2', the result will be "NaN".
Aug 5 '09 #15

gits
Expert Mod 5K+
P: 5,390
i fixed it in the code below - i was wrong, the input id is 'temp' i overlooked it. note the changes :)

Expand|Select|Wrap|Line Numbers
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2.  
  3. <head>
  4. <script type="text/javascript">
  5.  
  6. function calc() {
  7.     var v = document.getElementById('tem').value;
  8.     var z = Math.pow( v, 2 );
  9.     document.form1.tem.value = z.toFixed(2);
  10. }
  11.  
  12. function setInputValue(x) {
  13.     var val = document.getElementById(x).value;
  14.     document.getElementById('tem').value = val;
  15. }
  16. </script>
  17. </head>
  18. <body>
  19. <form id="form1" name="form1" method="post" action="">
  20.     <select name="V" id="V" class="comboBox" onchange="setInputValue(this.id)">
  21.       <option value="0.1" selected >Very low</option>
  22.       <option value="0.2">Low</option>
  23.       <option value="0.3">Medium</option>
  24.       <option value="0.5">High</option>
  25.       <option value="1.5">Very high</option>
  26.     </select>
  27.  
  28.     <input name="C2" type="button" id="C2" value="Calculate" onclick="calc()" />
  29.     <input name="T" type="text" id="tem" size="10" maxlength="5" >
  30. </form>
  31. </body>
  32. </html>
Aug 5 '09 #16

P: 77
You have removed the important line which is the core of combo/edit box:
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript" src="comboBox.js"></script>
removing that line causes the widget to be only combobox which I have worked with it before.
If you run run with comboBox.js and 'tem' as input handler, then the result will be always 0.00
Aug 6 '09 #17

gits
Expert Mod 5K+
P: 5,390
with the current code it works correct ... so what is comboBox.js doing? the only thing that is missing is to overlay the input over the select node ... is that what it does? it shouldn't have anything to do with the calculation or does it? then i guess you should post ALL! relevant code instead of complaining that something is missing or working in another way ...
Aug 6 '09 #18

P: 77
@gits
yes
@gits
I thought you were aware of comboBox.js. I have not written it. It is something that the original author of combo/edit box wrote and I only include it in my code. I have attached all relevant code.
Attached Files
File Type: zip combo-edit.zip (4.6 KB, 68 views)
Aug 6 '09 #19

gits
Expert Mod 5K+
P: 5,390
nope ... i was not aware of that script. and it 'self-creates' the combo ... by appending a new input-node with an id 'txt'+'yourSelectNodeId' ... to make it work in this case the code could! look like:

Expand|Select|Wrap|Line Numbers
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2.  
  3. <head>
  4. <script src="comboBox.js"></script>
  5. <script type="text/javascript">
  6. function calc() {
  7.     var v = document.getElementById('txtV').value;
  8.  
  9.     if (isNaN(v)) {
  10.         document.form1.tem.value = '';
  11.         return;
  12.     }
  13.  
  14.     var z = Math.pow( v, 2 );
  15.     document.form1.tem.value = z.toFixed(2);
  16. }
  17.  
  18. </script>
  19. </head>
  20. <body>
  21. <form id="form1" name="form1" method="post" action="">
  22.     <select name="V" id="V" class="comboBox" onchange="setInputValue(this.id)">
  23.       <option value="0.1" selected >Very low</option>
  24.       <option value="0.2">Low</option>
  25.       <option value="0.3">Medium</option>
  26.       <option value="0.5">High</option>
  27.       <option value="1.5">Very high</option>
  28.     </select>
  29.  
  30.     <input name="C2" type="button" id="C2" value="Calculate" onclick="calc()" />
  31.     <input name="T" type="text" id="tem" size="10" maxlength="5" >
  32. </form>
  33. </body>
  34. </html>
  35.  
the setting of the value is even 'self-handled' ... and so you just need to retrieve the correct value from the appended input-node.
Aug 6 '09 #20

P: 77
great... it is now working. Indeed it was very tricky...
Thanks
Aug 6 '09 #21

gits
Expert Mod 5K+
P: 5,390
:) ... not tricky at all. as you might have noticed we currently nearly rebuilt the comboBox.js and you could have seen how that basicly works. and basicly it is a very simple script.

but i'm glad to hear that it works now for you ... :)

kind regards
Aug 6 '09 #22

Post your reply

Sign in to post your reply or Sign up for a free account.