Form only submits with the Enter key

Asked

Viewed 410 times

2

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: inserir a descrição da imagem aqui And this is on Fedora Linux, which submits normal: inserir a descrição da imagem aqui

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

inserir a descrição da imagem aqui

  • I don’t know if that would be the case, but have you tested if that’s not a css problem? Since you have found that the icon that overrides the button, Inspecione the css of that icon. It is possible that it is something like.

  • It’s like, but I don’t know what to do yet.

  • Your store is online or just local?

  • I have it in production, place and in homologation. Why?

  • Is there any way to make this icon not selectable using css?

  • 1

    If the icon is overriding the button we may have some possibilities: Most likely in my opinion is that the icon may not be inside the element <button> or <input>, which makes it not clickable. What I suggest you do is: Right-click the > inspect icon and see how organized the html button and the css rules are. If you find it necessary you can post an image or a code pad to analyze.

Show 1 more comment

2 answers

6


I solved the problem as follows:

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

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();
});
  • Who gave downvote could at least say why? Obg.

  • 1

    +1. I don’t know who was expensive, I’m sorry about that. But thanks for the help, even though you already solved the case using css, but I think the person who negatived you should not have understood your idea, since it could work for the element <i class="process-icon-save"> that sits inside the button: var elemento = document.querySelector('.process-icon-save');

  • That’s right! Thanks for the up and good luck!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.