...

View Full Version : Problem with accessing form through Javascript with Netscape.



Jenny1945
02-27-2007, 09:28 PM
Hi,

I'm in way over my head on this one and this 62 year old grandma is starting to sink.
What was needed was a centralized javascript routine that would build HTML code to create a table cell containing a form and button that would be configured on a only a few changing variables.

Through a lot of searching and trial and error I came up with this:
The calling code from HTML looked like this:

<script>cart('TV-471','Lost in Oz','$14.99',1);</script>

The Javascript routine looks like this:

function cart(item_id, name, price, disks)
{
var is_full = ((price > "$0.00") ? true : false);
var cost = ((disks * 6.00)-0.01);
var sprice = "$"+cost.toString();

document.write('<td width="172" style="font-weight: bold" align="center">');

document.write('<FORM ACTION="HTTP://www.ecartsoft.com/cgi-bin/cart.cgi" METHOD="POST" style="text-align: justify; margin-top: 0; margin-bottom: 0; margin: 0px; padding: 0px;">');
document.write("<INPUT TYPE='HIDDEN' NAME='acc' VALUE='86794'>");
document.write("<INPUT TYPE='HIDDEN' NAME='page' VALUE='add to cart'>");
document.write('<INPUT TYPE="HIDDEN" NAME="required" VALUE="item_name,item_price">');
document.write('<INPUT TYPE="HIDDEN" NAME="minimum_quantity_limit" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="max_quantity_limit" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="quantity" VALUE="1">');
document.write('<INPUT TYPE="HIDDEN" NAME="item_sku" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="item_name" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="item_description" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="item_price" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="item_weight" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="item_tax_id" VALUE="non-taxable">');
document.write('<INPUT TYPE="HIDDEN" NAME="item_discount" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="item_image_url" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="Coupon_Code" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="secret_word" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="ship_free" VALUE="NO">');
document.write('<INPUT TYPE="HIDDEN" NAME="handling_fee" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="drop_ship" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="item_vendor" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="ship_calculation_method" VALUE="USPSOnline">');

document.write('<select name="package" size="1" style="width: 170" style="font-weight: 700">');
if (is_full) document.write('<option selected>Full Package '+price+'</option>');
if (disks)
if (is_full) {document.write('<option>Just Disks '+sprice+'</option>');}
else {document.write('<option selected>Just Disks '+sprice+'</option>');}
var click = 'onclick=\'addToCart(\"'+item_id+'\",\"'+name+'\",this.form);\'';
document.write('</select><input type="image" src="images/AddToCart.gif" alt="Add to Cart" value="Add to Cart" '+click+' style="margin-top:0; margin-bottom:0; float:center; height:32"></form></td>');
return;
}

function addToCart(item_id, name, formref)
{
var tmp = formref.package.options[formref.package.selectedIndex].text;
var ssplit = tmp.split("$");
// ssplit[0] now contains description extender
// ssplit[1] now contains price
formref.item_price.value = ssplit[1];
formref.item_description.value = ssplit[0];
formref.item_sku.value=item_id;
formref.item_name.value=name;
formref.submit();
}

This code works in both IE and Firefox.
Originally I used 'form' instead of 'formref' and would get an error that form did not exist in Netscape.
After changing 'form' to 'formref' the error is gone, but no button appears either.

I've searched the net from end to end I everything I try is either ineffectual or breaks the code.

Hopefully someone that actually knows what they are doing can help me.

Thanks
Jenny
PS: Preferably the fix is in the javascript routine and not the calling routine which would involve changing several hundred pages of code.

nikkiH
02-27-2007, 09:42 PM
While the code really needs a complete overhaul to be DOM compliant, for now, try changing the image submit to a real submit button and removing that style.
Verify that a normal button works. If so, the problem is either in your relative image path or the inline style.

glenngv
02-27-2007, 10:12 PM
This is the cause of the error:

