Javascript onload

[driveflexfuel]

I have been trying to get this to work in IE without any luck. It works great in FF, Opera, and Safari. If anyone can give me a hand with this I would appreciate it.

The following code loads is looped to add the onsubmit function and name to all my paypal forms currently being 30 per page. Before you all ask this is being created as a plugin so i can not just edit the buttons by hand.

I have been playing further and it seems that IE is not responding to any of the dynamic functions I am using. I also created a text box that i fill in and i receive the error "document.pp_form1.text.value is null or not an object."

Is there a special method for IE. I will list the entire script below.

function create_page(){
	var frm_count = document.forms.length;
	alert(frm_count);
	var i = 0; var x = 1;
	while (i<=frm_count-1){
		var frmName = document.forms[i];
		alert('form'+i);
		if(frmName.amount != null && frmName.item_name != null){
			alert('entered form creation');
			//frmName.setAttribute('onsubmit',"this.target = 'paypal'; return ReadForm(this);");
			frmName.setAttribute('name','pp_form'+x);
			
			//Create Multi value if needed
			if(frmName.multi == null){
				var element1 = document.createElement("input");
				element1.setAttribute("type", 'text');
				element1.setAttribute("value", '0');
				element1.setAttribute("name", 'multi');
				frmName.appendChild(element1);
			}
			
			//Create Base Amount
			if(frmName.amount != null){
				var element2 = document.createElement("input");
				element2.setAttribute("type", 'text');
				element2.setAttribute("value", frmName.amount.value);
				element2.setAttribute("name", 'baseamt');
				frmName.appendChild(element2);
			}
			
			//Create Base Description
			if(frmName.item_name != null){
				var element3 = document.createElement("input");
				element3.setAttribute("type", 'text');
				element3.setAttribute("value", frmName.item_name.value);
				element3.setAttribute("name", 'basedes');
				frmName.appendChild(element3);
			}
			x++;
		}
		i++;
	}
}

window.onload = function(){
create_page();
};

 

[descalzo]

I think you have to use a function when you set the 'onsubmit' handler since IE won't let you use a JS string.

http://reference.sitepoint.com/javascript/Element/setAttribute

 

[driveflexfuel]

I have tried that with no success. It seems like it is adding the information but my JS will not pull the information from the form. If i name something and call it in another function it shows null but if i submit the form is sends the name correctly.

 

[descalzo]

name or id?

 

[driveflexfuel]

Name

 

[essellar]

Part of the problem may simply be that .text is being interpreted as a property of the form rather than as part of its .elements collection. It's almost always safer to refer to a field using the syntax form_identifier.elements["field_name"] than to use form_identifier.field_name -- there's never any ambiguity, it eliminates the temptation to eval(), and it works everywhere.

 

[misson]

Take a closer look at the document descalzo linked to. Setting some attributes on form input elements using setAttribute won't work in IE. Instead, use the attribute-mapped JS properties:

    element.type = 'hidden';
    element.name = 'foo';

This is part of the larger problem IE has with dynamically created and altering form elements, namely that it doesn't handle them properly. In particular, if you dynamically add an element to a form, you can't access it by name. Fortunately, you can add the element by name yourself (see code at end of post).

The if statements in the "Create Base Amount" and "Create Base Description" sections are redundant; if either corresponding element isn't in the form, the parent block will be skipped.

		if(frmName.amount != null && frmName.item_name != null){
                        ...
			//Create Base Amount
			if(frmName.amount != null){
                            ...
			}
			
			//Create Base Description
			if(frmName.item_name != null){
                            ...
			}

You could reuse the variable that holds the newly created elements rather than having separate elementN variables, except that you should instead refactor the repeated code to create inputs into a function.

function create_input(form, name, value) {
    var input = document.createElement("input");
    // unnecessary; 'text' is the default
    //input.type = 'text';
    input.name = name;
    input.value = value;
    form.appendChild(input);
    if (!form.elements[name]) {
        // handle IE bug where dynamically added form inputs
        // can't be referenced by name
        form.elements[name] = input;
    }
}

function create_page(){
    var frm_count = document.forms.length;
    dbgMsg('forms.length: ' + frm_count);
    for (var i=0, ppFormCnt=1; i<=frm_count-1; ++i){
        var form = document.forms[i];
        dbgMsg('form'+i);
        if(form.amount != null && form.item_name != null){
            dbgMsg('entered form creation');
            form.name = 'pp_form' + ppFormCnt++;
            form.onsubmit = function() {
                                   report('submitting '+this.name);
                                   this.target = 'paypal';
                                   return ReadForm(this);
                               };
            
            //Create Multi value if needed
            if(form.multi == null){
                create_input(form, 'multi', 0);
            }
            
            //Create Base Amount
            create_input(form, 'baseamt', form.amount.value);
            
            //Create Base Description
            create_input(form, 'basedes', form.item_name.value);
        }
    }
}

Note that you should refer to the dynamically added form elements by form.elements.name rather than form.name.

Alternatively,

function create_input(form, attrs) {
    var input = document.createElement("input");
    for (p in attrs) {
        input[p] = attrs[p];
    }
    form.appendChild(input);
    if (! form.elements[attrs.name]) {
        form.elements[attrs.name] = input;
    }
}

...
            //Create Multi value if needed
            if(form.multi == null){
                create_input(form, {name: 'multi', value: 0, type: 'hidden'});
            }
            
            //Create Base Amount
            create_input(form, {name: 'baseamt', 
                                value: form.amount.value, 
                                type: 'hidden'});
            
            //Create Base Description
            create_input(form, {name: 'basedes', 
                                value: form.item_name.value,
                                type: 'hidden'});

 

[n.urked]

Hmm, you should move on to jQuery

http://www.learningjquery.com/2006/09/introducing-document-ready

This will solve all your problems.