window.location doesn't produce same outcome as pasting the same link into browser - Magento Add To Cart URL

Question

I'm creating a Magento category page which allows users to add configurable products from the category page. This is outside of how Magento wants to operate out of the box.

I've got to a point where I'm 99.9% there but am having trouble with some final javascript.

I've manage to build all of the configurable products on the page with a select dropdown for the size attribute and an add to cart button for each product.

The select dropdowns have the ->getAddUrl() method as their value. So during the onclick event of the 'add to cart' button I'm using window.location(thegetAddUrlLink) to add the product to the cart.

Unfortunately this doesn't work for some unknown reason, it just takes me to that product's individual product page and asks to select a size. This is strange because if I copy the same links from the source (from the value field) for any of the the products on that page and paste it into my browser then I get the intended outcome.

Below is an example of the mark up of one product on the page

    <form action="http://www.mysite.com/checkout/cart/add/" method="post" style="display:block; clear:both;"> 

        <p class="shopthislookpageselectsize">Size</p>
            <div class="shopthislookpageselectholder"> 
            <select name="select-35900" id="select-35900" class="required-entry shopthislookpageselect">

            <option value="http://www.mysite.com/checkout/cart/add/uenc/aHR0cDovL3d3dy5jdWx0dXJla2luZ3MuY29tLmF1L3Nob3AtdGhpcy1sb29rL2Zlc3RpdmFsLWdlYXJzLTEuaHRtbA,,/product/35895/">ONE SIZE</option>
<option value="http://www.mysite.com/checkout/cart/add/uenc/aHR0cDovL3d3dy5jdWx0dXJla2luZ3MuY29tLmF1L3Nob3AtdGhpcy1sb29rL2Zlc3RpdmFsLWdlYXJzLTEuaHRtbA,,/product/22533/">28</option>                                
            </select>
            </div>
    <button class="button btn-cart" input="" type="hidden" name="product" id="button-35900" value="35900" onclick="addLookItemsToCart(this.id); return false;"><span><span>Add to Cart</span></span></button>


    <script type="text/javascript">
                function addLookItemsToCart(id){

                            var clickedId = id;
                            var theValue = clickedId.replace("button-", "");
                            var theLink = $j('#select-'+theValue).val() );
                            window.location = theLink;

                };
                </script>
                </form>

Just to reiterate. As an example if I copy the link http://www.mysite.com.au/checkout/cart/add/uenc/aHR0cDovL3d3dy5jdWx0dXJla2luZ3MuY29tLmF1L3Nob3AtdGhpcy1sb29rL2Zlc3RpdmFsLWdlYXJzLTEuaHRtbA,,/product/35895/ out of the source and paste it into my browser, I get the intended outcome. If I use the javascript method of window.location it redirects me to ask me to confirm the size and I'm not sure why.

Answer 1

Problem was in the javascript

This line had an extra closing bracket ')'.

$j('#select-'+theValue).val() );