Нажатие кнопки Fire через JavaScript

Question

Мне нужно «нажать» одну кнопку с помощью JavaScript, когда пользователь нажимает другую кнопку.

В Chrome на Mac следующее прекрасно работает.Однако в Safari на Mac нажатие кнопки просто перезагружает текущую страницу, а не вызывает ожидаемое поведение.

JS

$( 'document' ).ready( function() {
    var $myForm = $('#my-form');
    $('#button-fake').on('click', function(){
        console.log("FAKE CLICKED");
        if ($myForm[0].checkValidity()){
            console.log("FORM VALID");
            $('#button-real').click();
            console.log("FORM SUBMITTED");
        }
    });              
});

HTML

<input type="submit" id="button-fake" value="Fake button" />

<input type="submit" id="button-real" value="Real button" />

PS: Не моя идея, мне просто нужно заставить ее работать.

Answer 1

Возможно, вам понадобится добавить e.preventDefault();

var $myForm = $('#my-form');
$('#button-fake').on('click', function(e) {
  e.preventDefault();
  console.log("FAKE CLICKED");
  if ($myForm[0].checkValidity()) {
    console.log("FORM VALID");
    $('#button-real').click();
    console.log("FORM SUBMITTED");
  }
});

$('#button-real').on('click', function(e) {
  console.log('button-real clicked')

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id='my-form'>
  <input type='text' required>
  <button type='submit' id='button-fake'>Submit</button>
  <button type='button' id='button-real'>Real</button>

</form>

Answer 2

Кнопка запускает отправку формы.Форма отправки перезагрузит страницу.Чтобы предотвратить это, вызовите protectDefault ().

$( 'document' ).ready( function() {
        var $myForm = $('#my-form');
        $('#button-fake').on('click', function(e){
                e.preventDefault(); // <- This
                console.log("FAKE CLICKED");
                if ($myForm[0].checkValidity()){
                        console.log("FORM VALID");
                        $('#button-real').click();
                        console.log("FORM SUBMITTED");
                }
        });              
});