Как отключить перезагрузку при запуске функции JS в Laravel

Question

Я сделал эту функцию копирования в буфер обмена.это работает в моем Laravel.Но есть некоторые проблемы.Я могу копировать, но когда я нажимаю кнопку COPY, текущая страница перезагружается.Еще одно, я хотел бы сделать крутой дизайн, такой как Github'S "Clone with HTTPS" в разделе "Использовать Git или оформить заказ с SVN с помощью веб-URL.", Предложение на изображении небольшого окна.Не могли бы вы научить меня, что не так, мой код, пожалуйста?

Форма Laravel здесь, мне нужно написать так, но когда я нажимаю на копию буфера обмена, я не хочу перейти на следующую страницу

  <form action="{{ url('nextpage') }}" method="post">

index.blade.php

<p><span class="js-copytext">{{$post_data['somedata']}}</span></p>
<p><button class="js-copybtn">copy</button></p>

js файл

<script>

var copyEmailBtn = document.querySelector('.js-copybtn');
copyEmailBtn.addEventListener('click', function(event) {

    var copyText = document.querySelector('.js-copytext');
    var range = document.createRange();
    range.selectNode(copyText);
    window.getSelection().addRange(range);
    try {

        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        console.log('Copy command was ' + msg);

    } catch(err) {
        console.log('error');
    }

    window.getSelection().removeAllRanges();
});
</script>

Answer 1

Вам нужно добавить event.preventDefault() в ваш обработчик.

copyEmailBtn.addEventListener('click', function(event) {
    event.preventDefault();
    // The rest of your code...
});