Expresso Store product form tag not wrapping form content

Question

I've set up an accessory section on a product page. The accessories are being pulled in through a Playa relationship field and are displaying in a table. I discovered an issue when I went to add an accessory to my cart and it added the main product instead which is available on the page from a side column. On viewing the source I noticed the form tag didn't wrap the form elements including the ad to cart button, the store javascript was injected below it though. Here is my code.

{exp:playa:children channel="accessories" category="{category_id}" sort="asc" field="accs_inc"} 

{exp:store:product entry_id="{entry_id}" return="{segment_1}/{segment_2}/{segment_3}"}
{accs_info}
<tr>
    <td width="60"><img src="{accs_thumb:url}"></td>
    <td>{title}<br><small>{sku}</small><br><span class="label label-success">Included as standard</span></td>
    <td width="70">{price}</td>
    <td width="80"><div class="controls"><input type="text" id="item_qty" name="item_qty" class="input-mini" value="{min_order_qty}" /></div></td>
    <td width="150"><div class="form-actions formbut"><input type="submit" alt="add to cart" name="submit" value="add to cart" class="btn btn-success pull-right"></div></td>
</tr>
{/accs_info}
{/exp:store:product}    

{/exp:playa:children}

And this is what is served

<tbody>
    <form method="post" class="store_product_form"></form>

            <tr>
                <td width="60"><img src="/images/uploads/accessories/thumbnail/PP359.png"></td>
                <td>Accessory kit <br><small>PP359</small><br><span class="label label-info">Reccomended</span></td>
                <td width="70">5</td>
                <td width="80"><div class="controls"><input type="text" id="item_qty" name="item_qty" class="input-mini" value="1"></div></td>
                <td width="150"><div class="form-actions formbut"><input type="submit" alt="add to cart" name="submit" value="add to cart" class="btn btn-success pull-right"></div></td>
            </tr>           

            <script type="text/javascript">
            window.ExpressoStore = window.ExpressoStore || {};
            ExpressoStore.products = ExpressoStore.products || {};
            ExpressoStore.products[8971] = {"entry_id":"8971","price":"5.0000","weight":null,"length":null,"width":null,"height":null,"handling":null,"free_shipping":"0","tax_exempt":"0","modifiers":[],"stock":[{"id":"661","entry_id":"8971","sku":"PP359","stock_level":null,"min_order_qty":null,"track_stock":"0","opt_values":[]}],"regular_price":"5.0000","sale_price":"5.0000"};

        (function() {
            ExpressoStore.config = {"store_currency_symbol":"","store_currency_decimals":"0","store_currency_thousands_sep":",","store_currency_dec_point":".","store_currency_suffix":""};
            if (!ExpressoStore.scriptElement) {
                var script = ExpressoStore.scriptElement = document.createElement("script");
                script.type = "text/javascript"; script.defer = true;
                script.src = "/themes/third_party/store/store.js?v=2.4.1";
                document.getElementsByTagName("body")[0].appendChild(script);
            }
        })();
            </script>
        </tbody>

Can anybody help?

Answer 1

I've fixed the issue by using the product_form tag

{exp:store:product_form return="{segment_1}/{segment_2}/{segment_3}"}                   
<tr>
{exp:playa:children channel="accessories" category="{category_id}" sort="asc" field="accs_rec"} 
{exp:store:product entry_id="{entry_id}" disable_form="yes"}
{accs_info}
    <td width="60"><img src="{accs_thumb:url}"></td>
    <td>{title}<br><small>{sku}</small><br><span class="label label-info">Reccomended</span></td>
    <td width="70">{price}</td>
    <td width="80"><div class="controls"><input type="hidden" name="items[{count}][entry_id]" value="{entry_id}" /><input type="text" id="item_qty" name="items[{count}][item_qty]" class="input-mini" value="{min_order_qty}" /></div></td>

{/accs_info}
{/exp:store:product}    
{/exp:playa:children}

    <td width="150"><div class="form-actions formbut"><input type="submit" alt="add to cart" name="submit" value="add to cart" class="btn btn-success pull-right"></div></td>
</tr>
{/exp:store:product_form}