Javascript onload

driveflexfuel

New Member
Messages
159
Reaction score
0
Points
0
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.

Code:
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();
};
 
Last edited:

driveflexfuel

New Member
Messages
159
Reaction score
0
Points
0
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.
 

essellar

Community Advocate
Community Support
Messages
3,295
Reaction score
227
Points
63
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

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
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:
Code:
    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.

Code:
		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.

Code:
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,
Code:
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'});
 
Last edited:
Top