Copy and paste button causing page to submit

Question

I have created a button which copies text from my page to the clipboard. It is working but when I click on the button, it also submits the page. How can I stop the page from being submitted?

 
If you know anyone else who would be eligible and willing to complete this survey, please copy the link below and share this with the person/people you think may be eligible to complete the survey. You can share this link with as many people as you like:<br><br>
<input type="text" value="survey_link_is_shown_here" id="myInput">
<br><br>
<button onclick="myFunction()">Copy link</button>

<script>
function myFunction() {
  /* Get the text field */
  var copyText = document.getElementById("myInput");

  /* Select the text field */
  copyText.select();
  copyText.setSelectionRange(0, 99999); /* For mobile devices */

  /* Copy the text inside the text field */
  navigator.clipboard.writeText(copyText.value);
  
  
}
</script>
 

cheers,
Paul

Answer 1

Buttons in form elements default to type=submit, so we just need to set the button's type like this:

<button type="button" onclick="myFunction()">Copy link</button>

Comments

Thank you Zachary!