editable menu/list form

[mahmoodn]

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?

[acoder]

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.

[mahmoodn]

It seems that it is not an easy job... I am not expert in javascript. I have to work around with it.

[acoder]

Well, in that case, the link I've posted should at least get you started.

[mahmoodn]

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.

<form id="form1" name="form1" method="post" action="">
...<select name="V" id="V" class="comboBox">
      <option selected >Very low</option>
      <option>Low</option>
      <option>Medium</option>
      <option>High</option>
      <option>Very high</option>
</select>
...
 

now by clicking a button a function is called and I wrote:

var zz = document.form1.V.selectedIndex;
    switch ( zz ) {
        case 0:
            var v = 0.1;
            break;
        case 1:
            var v = 0.2;
            break;
        case 2:
            var v = 0.3;
            break;
        case 3:
            var v = 0.5;
            break;
        case 4:
            var v = 1.5;
            break;
        default:
            var v = document.form1.V.value;
            alert( v );
}

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.

[gits]

how do you want to have the text treated?

kind regards

[mahmoodn]

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);

[gits]

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):

function setInputValue() {
    // retrieve the select's value -> you should add 
    // the value props to the options
    var val = document.getElementById('V').value;
 
    document.getElementById('yourInputIdHere').value = val;
}

kind regards

[mahmoodn]

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);

[gits]

1. the id-property of your input node

2. as i said: onchange of your select node

3. you already have:

<select name="V" id="V" class="comboBox">

and getElementById() retrieves elements by its id ... so the shown line:

document.getElementById('V');
 

would be correct when you want to retrieve the above select node.

[mahmoodn]

I have wrote this:

    <select name="V" id="V" class="comboBox" onchange="setInputValue(this.id)">
      <option selected >Very low</option>
      <option>Low</option>
      <option>Medium</option>
      <option>High</option>
      <option>Very high</option>
    </select>

then the function is (as you wrote):

<script language='javascript' type='text/javascript'>
function setInputValue(x) {
 
 var val = document.getElementById(x).value;
 document.getElementById(x).value = val;
}
</script>
 

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:

<input name="C2" type="button" id="C2" value="Calculate" onclick="calc()" />
...
<script language='javascript' type='text/javascript'>
function calc() {
    var zz = document.form1.V.selectedIndex;
    switch ( zz ) {
    ..........
        .........
    }
 

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.

[gits]

in the options set the value-attribute like this:

<option value="0.1">Low</option>
 

then in your button's function you just need to use:

document.getElementById('yourInputIdhere').value

now. this retrieves the value of the input-node ... isn't that what you try to get there?

kind regards

[mahmoodn]

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:

<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<script type="text/javascript" src="comboBox.js"></script>
<script language='javascript' type='text/javascript'>
function calc() {
    var v = document.getElementById('V').value;
    //alert( v );
    var z = Math.pow( v, 2 );
    //alert( z );
    document.form1.tem.value = z.toFixed(2);
}
</script>
<script language='javascript' type='text/javascript'>
function setInputValue(x) {
 var val = document.getElementById(x).value;
 document.getElementById(x).value = val;
 alert ("input handler");
}
</script>
 
<form id="form1" name="form1" method="post" action="">
    <select name="V" id="V" class="comboBox" onchange="setInputValue(this.id)">
      <option value="0.1" selected >Very low</option>
      <option value="0.2">Low</option>
      <option value="0.3">Medium</option>
      <option value="0.5">High</option>
      <option value="1.5">Very high</option>
    </select>
    <input name="C2" type="button" id="C2" value="Calculate" onclick="calc()" />
<input name="T" type="text" id="tem" size="10" maxlength="5" >
</body>
</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...

[gits]

you missed something :) ... in the calc-function use:

var v = document.getElementById('C2').value;

this should always be the correct value, because 'C2' is 'yourInputIdhere' while 'V' would be 'yourSelectIdhere' :)

kind regards

[mahmoodn]

I am not so sure... because if you test with 'C2', the result will be "NaN".

[gits]

i fixed it in the code below - i was wrong, the input id is 'temp' i overlooked it. note the changes :)

<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<script type="text/javascript">
 
function calc() {
    var v = document.getElementById('tem').value;
    var z = Math.pow( v, 2 );
    document.form1.tem.value = z.toFixed(2);
}
 
function setInputValue(x) {
    var val = document.getElementById(x).value;
    document.getElementById('tem').value = val;
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
    <select name="V" id="V" class="comboBox" onchange="setInputValue(this.id)">
      <option value="0.1" selected >Very low</option>
      <option value="0.2">Low</option>
      <option value="0.3">Medium</option>
      <option value="0.5">High</option>
      <option value="1.5">Very high</option>
    </select>
 
    <input name="C2" type="button" id="C2" value="Calculate" onclick="calc()" />
    <input name="T" type="text" id="tem" size="10" maxlength="5" >
</form>
</body>
</html>

[mahmoodn]

You have removed the important line which is the core of combo/edit box:

<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

[gits]

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

[mahmoodn]

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

[gits]

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:

<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<script src="comboBox.js"></script>
<script type="text/javascript">
function calc() {
    var v = document.getElementById('txtV').value;
 
    if (isNaN(v)) {
        document.form1.tem.value = '';
        return;
    }
 
    var z = Math.pow( v, 2 );
    document.form1.tem.value = z.toFixed(2);
}
 
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
    <select name="V" id="V" class="comboBox" onchange="setInputValue(this.id)">
      <option value="0.1" selected >Very low</option>
      <option value="0.2">Low</option>
      <option value="0.3">Medium</option>
      <option value="0.5">High</option>
      <option value="1.5">Very high</option>
    </select>
 
    <input name="C2" type="button" id="C2" value="Calculate" onclick="calc()" />
    <input name="T" type="text" id="tem" size="10" maxlength="5" >
</form>
</body>
</html>
 

the setting of the value is even 'self-handled' ... and so you just need to retrieve the correct value from the appended input-node.

[mahmoodn]

great... it is now working. Indeed it was very tricky...
Thanks

[gits]

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