samedi 2 mars 2019

How to turn off reload when JS function starts in Laravel

I made this clipboard copy function. it work at my Laravel. But there are some problem. I can copy but when I click the COPY button current page reload. Another thngs is I would like to make cool design like Github'S "Clone with HTTPS" under "Use Git or checkout with SVN using the web URL. " sentence at small window's image. Could you teach me what is wrong my code please?

Laravel's form is here I need to write like this but when click the clipboard copy I don't want to go nextpage

  <form action="" method="post">

index.blade.php

<p><span class="js-copytext"></span></p>
<p><button class="js-copybtn">copy</button></p>

js file

<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>



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire