Javascript Criar Aviso ao clicar em botão

David Martinho · 8 de novembro de 2021

Bom Dia pessoal.

Eu gostaria de colocar um aviso de alerta ao clicar em um botão de eliminar material para a pessoa ter a certeza que quer eliminar, tipo isso:

Mas não queria usar Javascript, será que tem como?

Ou caso seja preciso javascript se alguém souber como posso associá-lo a esse código para ao clicar no link me aparecer o alerta e caso diga sim redirecionar para o link:

 echo "<td><a href=\"eliminarAS11.php?id={$row['Referência']}&operacao=eliminar\"><img src='rem.png'></a>";

David Martinho · 8 de novembro de 2021

Já consegui colocar o alerta porém ao clicar em OK e Cancelar, o site elimina o material, como posso fazer para ao clicar em cancelar ele não eliminar?

Código do alert:

	
	<script type="text/javascript">

function pergunta() {

	var mensagem;
	var retorno = confirm("Clique em um dos botões");
	if (retorno == true)
	{
		mensagem = "Operação confirmada";

	}
	else
	{
		mensagem = "Você cancelou a operação";

	}
	document.write(mensagem);
}

</script>

David Martinho · 9 de novembro de 2021

Já consegui mas desde já agradeço.

Para quem precisar tem aqui o código feito em PHP para ao clicar no link, abrir o alert:

echo "<td><a href=\"#\" onclick=\"return confirm('De certeza que quer eliminar este material?');\"></a>";

GabrielSennaMs · 9 de novembro de 2021

Para resolver o seu problema você pode adicionar um evento de click do link, no caso no elemento de (a), você pode adicionar o método "preventDefault()" para interromper o evento de troca de página e fazer a pergunta usando o método "confirm()" e assim redirecionando o usuário de acordo com a sua escolha.

Exemplo:

<?php

$fakeRow = [
    ["Referência" => 1],
    ["Referência" => 2],
];

?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>LINK</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach($fakeRow as $row): ?>
                    <tr>
                        <td>
                            <a class="link-eliminar" href="eliminarAS11.php?id=<?= $row['Referência'] ?>&operacao=eliminar">
                                <img src='rem.png'>
                            </a>
                        </td>
                    </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
        <script>
            window.onload = function()
            {
                const links = document.querySelectorAll(".link-eliminar");

                for (var index = 0; index < links.length; index++)
                {
                    links[index].addEventListener("click", function(event) {
                        event.preventDefault();
                        
                        const a = event.currentTarget;

                        if (confirm("Você realmente deseja excluir esse coluna?"))
                        {
                            window.location.href = a.href;
                        }
                    });
                }
            }
        </script>
    </body>
</html>