SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member PSDP's Avatar
    Join Date
    Aug 2005
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A few problems with forms

    hi, i need some help with javascript...

    1. how do i reset a hidden field??
    I've tried the reset() function but it's not working for hiddn fields?

    2. form.elements['xxx'] does not work in IE6???
    is that true? it works perfectly in firefox tho

    3. looping JSON in IE6
    its weird, becuase it IE6 adds an extra value to it...

    well, i have only IE6 and firefox, so im not sure about other browsers

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    1. You can use the defaultValue property instead.

    Code javascript:
    function resetField(el) {
        el.value = el.defaultValue;
    }

    2. The following test code works perfectly fine in IE6, which uses form.elements['test'].value

    Code html4strict:
    <html>
    <head>
    </head>
    <body>
    <form id="myForm">
        <input type="text" name="test" value="test value">
    </form>
    <script>
    var form = document.getElementById('myForm');
    alert(form.elements['test'].value);
    </script>
    </body>
    </html>

    3. If an array is used, IE will create a undefined value for the list item when a trailing comma is used.

    Code javascript:
    array = [
        2,
        3,
        4
    ] // 3 items in IE
    array = [
        2,
        3,
        4,
    } // 4 items in IE, 3 items in most other browsers

    Does that relate to your JSON issue in some way?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member PSDP's Avatar
    Join Date
    Aug 2005
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you for your quick response...

    but i still have problem with this:

    var ddd = [1,2];
    for (var i in ddd) alert('test');

    dunno why, but it alerts 3 time in IE6, i think it has something to do with jquery interface, because when i remove it, it works.

  4. #4
    SitePoint Member PSDP's Avatar
    Join Date
    Aug 2005
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, and take a look at this one please..
    it's not working in IE6?
    Code HTML4Strict:
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    </head>
    <body>
    <script type="text/javascript">
    function add() {
    	var form = document.forms[0];
    	var ele = document.createElement('INPUT');
    	ele.name='f[]';
    	ele.value='test';
    	form.appendChild(ele);
    	alert (form.elements['f[]'].length); //return 2 forever
    }
    </script>
     
    <form>
    <input name="f[]" value="test" /><input name="f[]" value="test" />
    </form>
    <input type="button" onclick="add()" value="add" />
     
    </body>
    </html>

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    You shouldn't use the for (... in ...) construct to iterate through arrays. That's designed to iterate through objects, and arrays when seen as objects can have more than just the index values as their properties.

    You have two options.

    1. Use a more bulletproof construct instead by using a for loop

    Code javascript:
    var array = ..., item, i;
    for (i; i < els.length; i += 1) {
        item = els[i];
        // do stuff with item
    }

    2. Use the array foreach method instead. You don't need to use all of the arguments provided, like index and array, they're just there to let you know what you can use.

    Code javascript:
    array.forEach(doSomething);
    function doSomething(element, index, array) {
        // do stuff with element, that being one of the array values
    }

    You do have to be careful about browsers that don't understand the array forEach method, so http://web.archive.org/web/200801201...:Array:forEach provides some compatibility code so that browsers like IE can keep up.

    Code javascript:
    if (!Array.prototype.forEach)
    {
      Array.prototype.forEach = function(fun /*, thisp*/)
      {
        var len = this.length;
        if (typeof fun != "function")
          throw new TypeError();
     
        var thisp = arguments[1];
        for (var i = 0; i < len; i++)
        {
          if (i in this)
            fun.call(thisp, this[i], i, this);
        }
      };
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    I suspect that the other problem with form.elements not being updated is to do with IE bugs in dynamically created form content.

    I did deal with it in a recent post, #20 from "how to display onclick result". I'll explore a solution soon.
    Last edited by paul_wilkins; Oct 24, 2008 at 21:27.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Here is the solution.

    Code javascript:
    var ele = createFormElement('input', 'f[]');

    The createFormElement function does things in such a way that the broken IE implementation is properly dealt with.

    Code javascript:
    function createFormElement(tag, name) {
       var el = null;
       try {
          el = createIEElement(tag, name);
       } catch (e) {
          el = createDOMElement(tag, name);
       }
       return el;
    }
    function createIEElement(tag, name, type) {
        var args = [tag];
        if (name) {
            args[args.length] = 'name="' + name + '"';
        }
        if (type) {
            args[args.length] = 'type="' + type + '"';
        }
        return document.createElement('<' + args.join(' ') + '>');
    }
    function createDOMElement(tag, name, type) {
        var el = document.createElement(tag);
        el.type = type;
        el.name = name;
        return el;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Member PSDP's Avatar
    Join Date
    Aug 2005
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    great! thank you so much ^______^


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •