Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Problem with accessing form through Javascript with Netscape.

    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.

  • #2
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    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.

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    This is the cause of the error:
    Code:
    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.

    Code:
    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);\'';
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #4
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    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.
    Last edited by Jenny1945; 02-28-2007 at 12:22 AM. Reason: Additional question

  • #5
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by nikkiH View Post
    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

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    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.

    Code:
    <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.
    }
    Last edited by glenngv; 02-28-2007 at 04:02 AM.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #7
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #8
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

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

  • #9
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    Any reason you're using text instead of value?

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    The item id which you also use as form name has a hyphen in the name so this won't work in any browser:
    Code:
    document.TV-471
    You should use another way of referencing form because you use a special character in the form name.
    Code:
    document.forms["TV-471"]
    So your onclick code should look like this:
    Code:
    var click =  'onclick=\'addToCart(\"'+item_id+'\",\"'+name+'\", document.forms[\"'+item_id+'\"]);\'';
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #11
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by nikkiH View Post
    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.

  • #12
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem Fixed

    Quote Originally Posted by glenngv View Post
    The item id which you also use as form name has a hyphen in the name so this won't work in any browser:
    Code:
    document.TV-471
    You should use another way of referencing form because you use a special character in the form name.
    Code:
    document.forms["TV-471"]
    So your onclick code should look like this:
    Code:
    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


  •  

    Posting Permissions

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