Jump to content
Samuel Candido

Colocar variável $_GET em link do modal

Recommended Posts

Olá todos. Estou fazendo um projeto e gostaria que, após o usuário clicar no botão de deletar, abra um modal de confirmação.

Se o usuário confirmar, ele é direcionado para o script que deleta a informação do banco.

Porém, não consigo fazer com que o link do modal receba como parâmetro $_GET o id da informação.

O código do modal é este.

<div id="confirmDelete" class="modal">
	<div class="modal-content">
		<h4 class="center">Confirmar Deleção de Anúncio</h4>
		<p>Deseja mesmo deletar o anúncio?</p><br><br>
		<p class="right-align"><b>ATENÇÃO:</b> AÇÃO PERMANENTE!</p>
	</div>
	<div class="modal-footer">
		<a class="btn-flat waves-effect waves-green modal-action" onclick="deletar();">Sim, deletar!</a>
		<a class="btn-flat waves-effect waves-red modal-action modal-close" href="anuncios.php">Não, continue com ele!</a>
	</div>
</div>

E para preencher as informações da tabela em que estou escrevendo os dados do banco faço o seguinte.

echo "
	<tr>
		<td>".$row['id']."</td>
		<td>".$row['nome']."</td>
		<td>".$row['descricao']."</td>
		<td><img class='responsive-img' src='../../".$fotoExibida[0]."' style='height:100px;'/></td>
		<td>R$ ".$row['preco']."</td>
		<td>".$row['tags']."</td>
		<td>".$row['vend']."</td>
		<td>".$row['t_anun']."</td>
		<td><a class='btn waves-effect waves-light' href='editar.php?id=".$row['id']."'><i class='material-icons'>mode_edit</i></a><br><br><a class='btn waves-effect waves-light' href='?id=".$row['id']."#confirmDelete'><i class='material-icons'>delete_forever</i></a></td>
	</tr>
";

Mas o modal nem abre desse jeito, e quando abre, não consigo pegar o id.

Alguém tem alguma solução?

Share this post


Link to post
Share on other sites

Provavelmente o modal tenha um modo para você passar parâmetros, você terá que ler a documentação do mesmo, pois isso varia conforme  vontade de quem desenvolveu o modal.

Share this post


Link to post
Share on other sites

Uma maneira 'easy' seria utilizar o confirm() do JavaScript.

 

Porém se quer usar o modal é necessário estudar o mesmo como o @ESerra disse

Share this post


Link to post
Share on other sites

Agora entendi sua duvida, e ela não tem relação nenhuma com o Modal.

 

 

 

E sim como passar variáveis do php para o JavaScript/HTML.

 

Exemplo de como passar parametros para o JS/HTML

Chamando a página por exemplo:

http://localhost/index.php?id=2

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	
	
	<h1>Número - <?php echo $_GET['id']?></h1>
	
	
	<script type="text/javascript">
		var idModal = '<?php echo $_GET['id']?>';
		alert(idModal);
	
	</script>
</body>
</html>

 

 

Ok agora que sabemos como manipular informações do php e passar para o JS/HTML

 

Citar

Se o usuário confirmar, ele é direcionado para o script que deleta a informação do banco.

Pra isso você tem algumas opções.

 

Como deveria enviar isso?

Via Form/GET ou POST (form mais simples)?

AJAX?

 

Exemplo do form/GET (misturar php com html fica óóóó Uma beleza)

<!-- Modal Trigger -->
<a class="waves-effect waves-light btn" href="#modal1">Modal</a>

<!-- Modal Structure -->
<div id="modal1" class="modal">
	<div class="modal-content">
	  <h4>Modal Header</h4>
	  <p>A bunch of text</p>
	</div>
	<div class="modal-footer">
		<a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat ">Cancelar</a>	
		
		<form method="GET" action="delete.php">
			<input type="hidden" name="id" value="<?php echo $_GET['id'];?>"/>		
			<input class="waves-effect waves-green btn-flat " type="submit" value="Excluir" />
		</form>
		
	</div>
	</div>

