Solved

Javascript onClick bug in Safari

Posted on 2008-10-13
11
1,875 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 

Author Comment

by:Liquid_Inc
Comment Utility
Did you try reloading the page?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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
Comment Utility
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
Comment Utility
So start by adding href="#" and return false after the function onclick
0
 

Author Comment

by:Liquid_Inc
Comment Utility
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
Comment Utility
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
Comment Utility
Brilliant! Thanks so much. The window.location.reload did the trick! I'm so happy now.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

744 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now