error: scripts.js?v=1:504 Uncaught TypeError: Cannot read property 'value' of null

[Charles Brauer]

downloaded the suivant theme about a year ago. As you can tell from the time frame its been a long time in development. I went to the wiki and updated the scripts.js using the 1.1.0 update. I was hopeful that would help. I really could use some assistance on this. See the attachment

for example
http://www.adorablekidsdressup.com/p...pe-rocket.html

thanks.

BTW the amount of updating is mind bogggling

[1873Peacemaker]

Charles, the page looks fine to me. No error using Chrome. Maybe I am not understanding the problem you are having.Source code looked fine too from a quick glance.

[Matt Zimmermann]

Charles, it looks like the page layout has been heavily modified. If you are not planning on having the product price update based on attribute selection, you can remove the function from your scripts.js file. It spans from lines 503 to 506 and starts with this comment:

// ---- Update Display Price Based on Attribute Selections (If Attribute Machine Is Not Being Used) ---- //

[Charles Brauer]

I can reliably reproduce the error at the product level. Certain attributes have a additional price associated with it. Like add batteries for a toy. So I would like to keep that functionality.

[Matt Zimmermann]

Charles - It looks like you are not using the product attribute template that ships with Suivant. Try adding this line to the bottom of your product attribute template and see if the error goes away.

<input type="hidden" name="Product_Attribute_Count" value="<mvt:eval expr="miva_array_elements(l.settings:attributes)" />" id="js-product-attribute-count" />

[Charles Brauer]

Ah yes. I remember commenting it out because the buy button would not go to the basket, it would only go to the mini-basket as it does again after I put the line back in. we are moving in the right direction!!!!!

[Charles Brauer]

here is the buy button.
<form method="post" action="&mvte:global:sessionurl;Screen=BASK" id="js-purchase-product" class="inline-labeling">
<input type="hidden" name="Old_Screen" value="&mvte:global:Screen;" />
<input type="hidden" name="Old_Search" value="&mvte:global:Search;" />
<input type="hidden" name="Action" value="ADPR" />
<input type="hidden" name="Store_Code" value="&mvte:store:code;" />
<input type="hidden" name="Product_Code" value="&mvte:product:code;" />
<input type="hidden" name="Category_Code" value="&mvte:global:category_code;" />
<input type="hidden" name="Offset" value="&mvte:global:Offset;" />
<input type="hidden" name="AllOffset" value="&mvte:global:AllOffset;" />
<input type="hidden" name="CatListingOffset" value="&mvte:global:CatListingOffset;" />
<input type="hidden" name="RelatedOffset" value="&mvte:global:RelatedOffset;" />
<input type="hidden" name="SearchOffset" value="&mvte:global:SearchOffset;" />
<div class="row">
<mvt:if expr="l.settings:product:inv_active OR l.settings:attributemachine:product:inv_active ">
<div id="js-inventory-message" class="column whole">
&mvt:product:inv_long;
</div>
</mvt:if>
<div id="js-product-attributes" class="column whole product-attributes">
<mvt:item name="product_attributes" param="product:id" />
</div>
<mvt:if expr="g.hasSwatches">
<div class="column whole product-swatches">
<mvt:comment>
<label class="medium">Color</label>
<span id="js-swatch-name" class="bold swatch-name">&nbsp;</span>
<hr noshade />
</mvt:comment>
<div id="js-swatches"></div>
</div>
</mvt:if>
</div>
<div class="row corners add-to-cart-wrap bg-silver">
<div class="column whole small-half medium-whole large-two-fifths x-large-three-tenths">
<div class="row quantity-wrap align-center">
<div class="column whole np">
<!--<span id="js-decrease-quantity" class="bg-gray decrease-quantity" unselectable="on" data-rt-icon="&#x67;"></span>-->
<input type="tel" name="Quantity" value="1" id="l-quantity" class="align-center" />
<!--<span id="js-increase-quantity" class="bg-gray increase-quantity" unselectable="on" data-rt-icon="&#x69;"></span>-->
</div>
</div>
</div>
<div class="column whole small-half medium-whole large-three-fifths x-large-seven-tenths">
<div class="breaker small-all-hidden medium-all-shown large-all-hidden"></div>
<input type="submit" value="Add to Cart" id="js-add-to-cart" class="button button-block button-square uppercase add-to-cart bg-teal bold" />
</div>
</div>
</form>

[Matt Zimmermann]

Charles - Try removing the ID from the submit button; that should do it.

id="js-add-to-cart"

[Charles Brauer]

BAM.. Just like that my to do list just got a whole lot more manageable. Thanks SOOOOOO much.

[Matt Zimmermann]

You're welcome Charles.

[Charles Brauer]

It's always the trickle effect. With the hidden input line added to the end of the attribute template, I now have a problem when a required attribute is not selected. .The message: All required options have not been selected. Please review the following options: undefined. Oddly it used to go to my missing attributes page. I DO like the on page message better if you can help me with the undefined. the good news is the runtime error is resolved and I can control to go to the basket or minibasket! I would greatly appreciate a bit more guidance.

example. http://www.adorablekidsdressup.com/product/560.html