Então se o cara clicar 'Cancelar ele fecha... se ele clicar 'Excluir' é disparado o form/get.

 

Share this post


Link to post
Share on other sites

Desculpe a ignorância, mas como conseguiria aplicar esse método no meu caso?

A imagem é como o resultado é apresentado ao usuário.

E pra preencher a tabela, estou usando php com o seguinte código.

echo "<tr>
		<td>".$row['id']."</td>
		<td>".$row['nome']."</td>
		<td>".$row['descricao']."</td>
		<td><img class='responsive-img' src='../../".$fotoExibida[0]."' style='height:100px;'/></td>
		<td>R$ ".$row['preco']."</td>
		<td>".$row['tags']."</td>
		<td>".$row['vend']."</td>
		<td>".$row['t_anun']."</td>
		<td><a class='btn waves-effect waves-light' href='editar.php?id=".$row['id']."'><i class='material-icons'>mode_edit</i></a><br><br><a class='btn waves-effect waves-light' href='?id=".$row['id']."#confirmDelete'><i class='material-icons'>delete_forever</i></a></td>
	</tr>
";

Eu tentei passar o id pelo botão de delete, mas ele não abre o modal. Tentei também com o data-target, o modal abre, mas não deleta.

Screenshot_1.png

Share this post


Link to post
Share on other sites
1 hora atrás, Samuel Candido disse:

Eu tentei passar o id pelo botão de delete, mas ele não abre o modal. Tentei também com o data-target, o modal abre, mas não deleta.

 

Provavelmente você cometeu algum erro de JS?

Abriu o Navegador na aba console? (Ctrl + Shift + J -> no Google Chrome)

 

Falando nisso...

Você importou o jQuery no seu projeto?

Você importou o materialize.min.js no seu projeto?

Como informado na própria documentação?

http://materializecss.com/getting-started.html

 

Verificou se o mesmos estão sendo carregados  corretamente?

 

Citar

mas como conseguiria aplicar esse método no meu caso?

O exemplo eu dei exatamente em cima do seu código/contexto, caso queira que alguem faça para você a area é essa:

https://forum.imasters.com.br/forum/87-empregos-e-parcerias/

 

 

Novamente... faça por partes,

Abre a documentação do MaterializeCss, esquecendo por hora do php, a hora q conseguir manipular 100% o modal em uma pagina de testes isolada, pense no seu sistema.

 

 

 

 

Share this post


Link to post
Share on other sites

Obs:  data-target é mais focado qnd se trabalha com JS.

 

Outra coisa q vale a pena citar.

é eu fiz um pequeno ajustes no meu post, releia ele.

Basicamente esqueci de colocar os hiddens no form:

<form action="delete.php" method="GET">
	<input type="hidden" name="id" value="1" />
</form>

 

 

Share this post


Link to post
Share on other sites

outra opção é passar direto pelo link, ex:

 

<a href="delete.php?id=156">Excluir</a>

Porem isso é bem básico em html.



Recomendo a leitura:

https://www.caelum.com.br/apostila-html-css-javascript/

Share this post


Link to post
Share on other sites

Consegui fazer. Obrigado!

Mas, aproveitando o tópico, sabe como faço por método POST?

Eu tentei assim:

HTML

<div id="confirm" class="modal">
	<div class="modal-header">
		<a class="btn-flat waves-effect modal-action modal-close">&times</a>
		<h4 class="center">AVISO!</h4>
	</div>
	<div class="modal-content">
		<p>Ao clicar em ENVIAR, você nos enviará um e-mail com as informações preenchidas neste formulário, se aprovarmos sua solicitação você será notificado em seu menu de "Alertas" caso já tenha uma conta, caso contrário entraremos em contato por e-mail ou celular</p>
	</div>
	<div class="modal-footer">
		<form method="POST" action="actions/enviar_anuncio.php">
			<input type="hidden" name="nome" id="nomeH">
			<input type="hidden" name="email" id="emailH">
			<input type="hidden" name="conta" id="contaH">
			<input type="hidden" name="celular" id="celularH">
			<input type="hidden" name="produto" id="produtoH">
			<button class="btn-flat waves-effect waves-green modal-action modal-close agree" type="submit">Entendi!</button>
		</form>
	</div>
