Form only submits with the Enter key

Question

Inside the backoffice of a Prestashop-based store V.1.6.1.3.

When I try to register a product, it happens very strange problem that does not present error in anything even using debug mode on:

define('_PS_DEBUG_DEV_', true);
define('_PS_MODE_DEV_', true);

Problem: When I select the button Submit, using tab navigation and clicking ENTER, it submits the form, but when I click the button it does not send the form.

Considerations: When I am using Fedora Linux, with Chrome Version 52.0.2743.82 (64-bit), the form submits with click and saves the product smoothly. However, when I submit the form using virtualbox, with Windows 7, with the most current Chorme: 54.0.2840.59, it simply saves the product only after the fifth attempt with (click) or through tab until you reach the button and press "ENTER".

The strange thing is that even deleting all the browser cache, and testing on various machines, with "windows 7, windows 8 and windows 10..." this error occurs, only using Firefox on Windows and my Linux did not present this problem. This is very strange behavior... So I have no idea what this mistake could be, and I have no idea how I could fix the problem.

Code:

This is the head of the form:

<form id="product_form" class="form-horizontal col-lg-10 col-md-9" action="index.php?controller=AdminProducts&amp;token=9aa71815d1823d502542e0ddedffdcdb&amp;addproduct" method="post" enctype="multipart/form-data" name="product" novalidate="novalidate">

And these are the buttons on the footer:

<div class="panel-footer">
    <a href="index.php?controller=AdminProducts&amp;token=9aa71815d1823d502542e0ddedffdcdb" class="btn btn-default"><i class="process-icon-cancel"></i> Cancelar</a>
    <button type="submit" name="submitAddproduct" class="btn btn-default pull-right"><i class="process-icon-save"></i> Salvar</button>
    <button type="submit" name="submitAddproductAndStay" class="btn btn-default pull-right"><i class="process-icon-save"></i> Salvar e permanecer</button>

Snippet of javascript from admin js.:

function bindSwapSave()
{
    if ($('#selectedSwap option').length !== 0)
        $('#selectedSwap option').attr('selected', 'selected');
    else
        $('#availableSwap option').attr('selected', 'selected');
}

function bindSwapButton(prefix_button, prefix_select_remove, prefix_select_add)
{
    $('#'+prefix_button+'Swap').on('click', function(e) {
        e.preventDefault();
        $('#' + prefix_select_remove + 'Swap option:selected').each(function() {
            $('#' + prefix_select_add + 'Swap').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
            $(this).remove();
        });
        $('#selectedSwap option').prop('selected', true);
    });
}

/** make sure that all the swap id is present in the dom to prevent mistake **/
    if (typeof $('#addSwap') !== undefined && typeof $("#removeSwap") !== undefined &&
        typeof $('#selectedSwap') !== undefined && typeof $('#availableSwap') !== undefined)
    {
        bindSwapButton('add', 'available', 'selected');
        bindSwapButton('remove', 'selected', 'available');

        $('button:submit').click(bindSwapSave);

    }

PS: This store uses Smarty.

The normal behavior was when clicking, saving and presenting a message of success. But even leaving the required fields blank, it didn’t even validate. And on the console, Even with Javascript enabled. It looks like witchcraft.

See in the image how it is being sent without code error, but does not submit: And this is on Fedora Linux, which submits normal:

New information: I just found out it’s the disk icon that’s overwriting the button.

Answer 1

I solved the problem as follows:

.bootstrap .btn.btn-default i {
 color:#555,
 pointer-events:none; /* aqui retiro qualquer evento no ícone */ 
}

Answer 2

What could be done is to go directly via Javascript and disable the button click event. In some very rare cases the Javascript confuses the action of clicking a button that has images as "icons"...

Follow code that disables:

elemento.addEventListener('click', function(event){
    event.preventDefault();
});