Hello everyone! I'm currently working on a small project using Django and JavaScript. I am trying to implement a button that allows users to copy information to the clipboard. However, the buttons are dynamic and the site is not using HTTPS, so I cannot use "navigator.clipboard.writeText" at the moment. I have managed to retrieve the information through the specified attributes in my button, but I am stuck on how to actually copy this information to the clipboard. As a newbie, any help or guidance on this would be greatly appreciated :)
Below is the main piece of code:
{% for item in object_list %}
<tr>
<td class="th-width">{{ item.user.company.name }}</td>
<td class="th-width">{{ item.user.user_name }}</td>
<td class="th-width">{{ item.user.full_name }}</td>
<td class="th-width email-column">{{ item.user.email }}</td>
<td class="th-width">{{ item.expire_date }}</td>
<td class="th-width">{{ item.avt_version}}</td>
<td class="th-width">{{ item.license_avt }}</td>
<td class="th-width">{{ item.generated_user.username }}</td>
<td class="th-width">
<button class="control button copy-btn btn" company-name="{{item.user.company.name}}" user-name="{{item.user.user_name}}" full-name="{{item.user.full_name}}" email="{{item.user.email}}" expire-date="{{item.expire_date}}">Copy information</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<script>
const copyBtns = [...document.getElementsByClassName("copy-btn")]
copyBtns.forEach(btn => btn.addEventListener('click', () => {
const companyName = btn.getAttribute("company-name")
const userName = btn.getAttribute("user-name")
const fullName = btn.getAttribute("full-name")
const email = btn.getAttribute("email")
const expireDate = btn.getAttribute("expire-date")
console.log(companyName)
console.log(userName)
console.log(fullName)
console.log(email)
console.log(expireDate)
btn.textContent = "Copied";
setTimeout(() => {
btn.textContent = "Copy information";
}, 1350);
}));
</script>