var click = 'onclick=\'addToCart(\"'+item_id+'\",\"'+name+'\",this.form);\'';
document.write('</select><input type="image" src="images/AddToCart.gif" alt="Add to Cart" value="Add to Cart" '+click+' style="margin-top:0; margin-bottom:0; float:center; height:32"></form></td>');
return;
The this.form is attached to an input type=image. Although this is an input tag, this.form is not valid for input type=image. If you use a normal submit button, it will work. But if you really want to have an image submit button you need to change this.form to the full reference of the form and name the form.



document.write('<FORM name="cartForm" ACTION="HTTP://www.ecartsoft.com/cgi-bin/cart.cgi" METHOD="POST" style="text-align: justify; margin-top: 0; margin-bottom: 0; margin: 0px; padding: 0px;">');
...
var click = 'onclick=\'addToCart(\"'+item_id+'\",\"'+name+'\",document.cartForm);\'';

Jenny1945
02-28-2007, 12:20 AM
Thank you for answering so swiftly.

I think I followed the changes correctly.

function cart(item_id, name, price, disks)
{
var is_full = ((price > "$0.00") ? true : false);
var cost = ((disks * 6.00)-0.01);
var sprice = "$"+cost.toString();

document.write('<td width="172" style="font-weight: bold" align="center">');

document.write('<FORM name="cartForm" ACTION="HTTP://www.ecartsoft.com/cgi-bin/cart.cgi" METHOD="POST" style="text-align: justify; margin-top: 0; margin-bottom: 0; margin: 0px; padding: 0px;">');
document.write("<INPUT TYPE='HIDDEN' NAME='acc' VALUE='86794'>");
document.write("<INPUT TYPE='HIDDEN' NAME='page' VALUE='add to cart'>");
document.write('<INPUT TYPE="HIDDEN" NAME="required" VALUE="item_name,item_price">');
document.write('<INPUT TYPE="HIDDEN" NAME="minimum_quantity_limit" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="max_quantity_limit" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="quantity" VALUE="1">');
document.write('<INPUT TYPE="HIDDEN" NAME="item_sku" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="item_name" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="item_description" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="item_price" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="item_weight" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="item_tax_id" VALUE="non-taxable">');
document.write('<INPUT TYPE="HIDDEN" NAME="item_discount" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="item_image_url" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="Coupon_Code" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="secret_word" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="ship_free" VALUE="NO">');
document.write('<INPUT TYPE="HIDDEN" NAME="handling_fee" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="drop_ship" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="item_vendor" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="ship_calculation_method" VALUE="USPSOnline">');

document.write('<select name="package" size="1" style="width: 170" style="font-weight: 700">');
if (is_full) document.write('<option selected>Full Package '+price+'</option>');
if (disks)
if (is_full) {document.write('<option>Just Disks '+sprice+'</option>');}
else {document.write('<option selected>Just Disks '+sprice+'</option>');}
var click = 'onclick=\'addToCart(\"'+item_id+'\",\"'+name+'\",document.cartForm);\'';
document.write('</select><input type="image" src="images/AddToCart.gif" alt="Add to Cart" value="Add to Cart" '+click+' style="margin-top:0; margin-bottom:0; float:center; height:32"></form></td>');
return;
}

function addToCart(item_id, name, formref)
{
var tmp = formref.package.options[formref.package.selectedIndex].text;
var ssplit = tmp.split("$");
// ssplit[0] now contains description extender
// ssplit[1] now contains price
formref.item_price.value = ssplit[1];
formref.item_description.value = ssplit[0];
formref.item_sku.value=item_id;
formref.item_name.value=name;
formref.submit();
}


However I am still getting the same error in the netscape javascript log and no button on the screen.
--------------------------------------------
Error: missing name after . operator
Source File: http://jennyvision.com/cart2.js
Line: 47, Column: 20
Source Code:
var tmp = formref.package.options[formref.package.selectedIndex].text;
--------------------------------------------

