A few problems with forms

**PSDP** · Oct 24, 2008, 19:23

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

**paul_wilkins** · Oct 24, 2008, 19:29

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?

**PSDP** · Oct 24, 2008, 20:01

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.

**PSDP** · Oct 24, 2008, 20:30

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>

**paul_wilkins** · Oct 24, 2008, 20:32

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

**paul_wilkins** · Oct 24, 2008, 20:53

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.

**paul_wilkins** · Oct 24, 2008, 22:25

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

**PSDP** · Oct 24, 2008, 23:48

great! thank you so much ^______^

The SitePoint Forums have moved.

User Tag List

Thread: A few problems with forms

Thread Tools

Display

A few problems with forms

Bookmarks

Bookmarks

Posting Permissions