0

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') ?>
  • Can you post your code? Why can't you include your alert after the other nested action that occurs inside of the onChange? – David Lerner Oct 9 '15 at 19:06
  • @DavidLerner Code snippet is posted. – nguyminh Oct 9 '15 at 19:19
0

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');  
        }
    }
}

  • Hello, for some reason under the if (selected.config) statement, any code there does not execute when the selectedIndex is 0, which is for "choose an option" – nguyminh Oct 12 '15 at 16:30
  • yes, it will not go inside that condition if you select the "choose an option". Because for this option there is on any value set and if you inspect the code and check for this option value is set to blank and also in config array js has no value for this option. – Akhilesh Patel Oct 12 '15 at 16:48
  • I understand. However, My goal strictly depends on something happening when "choose an option" is selected. Nothing should happen when other options are selected, only the "choose an option". Do you know how I can do that? Thanks – nguyminh Oct 12 '15 at 16:51
  • I want something to happen when users select "Choose an option" on change, but not when the page loads. That is the problem that I wanted to solve from the beginning. When the page loads, it already is on "choose an option", but should not do anything until users click back to it – nguyminh Oct 12 '15 at 16:54
  • edited my answer. see if that work for you.. – Akhilesh Patel Oct 12 '15 at 16:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.