PS: This test was done on one of the single title screen page pages. On the list pages this routines is called once for every title. Will having the same name be an issue, and if it is is there away around it? (I begin to perceive one using random numbers but how to be certain it is not repeated?)

Thanks again
Jenny

One last PS: How do I create those nice boxes for the code in these messages? I don't see a button for them.

Jenny1945
02-28-2007, 12:35 AM
While the code really needs a complete overhaul to be DOM compliant, for now, try changing the image submit to a real submit button and removing that style.
Verify that a normal button works. If so, the problem is either in your relative image path or the inline style.
Without the two style lines the form expands to about double the height needed, pushing out the cell and looks horrible. It still does this in Firefox to some degree even with the style, but I have found no way to gain reliable control over the form and cell.

This style tip I found has been as close as I have been able to get.

Jenny

glenngv
02-28-2007, 03:59 AM
If the function will be called many times, then you must name the form differently. Just pass a unique or sequential number to the function.


<script>cart('TV-471','Lost in Oz',14.99,1, 0);</script>
...
<script>cart('TV-472','Lost in Oz 2',14.99,1, 1);</script>
...
<script>cart('TV-473','Lost in Oz 3',14.99,1, 2);</script>

The Javascript routine looks like this:

function cart(item_id, name, price, disks, suffix){
var is_full = ((price > 0.00) ? true : false); //price should be a number not string and compared to 0 without the $ sign
...
document.write('<FORM name="cartForm"' + suffix + ' ACTION="HTTP://www.ecartsoft.com/cgi-bin/cart.cgi" METHOD="POST" style="text-align: justify; margin-top: 0; margin-bottom: 0; margin: 0px; padding: 0px;">');
...
document.write('<select name="package" size="1" style="width: 170" style="font-weight: 700">');
if (is_full) document.write('<option selected>Full Package '+price+'</option>');
if (disks)
if (is_full) {document.write('<option>Just Disks '+sprice+'</option>');}
else {document.write('<option selected>Just Disks '+sprice+'</option>');}
var click = 'onclick=\'addToCart(\"'+item_id+'\",\"'+name+'\", document.forms[\'cartForm' + suffix + '\']);\'';
document.write('</select><input type="image" src="images/AddToCart.gif" alt="Add to Cart" value="Add to Cart" '+click+' style="margin-top:0; margin-bottom:0; float:center; height:32"></form></td>');
return;
}

function addToCart(item_id, name, formref)
{
var tmp = formref.package.options[formref.package.selectedIndex].text;
var ssplit = tmp.split("$");
// ssplit[0] now contains description extender
// ssplit[1] now contains price
formref.item_price.value = ssplit[1];
formref.item_description.value = ssplit[0];
formref.item_sku.value=item_id;
formref.item_name.value=name;
//formref.submit(); //no need to submit the form as input type=image is a submit button, it already submits the form when clicked.
}

Jenny1945
02-28-2007, 04:27 AM
Actually the item_id is unique so I will use that as the name.
I will try this modification in the morning.

Thank you
Jenny

Jenny1945
02-28-2007, 12:37 PM
Price needs to be a string so I have left it that way.
It still functions perfectly in IE and Firefox.

Okay, this is what my code now looks like:



