CODEWITHSUNDEEP
javascripthtml
Collin
Collin

Reputation: 954

adding items to <select> in IE5

Ill just awnser the first question... Why IE5 you wonder, Because its on a Windows CE device that im working with so im limited to use IE5. The application that i've made uses a webpage with a couple of elements.

I have two textfields and one list or <select> I want to transfer the value of one textbox to the list. I've got it working in IE 10 and Chrome but when i tested the webpage on the device it did not send the value of textfield two to the list. Can anyone help me solve this issue?

This is my html code:

 <tr>
                    <td>Locatie:</td>
                    <td><input type="text" id="one" onkeyup="CheckOne()" name="locatie" value="{locatie}" /></td>
                </tr>
                <tr>
                    <td>Bonregel:</td>
                    <td><input type="text" name="bonregel" id="two" onkeyup="CheckTwo(event)" /></td>
                </tr>
                <tr>
                    <td>Bonlijst:</td>
                    <td><select id="selectbox" multiple></select></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" value="Verzenden" id="sub" onclick="CheckContent()" /></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="button" value="Velden Legen" id="reset" onclick="ClearFields()" /></td>
                </tr>

And then i have my javascript functions for adding the data to the list:

function AddToList(field) {
                // Create an Option Object
                var opt = document.createElement("option");
                document.getElementById("selectbox").options.add(opt);
                opt.text = document.getElementById("two").value;
                opt.value = document.getElementById("two").value;
            }

function CheckTwo(event) {
                var field = document.getElementById("two").value;
                var tKey = (event.which) ? event.which : event.keyCode;
                if (tKey == 51) {
                    AddToList(field);
                    GiveFocus("two");
                }
            }



// Gives focus to the specified component
            function GiveFocus(id) {
                document.getElementById(id).focus();
            }

            // Action that gets triggered by textfield 1
            function CheckOne() {
                if (event.keyCode == 13)
                    GiveFocus("two");
            }

Edit

I've figured out that the button takes priority for some kind of reason. The button submits as soon as i press enter. But when i press enter in the second textfield it should send the data to the list. Is there a solution so the button doesnt take priority

Heres a fiddle of my full code: https://jsfiddle.net/3jywt8v1/1/

Upvotes: 5

Views: 277

Answers (3)

Collin
Collin

Reputation: 954

Alright i always find it a bit weird to awnser my own questions, but i found a solution to my problem and i wanted to share it with the people that helped me.

I've figured out that in IE5 the <select> isnt very good to use as it comes to adding items with javascript. Thats why im using a <textarea> to store all the data. I've made the <textarea> a readonly field.

This is the Javascript that i use to make it work, and with make it work i mean to add the value of textbox 2 into the textarea.

function AddToList() {
                // Create an Option Object
                var box = document.getElementById("bonregels");
                var val = document.getElementById("two").value.toString();
                if (box.value != "")
                    box.value += "\n";
                box.value = box.value + val;                    
            }

Thanks everyone that helped, you pushed me in the right direction.

Upvotes: -1

The KNVB
The KNVB

Reputation: 3844

Here is my sample code:

<form name=vv>
<select name="qq"></select>
<input type=button value="Go" onclick="add()">
</form>

function add() 
{
 var qq = document.vv.qq;
 var option = new Option("text", "0");
 qq.options[qq.options.length] = option;
}

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1075895

On IE5, you probably need to use the Option constructor rather than createElement:

function AddToList(field) {
    // Create an Option Object
    var val = document.getElementById("two").value;
    var opt = new Option(val, val);
    document.getElementById("selectbox").options.add(opt);
}

It also works on modern browsers.

I think add, what you're using, is the most compatible way to add the option to the list, but if that isn't it, you may need to add it via assignment instead:

var options = document.getElementById("selectbox").options;
options[options.length] = opt;

...but again, I think add was better supported in the 90s.

Upvotes: 3

Related Questions