Нажмите кнопку огня через JavaScript
Мне нужно «нажать» одну кнопку с помощью JavaScript, когда пользователь нажимает другую кнопку.
В Chrome на Mac отлично работает следующее. Однако в Safari на Mac нажатие кнопки просто перезагружает текущую страницу, а не вызывает ожидаемое поведение.
JS
$( 'document' ).ready( function() {
var $myForm = $('#my-form');
$('#button-fake').on('click', function(){
console.info("FAKE CLICKED");
if ($myForm[0].checkValidity()){
console.info("FORM VALID");
$('#button-real').click();
console.info("FORM SUBMITTED");
}
});
});
HTML
<input type = "submit" id = "button-fake" value = "Fake button" />
<input type = "submit" id = "button-real" value = "Real button" />
PS: Это не моя идея, мне просто нужно, чтобы это заработало.
Что бы ни работало button-real, это черный ящик.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Кнопка вызовет отправку формы. Отправка формы перезагрузит страницу. Чтобы предотвратить это, вызовите preventDefault().
$( 'document' ).ready( function() {
var $myForm = $('#my-form');
$('#button-fake').on('click', function(e){
e.preventDefault(); // <- This
console.info("FAKE CLICKED");
if ($myForm[0].checkValidity()){
console.info("FORM VALID");
$('#button-real').click();
console.info("FORM SUBMITTED");
}
});
});
Спасибо, это я совсем пропустил! PS: Тот же ответ, что и у @brk, но более пояснительный, поэтому я принимаю это решение.
Только что понял: если я добавлю e.preventDefault(), он больше не будет вызывать сообщения проверки формы HTML 5. Так что это не вариант.
Я не думаю, что есть способ обойти это... Вы можете попробовать заменить проверку HTML5 на проверку на основе javascript.
Возможно, вам нужно добавить e.preventDefault();
var $myForm = $('#my-form');
$('#button-fake').on('click', function(e) {
e.preventDefault();
console.info("FAKE CLICKED");
if ($myForm[0].checkValidity()) {
console.info("FORM VALID");
$('#button-real').click();
console.info("FORM SUBMITTED");
}
});
$('#button-real').on('click', function(e) {
console.info('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>Только что понял: если я добавлю e.preventDefault(), он больше не будет запускать сообщения проверки формы HTML 5. Так что это не вариант
Почему вы не можете экстраполировать код на общую функцию и вызвать ее?