function cart(item_id, name, price, disks)
{
var is_full = ((price > "$0.00") ? true : false);
var cost = ((disks * 6.00)-0.01);
var sprice = "$"+cost.toString();

document.write('<td width="172" style="font-weight: bold" align="center">');

document.write('<FORM name="'+item_id+'" ACTION="HTTP://www.ecartsoft.com/cgi-bin/cart.cgi" METHOD="POST" style="text-align: justify; margin-top: 0; margin-bottom: 0; margin: 0px; padding: 0px;">');
document.write("<INPUT TYPE='HIDDEN' NAME='acc' VALUE='86794'>");
document.write("<INPUT TYPE='HIDDEN' NAME='page' VALUE='add to cart'>");
document.write('<INPUT TYPE="HIDDEN" NAME="required" VALUE="item_name,item_price">');
document.write('<INPUT TYPE="HIDDEN" NAME="minimum_quantity_limit" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="max_quantity_limit" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="quantity" VALUE="1">');
document.write('<INPUT TYPE="HIDDEN" NAME="item_sku" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="item_name" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="item_description" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="item_price" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="item_weight" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="item_tax_id" VALUE="non-taxable">');
document.write('<INPUT TYPE="HIDDEN" NAME="item_discount" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="item_image_url" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="Coupon_Code" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="secret_word" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="ship_free" VALUE="NO">');
document.write('<INPUT TYPE="HIDDEN" NAME="handling_fee" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="drop_ship" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="item_vendor" VALUE="">');
document.write('<INPUT TYPE="HIDDEN" NAME="ship_calculation_method" VALUE="USPSOnline">');

document.write('<select name="package" size="1" style="width: 170" style="font-weight: 700">');
if (is_full) {document.write('<option selected>Full Package '+price+'</option>'); }
if (disks)
if (is_full) {document.write('<option>Just Disks '+sprice+'</option>');}
else {document.write('<option selected>Just Disks '+sprice+'</option>');}
var click = 'onclick=\'addToCart(\"'+item_id+'\",\"'+name+'\",document.'+item_id+');\'';
document.write('</select><input type="image" src="images/AddToCart.gif" alt="Add to Cart" value="Add to Cart" '+click+' style="margin-top:0; margin-bottom:0; float:center; height:32"></form></td>');
return;
}

function addToCart(item_id, name, formref)
{
var tmp = formref.package.options[formref.package.selectedIndex].text;
var ssplit = tmp.split("$");
// ssplit[0] now contains description extender
// ssplit[1] now contains price
formref.item_price.value = ssplit[1];
formref.item_description.value = ssplit[0];
formref.item_sku.value=item_id;
formref.item_name.value=name;
// formref.submit();
}


But in Netscape I still get this error:

Error: missing name after . operator
Source File: http://jennyvision.com/cart3.js
Line: 47, Column: 20
Source Code: var tmp = formref.package.options[formref.package.selectedIndex].text;

I am wondering if Netscape does not use 'selectedIndex' but rather some variant or perhaps it is '.text' that is different?

I don't know how to look this type of thing up when each browser seems to have its own rules.

Jenny

nikkiH
02-28-2007, 03:24 PM
Any reason you're using text instead of value?

glenngv
02-28-2007, 04:11 PM
The item id which you also use as form name has a hyphen in the name so this won't work in any browser:

document.TV-471
You should use another way of referencing form because you use a special character in the form name.

document.forms["TV-471"]
So your onclick code should look like this:

var click = 'onclick=\'addToCart(\"'+item_id+'\",\"'+name+'\", document.forms[\"'+item_id+'\"]);\'';

Jenny1945
02-28-2007, 05:50 PM
Any reason you're using text instead of value?

The original stolen code snippet used text. Later changing it to value caused an error in IE.

Jenny1945
02-28-2007, 05:56 PM
The item id which you also use as form name has a hyphen in the name so this won't work in any browser:

document.TV-471
You should use another way of referencing form because you use a special character in the form name.

document.forms["TV-471"]
So your onclick code should look like this:

var click = 'onclick=\'addToCart(\"'+item_id+'\",\"'+name+'\", document.forms[\"'+item_id+'\"]);\'';

I ran into the dash problem as I started work on the change. Also had a problem that some item numbers are simply a three digit number. So I wrote a snippet that used just the 3 digit number and appended "F" to the beginning.

But the big news is, I have found the problem.
'Package' turns out to be a reserved word as far as Netscape is concerned. I changed it to 'Packaging' and all works well now.

Thank you for all your help, the various changes have made the code fundamentally better, helped me to understand more of what was going on, and in doing so allowed me to focus on the area with the actual problem (oddly, exactly where it was saying the problem was - who would have thought? :) )

Thanks
Jenny



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum