createElement and input buttons help [Archive]

picobal

07-14-2008, 09:20 PM

The following function takes orders submitted from a form and calcs the total and throws all this info into a string and displays it using document.write. From here I need the customer to be able to click a button to email the string or cancel. I was told to use DOM createElement and appendChild but I'm having issues getting any createElement to appear on the page (DOM is new to me). Any help would be appreciated. Problem areas color highlighted.
//*************************
function AddToCart(thisForm) {
var iNumberOrdered = 0;
var strTotal = 0;
var strShipping = 0;
var i=0;
var strOutput = "";

for (i=0; i<parseFloat(thisForm.elements.length); i++)
{

if (parseFloat(thisForm.elements[i].value) > 0)
{
iNumberOrdered = iNumberOrdered + parseFloat(thisForm.elements[i].value);
strTotal = strTotal + parseFloat(thisForm.elements[i].value)*parseFloat(thisForm.elements[i].name);
}
}

strOUtput = "<BODY id='cart'><FORM action='https://www.paypal.com/cgi-bin/webscr' method='post'>";

strOutput = "<p align='right'><TABLE CLASS=\"nopcart\"><TR>" +
"<TD CLASS=\"nopheader\"><B>"+" NAME-SIZE "+"</B></CENTER></TD>" +
"<TD CLASS=\"nopheader\"><B>"+" QUANTITY "+"</B></CENTER></TD>" +
"<TD CLASS=\"nopheader\"><B>"+" PRICE " +"</B></CENTER></TD></TR></TABLE>";

if ( iNumberOrdered == 0 )
{
strOutput += "<TR><TD COLSPAN=6 CLASS=\"nopentry\"><CENTER><BR><B>Your cart is empty</B><BR><BR></CENTER></TD></TR>";
}

for (i=0; i<parseFloat(thisForm.elements.length); i++)
{

if (parseFloat(thisForm.elements[i].value) > 0)
{
var StrItem = ("<br>" + thisForm.elements[i].id+"--------"+parseFloat(thisForm.elements[i].value) + "--------$" + thisForm.elements[i].name + ".00 \n");
strOutput += "<p align='right'><TD COLSPAN=8 CLASS=\"nopentry\">" + StrItem + "</TD>";
}
}
strOutput += "<TR><TD><BR><BR></TD></TR>";
strOutput += " Total: $" + strTotal + ".00";
if ( strTotal < 100 )
strShipping = 15;
if (strTotal > 100 )
strShipping = 25;
strOutput += "<TR><TD><BR></TD></TR>";
strOutput += " Shipping: $" + strShipping +".00";
strTotal = strTotal + strShipping;
strOutput += "<TR><TD><BR></TD></TR>";
strOutput += " Grand Total: $" + strTotal + ".00";
strOutput += "<TR><TD><BR></TD></TR>";
strOutput += "<TR><TD><BR></TD></TR>";

strOutput += "<INPUT type='submit' value='PLACE ORDER VIA PHONE' onSubmit='mailto:picobal@hotmail.com'>";
strOutput += "<INPUT type='button' value='CANCEL ORDER' onClick='http://allformypet.com/'>";
strOutput += "</FORM></BODY>";

document.write(strOutput);

var elem = document.createElement("input");
elem.value = 'PAY ME';
elem.type = 'submit';
document.appendChild(elem);

document.close();

}

rnd me

07-14-2008, 11:39 PM

document.body.appendChild(elem);

Kor

07-15-2008, 07:50 AM

I'd prefer the more precise DOM 1+ reference
document.getElementsByTagName('body')[0]
instead of
document.body

But it makes no sense to append an form's element outside the form

The problem is that it is not a wise idea to mix the static methods (document.write()) with DOM dynamic methods (createElement(), appendChild()). You should have used either of them, bot not both in the same function.

picobal

07-17-2008, 08:53 PM

I would prefer not to use DOM (new concept to me, but seems really powerful) but the buttons I tried to create (blue highlights) appeared on the page, but had no functionality. Any way not to use DOM?

Kor

07-18-2008, 04:14 AM

You were not attentive. What functionality you expect from that submit button the moment you have appended it outside the form?