[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Javascript onClick bug in Safari

Posted on 2008-10-13
11
Medium Priority
?
1,915 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
[X]
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
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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 2000 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

#Citrix #Internet Explorer #Enterprise Mode #IE 11 #IE 8
Several part series to implement Internet Explorer 11 Enterprise Mode
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.
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…

656 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