adding items to <select> in IE5

Question

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/

Might be worth checking: I think IE5 had JavaScript disabled by default. — Mave
– Mave, Commented Jun 15, 2015 at 6:59
@Mave Thanks for pointing that out, i've checked if the javascript is disabled but its not. The javascript is enabled on my device — Collin
– Collin, Commented Jun 15, 2015 at 7:02
Is it document.getElementById("selectbox").add(opt)? MDN states the add is on the HTMLSelectElement, not the HTMLOptionsCollection — CodingIntrigue
– CodingIntrigue, Commented Jun 15, 2015 at 7:02

T.J. Crowder · Accepted Answer · 2015-06-15 07:04:50Z

3

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.

edited Jun 15, 2015 at 7:04

answered Jun 15, 2015 at 7:02

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Collin Over a year ago

I've got the event triggered on the ENTER key, but when i press enter the button takes priority and submits the items. But the funny thing is the fields you see arent event in a <Form>. Do you know a way to make it that the button doesnt take priority

T.J. Crowder Over a year ago

@CKY: Don't make the button a type="submitt", use type="button". When you're ready to submit the form, call submit() on the form element.

Collin Over a year ago

Thanks for pointing it out, ive discoverd that the event is triggered really fast so IE5 kant keep up with it. So is there a way to delay the event

T.J. Crowder Over a year ago

@CKY: What do you mean "really fast"? Which event? Yes, there are ways to delay responding to events, but I can't see any reason you'd need to here.

The KNVB · Accepted Answer · 2015-06-15 07:14:27Z

0

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

answered Jun 15, 2015 at 7:14

The KNVB

3,8523 gold badges35 silver badges64 bronze badges

6 Comments

Collin Over a year ago

How can this even work, i dont understand it completly. Where do you get the text from and what does document.vv.qq mean?

The KNVB Over a year ago

vv is the form name (i.e. name="vv" in the form tag) qq is the field name (i.e. name="qq" in the select tag) In old IE, it does not support DOM very well, so your code does not work.

Collin Over a year ago

But my code its more complicated then you'll expect ill make a fiddle and put it in the question

Collin Over a year ago

That doesnt really help if im honest, In my situation im using a textbox and the item should be added when i press a specific key.

Collin Over a year ago

Not to be rude and i really appreciate your help, but the fiddle doesnt even work

|

Collin · Accepted Answer · 2015-06-15 08:48:29Z

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.

Collectives™ on Stack Overflow

adding items to <select> in IE5

3 Answers 3

4 Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related