</div>

<form>
	<div class="row">
		<div class="input-field col s12">
			<i class="material-icons prefix">account_circle</i>
			<input id="nome" type="text" class="validate" name="nome" required>
			<label for="nome">Nome completo</label>
		</div>
	</div>
	<div class="row">
		<div class="input-field col s8 m10">
			<i class="material-icons prefix">contact_mail</i>
			<input id="email" type="text" class="validate" name="email" required>
			<label for="email">E-mail</label>
		</div>
		<div class="input-field col s4 m2">
			<input id="conta" type="checkbox" name="conta" value="X">
			<label for="conta" class="flow-text">Já tenho conta.</label>
		</div>
	</div>
	<div class="row">
		<div class="input-field col s12">
			<i class="material-icons prefix">stay_primary_portrait</i>
			<input id="celular" type="tel" class="validate" name="celular">
			<label for="celular">Celular</label>
		</div>
	</div>
	<div class="row">
		<div class="input-field col s12">
			<i class="material-icons prefix">perm_media</i>
			<input id="produto" name="produto" class="validate" type="text" required>
			<label for="produto">O que deseja vender?</label>
		</div>
	</div>
	<div class="row right">
		<button class="aviso waves-effect waves-light btn" data-target="confirm"><i class="material-icons right">send</i>Enviar</button>
	</div>
</form>

E o JS

$('.aviso').on('click', function(){
    var nome = $('#nome').val();
    var email = $('#email').val();
    var conta = $('#conta').val();
    var celular = $('#celular').val();
    var produto = $('#produto').val();
    $('#nomeH').val(nome);
    $('#emailH').val(email);
    $('#contaH').val(conta);
    $('#celularH').val(celular);
    $('#produtoH').val(produto);
    $('#confirm').modal('open');
});

Estou fazendo algo de errado?

