Disable onChange event at page load

Question

For some reason, my onChange event on my select input fires when the page load.

What I'm trying to do is have an onChange event occur when the user selects the first option of a select dropdown. But since the first option is default, it is firing automatically. I can't change the default as that is against what the client wants. Is there a way to disable this? I'm not too familiar with how magento fires off javascript on page loads, since I think that's what the problem is.

This is mostly for my catalog/product/view/type/options/configurable.phtml page where I want something to happen (like an alert) when user clicks on the first option of the configurable product.

<?php
$_product    = $this->getProduct();
$_attributes = Mage::helper('core')->decorateArray($this->getAllowAttributes());$_jsonConfig = $this->getJsonConfig();$_renderers = $this->getChild('attr_renderers')->getSortedChildren();?><?php if ($_product->isSaleable() && count($_attributes)):?>
<dl>
<?php foreach($_attributes as $_attribute): ?>
    <?php
    $_rendered = false;
    foreach ($_renderers as $_rendererName):
        $_renderer =       $this->getChild('attr_renderers')->getChild($_rendererName);
        if (method_exists($_renderer, 'shouldRender') &&     $_renderer->shouldRender($_attribute, $_jsonConfig)):
            $_renderer->setProduct($_product);
            $_renderer->setAttributeObj($_attribute);
            echo $_renderer->toHtml();
            $_rendered = true;
            break;
        endif;
    endforeach;

    if (!$_rendered):
    ?>
    <dt><label class="required"><em>*</em><?php echo $_attribute->getLabel() ?></label></dt>
    <dd<?php if ($_attribute->decoratedIsLast){?> class="last"<?php }?>>
        <div class="input-box">
            <select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select" onChange="spConfig.getSelectedIndex()">
                <option><?php echo $this->__('Choose an Option...') ?></option>
              </select>
          </div>
    </dd>
    <?php endif; ?>
<?php endforeach; ?>
</dl>

<?php if ($this->getLayout()->getBlock('size_chart')->getSizeChartVersion() > 0): ?>
    <span id="size-chart">Size Chart</span>
<?php endif; ?>

<script type="text/javascript">
    var spConfig = new Product.Config(<?php echo $_jsonConfig ?>);


    spConfig.getSelectedIndex = function(){
        for (var i = this.settings.length -1; i>=0; i--){

            if(this.settings[i].selectedIndex == 0)
            {
                alert('yes');
            }
        }
    }



</script>
<?php echo $this->getChildHtml('after') ?>

Answer 1

You will need to use spconfig object. Replace your catalog/product/view/type/options/configurable.phtml code with below. I have used the onchange="spConfig.getSelectedIndex()" onchange function.

<?php
$_product = $this->getProduct();
$_attributes = Mage::helper('core')->decorateArray($this->getAllowAttributes());
?>
<?php if ($_product->isSaleable() && count($_attributes)): ?>
    <dl>
        <?php foreach ($_attributes as $_attribute): ?>
            <dt><label class="required"><em>*</em><?php echo $_attribute->getLabel() ?></label></dt>
            <dd<?php if ($_attribute->decoratedIsLast) { ?> class="last"<?php } ?>>
                <div class="input-box">
                    <select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select" onchange="spConfig.getSelectedIndex()">
                        <option><?php echo $this->__('Choose an Option...') ?></option>
                    </select>
                </div>
            </dd>
        <?php endforeach; ?>
    </dl>
    <script type="text/javascript">
var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);


spConfig.getSelectedIndex = function ()
{
    for (var i = this.settings.length - 1; i >= 0; i--)
    {
        if (this.settings[i].selectedIndex == 0)
        {
          alert('yes');  
        }
    }
}