0

This has never happened to me before but I have this form and when I click on the button, it does not do anything, as if I clicked a <button type="button"></button> element, this is just happening in Safari because in other browsers it works correctly (some code is rendered server side, I'm using Laravel):

<form method="post" action="{{ route('checkout.realizar.compra') }}" id="form-compra-tarjeta">
                                                @csrf
                                                <input type="hidden" value="Tarjeta" name="tipo">
                                                <div class="button yellow"><button type="submit" class="btn-confirmar">Confirmar pago</button></div>
                                            </form>

I don't know if this has anything to do but I have other forms inside my view, but they are not nested, each one of them are in separate places. If I inspect the element there's nothing to be seen, neither inside the network tab, it does not try to even go to the action url.

I have also this javascript (with jQuery) code that just disables the button and changes the text when the button is clicked, though I don't think it has something to do with it.

$('.btn-confirmar').on('click', function(e){
        $(this).attr('disabled', true);
        $(this).html('Realizando compra... <i class="fas fa-spin fa-circle-notch"></i>');
    });
Aarón Gutiérrez
  • 1,400
  • 3
  • 16
  • 41

1 Answers1

1

Turns out that the jQuery code actually had something to do with this, I changed it by the following and now it works:

$('#form-compra-tarjeta').on('submit', function(e){
        $('.btn-confirmar').attr('disabled', true);
        $('.btn-confirmar').html('Realizando compra... <i class="fas fa-spin fa-circle-notch"></i>');
    });

But, why...? If someone can explain so I can add it to the answer...

Aarón Gutiérrez
  • 1,400
  • 3
  • 16
  • 41
  • I'm guessing this is the reason: https://stackoverflow.com/questions/26501221/calling-click-event-of-input-doesnt-work-in-safari It appears that Safari has issues when the onclick event is not attached directly to the button itself. You likely fixed it when you moved the click event off of the jquery and replaced it with "submit". – JLowther Jan 14 '20 at 04:13
  • @JLowther Hmm but it was attached to the button itself at the beginning `$('.btn-confirmar').on('click'....` , the element `$('#form-compra-tarjeta')` belongs to the form. – Aarón Gutiérrez Jan 14 '20 at 04:17
  • My guess is Safari started being happy with it once the button was a "type="submit"" and the jquery had a corresponding "submit" function. I don't have Safari and cannot install it so I can't test for myself, sadly. – JLowther Jan 14 '20 at 04:20