Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Javascript onClick bug in Safari

Posted on 2008-10-13
11
1,888 Views
Last Modified: 2013-12-07
My javascript code seems to work just fine in all browsers except Safari. It designed to function as a shopping cart that stores the cart information in a cookie. When you add something to the cart, the page reloads with the new cookie information and with the shopping cart displaying the item you just added. The javascript code I'm having a problem with is the one dealing with adding and removing items to a cart.

I am putting the javascript within the <head> tags of my html (actually it's php) page. I am calling the javascript function within the <body> tags. Here are the javascript functions I wrote to do the adding from the cart:

function add_to_cart(itemid, qtyboxid){
  var qty = document.getElementById(qtyboxid).value;
  var illegalChars = /[^0-9]/;
 
    if (qty == ""){
      alert('You must enter a quantity.');
        return false;
    }else if (illegalChars.test(qty)){
            alert('The quantity you entered contains invalid characters.');
      }else{
        add_to_Cookie('cart',itemid);
        add_to_Cookie('item_qty',qty);
      window.location.href="order-form";
    }  
  }

Here is the code where the javascript gets called:

  <div class="order_left">
                        <h2 class="order_sub_header">XXXXXXX</h2>
                        <h3 class="order_language_header">English 24Ý &times; 36Ý</h3>
                        <p class="order_info">four color, one sided on 100# Text Matte stock<br />

                          Quantity and Cost Per Item: 1-50 $9.00, 51-250 $8.00, 251-500 $7.00</p>
                        <label class="order_quantity">Quantity English
                        <input id="polling" type="text" name="polling_poster" class="box" />
                        </label>
                        <br clear="all" />
                        <a class="pointer" onClick="add_to_cart('2','polling')"><img height="20" width="60" class="add_to_cart_btn" src="graphics/buttons/add_to_cart_btn.gif" alt="Add To Cart Button" /></a>
                    </div>

Its the onClick in the last line of the code snippet above that seems to have a problem. The same thing is happening when I use an onClick to remove an item from the cart. Here is the really weird thing, you can click on the "Add to Cart" button when you first get to the page and everything will work fine. It will either add an item to the cart or give you a pop-up saying that you haven't entered a quantity if you just click the button without entering an amount for the quantity. The problem doesn't arise until the page gets reloaded and I try to add something new to the cart. If I click the button to add a new item to the cart after the page has reloaded, then the button doesn't do anything. However, if I click the button a second time, the page will reload. The problem is that this time two items will be added to the cart rather than just one. Essentially what happens is that the items that are added are the ones from when you tried to add the first time when the button did nothing and the item you added when you click on the button a second time.

The best way to see what I'm talking about is to just try out the problem at the websites temporary address: http://www.liquidpreso.com/hava/order-form

What can I do to solve this problem?
0
Comment
Question by:Liquid_Inc
  • 6
  • 5
11 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22709153
1. use a HREF
2. return false
function add_to_cart(itemid, qtyboxid){
  var qty = document.getElementById(qtyboxid).value;
  var illegalChars = /[^0-9]/;
  if (qty == ""){
    alert('You must enter a quantity.');
    return false;
  }
  if (illegalChars.test(qty)){
    alert('The quantity you entered contains invalid characters.');
    return false;
  }
  add_to_Cookie('cart',itemid);
  add_to_Cookie('item_qty',qty);
  window.location.href="order-form";
  return false; // cancel the href
}
 
<a href="#" class="pointer" onClick="return add_to_cart('2','polling')"><img height="20" width="60" class="add_to_cart_btn" src="graphics/buttons/add_to_cart_btn.gif" alt="Add To Cart Button" /></a>
 
 
ALTERNATIVE:
 
 
function add_to_cart(itemid, qtyboxid){
  var qty = document.getElementById(qtyboxid).value;
  var illegalChars = /[^0-9]/;
  if (qty == ""){
    alert('You must enter a quantity.');
    return false;
  }
  if (illegalChars.test(qty)){
    alert('The quantity you entered contains invalid characters.');
    return false;
  }
  add_to_Cookie('cart',itemid);
  add_to_Cookie('item_qty',qty);
  return true; // ALLOW the href
}
 
<a href="order-form" class="pointer" onClick="return add_to_cart('2','polling')"><img height="20" width="60" class="add_to_cart_btn" src="graphics/buttons/add_to_cart_btn.gif" alt="Add To Cart Button" /></a>

Open in new window

0
 

Author Comment

by:Liquid_Inc
ID: 22712459
I tried these solutions but I still can't get it to work right in Safari. The page now fails to reload (which I need it to do).
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22713397
I get

ERROR!       
This page requires that javascript and cookies are both enabled. Please make sure they are both enabled and then reload this page. If you have javascript and cookies enabled and still see this message, try reloading your page.
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 

Author Comment

by:Liquid_Inc
ID: 22713775
Did you try reloading the page?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22713852
That worked (in FF) - not a very nice way to start a visit :|

but in Safari I get

ERROR!

This page cannot be viewed in Safari. Please try a different browser.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22713865
If I fool you and change the useragent to FF2, I have no problems in Safari - it reloads and shows me the purchase
0
 

Author Comment

by:Liquid_Inc
ID: 22714103
Thanks for trying mplungian!

I know, I'm going to switch the setting of the cookie to PHP rather than javascript to avoid the problem you encountered with your first visit. I haven't been concerned with that since the site isn't live yet and I've been devoting time to the safari glitch. I also removed the code that will block Safari users so now you can try it without having to change the useragent. The problem doesn't occur the first time you add something to the cart, only every subsequent item that is added to the cart. It also occurs when you try to remove an item from the cart once it is in there.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22714273
So start by adding href="#" and return false after the function onclick
0
 

Author Comment

by:Liquid_Inc
ID: 22714591
I tried that but the result is that 1) The item is no longer added to the cart (i.e. cookie) and 2) The button takes me straight to the anchor at the bottom of the page after I click it regardless of whether the quantity box is empty or it fails the reg ex test. If either of those two things happens, the page should remain where it is after the alert pop-up. In any case, the bigger problem problem (1). Also, the page no longer reloads when the user hits the button. You can try it out yourself right now as I have left the href in with the onClick script returning false.
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 22718482
1. you need href for most browsers
2. you need return false if you do not want to follow the link
3. reload the page instead of using location=
4. for better solution, load the shopping in an iframe

Here is 1-3 - you MUST follow the syntax of
onClick="return add_to_cart(...)"

Interestingly enough, it works if I click twice on the page right now (safari windows posing as firefox)

function add_to_cart(itemid, qtyboxid){
  var qty = document.getElementById(qtyboxid).value;
  var illegalChars = /[^0-9]/;
  if (qty == ""){
    alert('You must enter a quantity.');
    return false;
  }
  if (illegalChars.test(qty)){
    alert('The quantity you entered contains invalid characters.');
    return false;
  }
  add_to_Cookie('cart',itemid);
  add_to_Cookie('item_qty',qty);
  window.location.reload(1); // reload from server
  return false; // cancel the href
}
 
<a href="#" class="pointer" onClick="return add_to_cart('2','polling')"><img height="20" width="60" class="add_to_cart_btn" src="graphics/buttons/add_to_cart_btn.gif" alt="Add To Cart Button" /></a>
 
 

Open in new window

0
 

Author Closing Comment

by:Liquid_Inc
ID: 31506989
Brilliant! Thanks so much. The window.location.reload did the trick! I'm so happy now.
0

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question