Resolved - Auto submit functionality from Vanilla

[Big Spender]

There is a class on things like the currency and sort order drop downs which auto submits the form on click called 'auto_submit'.

I have this on my drop downs on a modified vanilla skin, however I have needed to change the submit buttons (which are set to 'display: none' i'm guessing if JS is available) to <buttons> to allow my font replacement on the buttons to work correctly.

The problem is the <button> needs the display: none; when JS isn't available like the submit button does on Vanilla, where would I change this to hide the <button> rather than submit?

[bsmither]

It may be that javascript is setting the display of the button to none, but it is doing so by effecting the CSS of that element.

Try finding the element you want to hide and adding style="display:none;".

[Big Spender]

Not entirely sure what you mean... adding display: none will just hide the button all the time right?

This is one of my drop downs currently with the button commented out until I can figure out how to only show if JS is enabled: -

    {if isset($PRODUCTS) && count($PRODUCTS) >= 1}

        <form action="{$VAL_SELF}" method="post">

            <div id="pagination">

                <span class="pageSelect">{if isset($PAGINATION)}{$PAGINATION}{/if}</span>

                {if isset($SORTING)}

                    {$LANG.form.sort_by}

                    <select name="sort" class="sort auto_submit">

                        <option value="">{$LANG.form.please_select}</option>

                        {foreach from=$SORTING item=sort}

                        <option value="{$sort.field}|{$sort.order}" {$sort.selected}>{$sort.name} ({$sort.direction})</option>

                        {/foreach}

                    </select>

                    <!--<button type="submit" class="button fr2" />{$LANG.form.sort}</button>-->

                {/if}

            </div>

        </form>

    {/if}

and this is Vanillas: -

{if isset($PRODUCTS) && count($PRODUCTS) >= 1}

<form action="{$VAL_SELF}" method="post">

  <div class="control">

<span class="pagination">{if isset($PAGINATION)}{$PAGINATION}{/if}</span>

{if isset($SORTING)}

{$LANG.form.sort_by}

<select name="sort" class="auto_submit">

 <option value="">{$LANG.form.please_select}</option>

 {foreach from=$SORTING item=sort}

 <option value="{$sort.field}|{$sort.order}" {$sort.selected}>{$sort.name} ({$sort.direction})</option>

 {/foreach}

</select>

<input type="submit" value="{$LANG.form.sort}" />

{/if}

  </div>

  </form>

{/if}

[Guest Viola]

The function is in /js/common.js around line 179:

$('select.auto_submit').each(function(){

$(this).parents('form:first').find('input:submit').hide();

}).change(function(){

$(this).parents('form:first').submit();

});

It's better not to modify code outside your store skin if you can avoid it, so try adding the following to your skin's script.js file:

$('select.auto_submit').each(function(){

$(this).parents('form:first').find('button').hide();

});

[Big Spender]

Thanks works perfect.