O formulário envia normalmente, mas, se deixar algo sem preencher, não envia.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Pedro_silva
      olá Devs Estou tendo uma dificuldade na hora de formatar uma pagina html convertendo ela para pdf usando o dompdf que é uma biblioteca do php, segue em anexo o erro. A foto mostra uma tabela que foi gerada através do banco de dados mas na hora que o pdf foi gerado ao vez de aparecer outra folha com os restante dos dados ele fica dessa forma e eu não faço a minima ideia de como vou resolver isso.

    • By alibbs91
      Olá, pessoal.
      Alguém aqui já fez/deu curso no iTalk? 
      Estava pesquisando rendas extras na internet e me interessei pelo site, onde poderia ensinar português, mas nunca tinha ouvido falar desse curso, queria alguma referência.
      Só vi falando dele nesse artigo aqui onde eu peguei a dica.
      Obrigada!!
       
    • By Gilberto Jr
      Boa tarde;
       
      Eu estou com um probleminha aqui que eu não consegui resolver.
       
      O que eu quero, eu tenho uma pagina com 2 modal.
       
      Um modal dentro do outro.
      Exemplo: 
      Quando eu abro um MODAL, eu tenho uma botão para abrir um novo modal. Ele abre certinho, porem na hora de fechar. Eu clico no botão fechar, ele fecha os dois MODAL.
       
      E eu quero fechar somente o segundo modal que abre.
       
      Abaixo segue o meu codigo.
       
      <div class="modal fade" id="ListagemRede" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title font-weight-bold" id="exampleModalLabel">LISTA DE REDES CADASTRADAS</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <table class="table text-center"> <thead> <tr> <th scope="col">#</th> <th scope="col">Nome Rede</th> <th scope="col">Ação</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Rede 1</td> <td> <i class="fa fa-pencil fa-2x" style="color:#FB8A52;" data-toggle="modal" data-target="#EditarRede<%=r("id")%>"></i> <!-- Modal Editar a Rede --> <div class="modal fade" id="EditarRede<%=r("id")%>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Título do modal</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form method="post" action="insere_rede.asp" id="forcadrede"> <div class="form-row"> <div class="form-group col-md-4"> <input type="hidden" name="master" value="1" required> <label for="inputEmail4" class="font-weight-bold">*Nome Rede</label> <input type="text" name="nome" class="form-control blocochamada text-center" id="inputEmail4" placeholder="*Nome da Rede" autocomplete="off" required> </div> <div class="form-group col-md-4"> <label for="inputEstado" class="font-weight-bold">*Grupo Coord.</label> <select id="inputEstado" name="coorden" class="form-control blocochamada text-center" autocomplete="off" required> <% set rscoord = conn.execute("select * from Inv_coord_grupo") %> <option selected>Escolher...</option> <% while rscoord.eof = false %> <option value="<%=rscoord("id")%>"><%=rscoord("nome_coordenador")%></option> <% rscoord.movenext wend %> </select> </div> <div class="form-group col-md-4"> <label for="inputCEP" class="font-weight-bold">*Contrato Qtde</label> <input type="number" name="contratoqtde" class="form-control blocochamada text-center" id="inputCEP" placeholder="Contrato Qtde" autocomplete="off" required> </div> </div> <div class="form-row"> <div class="form-group col-md-4"> <label for="inputEmail4" class="font-weight-bold">*Valor Contrato</label> <input type="text" name="vlrcontrato" class="form-control blocochamada text-center" id="vlrContrato" placeholder="*Valor Contrato" autocomplete="off" required> </div> <div class="form-group col-md-4"> <label for="inputCEP" class="font-weight-bold">*Valor Cont. Adici.</label> <input type="text" name="vlrcontadici" class="form-control blocochamada text-center" id="vlrContAdicion" placeholder="Valor Cont. Adici." autocomplete="off" required> </div> <div class="form-group col-md-4"> <label for="inputEstado" class="font-weight-bold">*Status</label> <select id="inputEstado" name="status" class="form-control blocochamada text-center" autocomplete="off" required> <option selected>Escolher...</option> <option value="1">Ativo</option> <option value="0">Desativado</option> </select> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary btnfechar" data-dismiss="modal">Fechar</button> <button type="submit" class="btn btn-primary btnsubmit">Salvar</button> </div> </form> </div> </div> </div> </div> </td> </tr> </tbody> </table> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button> </div> </div> </div> </div> Quem puder me ajudar.
       
      Att;
      Gilberto Jr
    • By Ted2370
      Bom, provavelmente estou cometendo algum erro bobo, mas como sou leigo, vou pedir a ajuda de vocês ^^
       
      A ideia é que a função somar() tenha que ir somando o input adicionado já com o antigo, mas ele fica adicionando  e não somando :( alguém poderia apontar o erro?
      Já tentei usar o parseFloat e o parseInt, mas acho que não consegui usar de forma correta, talvez seja essa a falha
       
      HTML
      <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div> <!--Input dos Numeros--> <input type="number" name="" id="input"> <!--Botão para Soma--> <input type="button" value="OK" onclick="somar()"> <br> <br> <!--Resultado--> <input type="number" name="" id="resultado" readonly='true'> </div> <script src="main.js"></script> </body> </html> JS
      const { app, BrowserWindow } = require('electron') function createWindow () { // Cria uma janela de navegação. let win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) // e carregar o index.html do aplicativo. win.loadFile('index.html') } // Função do botao para ir somando a cada numero que colocado no input function somar(){ let input = window.document.getElementById('input').value let resultado = window.document.getElementById('resultado') resultado = resultado.value += input } app.on('ready', createWindow)  
    • By guilherme_soi
      Ao acessar o meu aplicativo recebo a seguinte mensagem: 'the dbname and launch parameters must be specified on first run' como resolver?
       
      Ao acessar o meu aplicativo recebo a seguinte mensagem: 'the dbname and launch parameters must be specified on first run' como resolver? Existe algo que possa ser feito?
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.