www.webdeveloper.com
Results 1 to 9 of 9

Thread: IE doesn't recognise javascript created form

  1. #1
    Join Date
    Jun 2006
    Posts
    21

    Unhappy IE doesn't recognise javascript created form

    I'm stuck again... this time the puzzle to solve is why IE cannot write to a dynamically generated form ( "null or not an object" error). Any help with this one much appreciated. Here are the details:

    1. The script and the task it supports works in FF but not IE
    2. The function works in FF and IE if the form is witten as a part of html
    3. Here is the script I'm using to create the form:

    Code:
    function getform(){
    mypara=document.getElementById("it");
    
    myform=document.createElement("form");
    myform.setAttribute("name","data");
    myform.setAttribute("method","post");
    myform.setAttribute("action","http://www.xxx.php");
    myform.setAttribute("target","iwindow");
    mypara.appendChild(myform);
    
    myinput=document.createElement("input");
    myinput.setAttribute("type","hidden");
    myinput.setAttribute("name","pT");
    myform.appendChild(myinput);
    
    }

    It is executed onload.

    4. The form "exists" in IE which I tested adding submit button and hardcoding value for pT elemet. In other words, as far as I know, it is properly constructed and does what is supposed to do.

    5. The problem:

    In another part of the script I am writing an array of variables (string) into the form with the following:

    Code:
    document.data.pT.value = packed;
    IE throws an error: ".pT is null or not an object" but again, it works in FF and if the form is "hanwritten" into the page.


    Any thoughts?
    Thanks

  2. #2
    Join Date
    Dec 2004
    Posts
    8,637
    What DOCTYPE are you using?
    Why are you creating a form element without a container?
    What is the HTML that goes with the following?

    mypara=document.getElementById("it");

    Did you try the following?

    document.forms["data"].elements["pT"].value = packed;

  3. #3
    Join Date
    Jun 2006
    Posts
    21
    Hi phpnovice! Thanks again for interest.

    I tried your suggestion but it didn't make a difference. Now the error is: 'document.data.forms.elements' is null or not an object ... again, only in IE (6.0.28 version).



    re: DOCTYPE

    Original page is in:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    but even with a "degraded standard" it is not working:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


    re: container and html

    mypara is a div with id="it"

    it's just <div id="it"></div>

    the whole function is sitting in the html header between <script></script> tags...

    the "post" method supposed to send data to a server which opens a new page in iframe id="iwindow"

    IE just can't recognise the element to write into it... The forml works if I create a "submit button" and include some values with the getform() script but I can't write to it new values later on. Also, it works fine if I have a form wirtten in html...

  4. #4
    Join Date
    Dec 2004
    Posts
    8,637
    OK, I have encountered this same problem just recently when doing some work for a client. The problem is that IE doesn't update its outerHTML property value for changes to the name attribute. In my case, I was cloning existing elements and having to increment the numeric suffix of the element names and, thus, I had to do a replace of the old name with the new name in the outerHTML property. In your case, you just need to add the name attribute to the outerHTML property. Here is what I came up with for you:
    Code:
    function getform(){
    var mydiv=document.getElementById("it");
    
    var myform=document.createElement("form");
    myform.setAttribute("name", "data");
    myform.setAttribute("method", "post");
    myform.setAttribute("action", "http://www.xxx.php");
    myform.setAttribute("target", "iwindow");
    
    var myinput=document.createElement("input");
    myinput.setAttribute("type", "hidden");
    myinput.setAttribute("name", "pT");
    
    myinput = myform.appendChild(myinput);
    myform = mydiv.appendChild(myform);
    
    myinput.outerHTML = myinput.outerHTML.replace(/>/, " name="+myinput.name+">");
    myform.outerHTML = myform.outerHTML.replace(/>/, " name="+myform.name+">");
    }
    Of course, that last part would be for IE only.

  5. #5
    Join Date
    Jun 2006
    Posts
    21

    Talking You are a Champ, phpnovice!

    Ha, now the script works as it should! I can now safely create forms on the go and it works in FF and IE (and N8.1). Another puzzle solved thanks to you!

    Much appreciate!

    Cheers

  6. #6
    Join Date
    Dec 2004
    Posts
    8,637
    You're welcome.

    Cheers.

  7. #7
    Join Date
    Jul 2006
    Location
    East Lansing, MI
    Posts
    110
    I have pretty much the same code except that i already have a form created and i am pulling fields from an array that my server returned. I had it all working in Firefox, but stumbled upon the name problem with IE. I saw this post and i did the suggested and it works in IE now but not in FF. I get an error in FF that says "newInput.outerHTML has no properties". Do i need to put a condition in to only run the outerHTML code when the client browser is IE? Thanks!

    Code:
    {
    	var myDiv = document.getElementById("tab2")
    	var i = 0;
    	while(i<r.form_array.length)
    	{
    	//CREATE BREAKS
    	newBreak = document.createElement('br');
    	newBreak2 = document.createElement('br');
    	
    	//CREATE LABEL
    	newLabel = document.createElement('label');
    	newLabelText = document.createTextNode(r.form_array[i][0]);
    	newLabel.appendChild(newLabelText);
    	
    	//CREATE FORM ELEMENT AND ASSIGN PROPERTIES
    	newInput = document.createElement('input');
    	newInput.setAttribute('name',r.form_array[i][1]); //UNRESOLVED
    	newInput.setAttribute('maxLength',r.form_array[i][3]);
    	newInput.setAttribute('className','textField'); //FOR HORRIBLE IE
    	newInput.setAttribute('class','textField'); //FOR WONDERFUL FIREFOX
    	newInput.setAttribute('onBlur',r.form_array[i][2]); //FOR WONDERFUL FIREFOX
    	
    	//APPEND TO DOCUMENT
    	myDiv.appendChild(newLabel);
    	myDiv.appendChild(newBreak2);
    	newInput = myDiv.appendChild(newInput);
    	myDiv.appendChild(newBreak);
    	
    	newInput.outerHTML = newInput.outerHTML.replace(/>/, " name ="+newInput.name+">");
    	
    	i++;
    	}
    }

  8. #8
    Join Date
    Dec 2004
    Posts
    8,637
    Quote Originally Posted by dicicco2
    Do i need to put a condition in to only run the outerHTML code when the client browser is IE?
    Yes, that is correct.

  9. #9
    Join Date
    Apr 2007
    Posts
    1

    element.outerHTML.replace breaks attachEvent

    once you use outerHTML.replace to force element.name to be recognized, it will break the attachEvent functionality in IE. I am currently at an em passe because I cannot seem to use the outerHTML.replcace fix to allow me to getElementsByName AND attachEvent on the same element

    If someone knows different, or knows how...please post here?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles