[SOLVED] Checking if dynamically created form field exists... not working in IE

[arianhojat]

I make a hidden input field dynamically via:

 

var inputHidden = document.createElement('input');
inputHidden.setAttribute('type', 'hidden');
inputHidden.setAttribute('name', 'addReqs[]'); //has a '[]' so on POST, php can access many of these dynamic elements in one php array
inputHidden.setAttribute('value', SomeVal ); 

 

Then if i click a button, i have some javascript code that loops through these elements.

var toAdd = document.forms[0].elements['addReqs[]'];//code below checks if value already exists in a hidden form field in the page.
if( toAdd )
{	
alert( 'toAdd111' );
for(var i=0; i < toAdd.length; i++)
{ 		
	if(toAdd[i].value == requirementsVal)
	return true;	
}	
}

 

 

BUT Internet Explorer (6), refuses to confirm those fields exists, it wont even loop.

I have a feeling IE has problem with way its created so i tried following below as well to no avail...

inputHidden.name = 'addReqs[]';
inputHidden.value = SomeVal; 

 

 

Anyone have any ideas?

Thanks in advance,

Ari

[mainewoods]

do it like this:

var inputHidden = document.createElement('input');
inputHidden.type = 'hidden';

 

http://www.quirksmode.org/bugreports/archives/2005/03/setAttribute_does_not_work_in_IE_when_used_with_th.html

[arianhojat]

i figured out my problem...

 

Creating input fields with a name property dynamically in javascript sucks in IE6.

 

For example:

theNode = document.createElement('input');

theNode.setAttribute('name', 'addedReqs[]'); //using array value so when i POST, php knows to parse as an array

or

theNode = document.createElement('input');

theNode.name = 'addedReqs[]';

dont work in IE6 if you plan to do stuff dynamically be4 posting.

You can submit the page, and it posts values correctly. But be4 posting, if u need to do stuff like loop through those dynamically made fields with document.forms[0]['addedReqs[]'], you cant find them cause it never sets name correctly in the DOM.

 

Need to use in IE6 specifically:

theNode = document.createElement('<input name="xxx">');

 

Here is a function i found to help name elements and websites below help explain why problem occurs:

function createNamedElement(type, name)

{

  var element = null;

  //Try the IE way; this fails on standards-compliant browsers

  try {

      element = document.createElement('<'+type+' name="'+name+'">');

  } catch(e) {

  }

  if (!element || element.nodeName != type.toUpperCase()) {

      // Non-IE browser; use canonical method to create named element

      element = document.createElement(type);

      element.name = name;

  }

  return element;

}

theNode =createNamedElement('input', 'xxx')

 

 

http://www.thunderguy.com/semicolon/2005/05/23/setting-the-name-attribute-in-internet-explorer/

http://alt-tag.com/blog/archives/2006/02/ie-dom-bugs/

[arianhojat]

whoops, just updating this cause had instance again where dynamic form fields processed with javascript after creating it messed up in IE6:

 

i think this one is bulletproof and should handle all situations.

 

 

Test usage:

var lastIndexNewTeachers = ( (insertNewTeachers.length > 0 ) ? (parseInt(insertNewTeachers[insertNewTeachers.length-1].value,10)+1) : 0 );//next value has one more than previous val in this dynamically created array. This value will always be 0 if IE6 cant find dynamic nodes correctly.

 

var insertInput  = elem('input', 'insertNewTeachers[]', {type: 'hidden', value: ++lastIndexNewTeachers }, {}, null,

{onclick: "function(){ alert(this.AttachedProperty ) }

);

insertInput.AttachedProperty = getTodaysDate();

 

 

//functions used

function createNamedElement(type, name)

{

  var element = null;

  //Try the IE way; this fails on standards-compliant browsers

  try {

      element = document.createElement('<'+type+' name="'+name+'">');

  } catch(e) {

  }

  if (!element || element.nodeName != type.toUpperCase()) {

      // Non-IE browser; use canonical method to create named element

      element = document.createElement(type);

      element.name = name;

  }

  return element;

}

 

function elem(type, name, attrs, style, text, handlers) {

    var e = createNamedElement(type, name);

    if (attrs) {

        for (key in attrs) {

            if (key == 'class') {

                e.className = attrs[key];

    } else if (key == 'name') {

            } else if (key == 'id') {

                e.id = attrs[key];

            } else {

                e.setAttribute(key, attrs[key]);

            }

        }

    }

    if (style) {

        for (key in style) {

            e.style[key] = style[key];

        }

    }

    if (text) {

        e.appendChild(document.createTextNode(text));

    }

 

    if (handlers) {

        for (key in handlers) {

//alert('setting handler');

eval( 'var x =' + handlers[key] );

//eval(  "var x = function(){ alert('xxx') };" );

eval('e.'+key+'= x');

//e.onclick = x;

            //e.onclick = function(){ alert('xxx') };

        }

    }

 

    return e;

}