jquery-problem using val() in IE6

Question

I'm trying to get a textarea's value to update using jquery as outlined in the below code:

<button type="button" onclick="setLine();">Set</button>
<button type="button" onclick="showLine();">fire!</button><p></p>
    <textarea id="hello">

    </textarea>
    <script type="text/javascript">
            $('#hello').val("hi there");
        </script>
    <script type="text/javascript">
        function showLine()
        {
            alert($('#hello').val());
        }
        function setLine()
        {
            $('#hello').val('foo');
        }
    </script>

This code works fine in all major browsers except IE6.

In Ie6 the textarea will not update with the buttonclick and the alert gives a blank/null string. However in other browsers, clicking "set" changes it to "foo" which is then shown in the alert box.

Does anyone know why this is specific to this browser, or what may be wrong with the code? I have my suspicions about the .val()

Any help would be appreciated.

Here's your example on jsbin: http://jsbin.com/ivaso I don't have IE6 handy to test it. — cgp, Jun 05 '09 at 12:53

Philippe Leybaert · Answer 1 · 2009-06-05T12:57:25.937

1

you should call val() inside the document.ready event:

$(document).ready(function() {

    $('#hello').val("hi there");

});

Just to make things clear: I'm only talking about the first (global) call to val(). The function declarations shouldn't be inside the document.ready function.

edited Jun 05 '09 at 12:57

answered Jun 05 '09 at 12:51

Philippe Leybaert

168,566
31
210
223

As long as the script is loaded after the textarea, it should be fine, though your point is probably valid anyway. – cgp Jun 05 '09 at 12:53
1

I've had issues with IE, even if the script is loaded after the HTML elements. – Philippe Leybaert Jun 05 '09 at 12:54

MrHus · Answer 2 · 2009-06-05T13:10:50.310

I don't know why you're code is not working in IE6 but its not proper jQuery. I can't test this right now but this should work with some changes:

<button type="button" id="setline">Set</button>
<button type="button" id="showline">fire!</button>

<textarea id="hello"></textarea>

<script type="text/javascript">
    $(document).ready(function(){
       $('#hello').val("hi there");

       $('#showline').click(function()
       {
           alert($('#hello').val());
       });

       $('#setline').click(function()
       {
           $('#hello').val('foo');
       });
   });

Buttons should not have onclick events in jQuery you should bind them like shown above. And always use document.ready!

There's nothing wrong with having onclick attributes, even when using jQuery. Of course, it's better to use jQuery's event handling, but the "old" style isn't necessarily wrong. — Philippe Leybaert, Jun 05 '09 at 13:05

score 0 · Answer 3 · answered Jun 05 '09 at 14:14

0

Do you by any change have more than one element with id "hello" ?

answered Jun 05 '09 at 14:14

Philippe Leybaert

168,566
31
210
223

ok, but the code above works in IE6. Try http://jsbin.com/ivaso (as altCognito suggested) – Philippe Leybaert Jun 05 '09 at 14:32

score 0 · Accepted Answer · answered Jun 05 '09 at 20:09

0

I think that you must use .html() instead of .val() ... Try and say what is happened?

answered Jun 05 '09 at 20:09

sasa

2,443
5
23
35

when i use .html() it deletes everthing from the screen and adds the code to the newly blank page – kyassuru Jun 08 '09 at 08:09
4

I wish that you would have explained in detail what you fiddled with to get it to work. I'm having a similar issue. – Feb 23 '11 at 07:52

jquery-problem using val() in IE6

4 Answers4

Linked