Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Rodrigo Vieira E da Silva

Formulário Modal

Recommended Posts

Olá a todos do forum, tudo bem?

 

To com uma dúvida que vocês aqui podem me ajudar.
Eu criei um formulário para atualizar os dados de um sistema que fiz, porém este formulário foi feito em um modal em javascript muito simples.

Minha dúvida é o seguinte eu tenho um botão editar e quando eu clico nele eu quero que ele abra o modal referente ao registro que estou solicitando, ou seja como abrir o modal com o parâmetro da ID?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Esse aqui é meu modal

 

<div class="windowe" id="janela">
    <a href="#" class="fechar" title="Fechar">&#10006;</a>
    <form id="frmeditar" action="" method="post" class="frms">
        <div id="elastico">
	        <h1>Atualizar dados</h1>
	        <div class="cols">
	            <p>
	            	<input type="hidden" name="id" value="<?=$id;?>">
	                <label>Categoria</label>
	                <select name="categoria" id="categoria" class="categoria">
	                    <option value="<?=$categoria;?>"><?php nomecategoria();?></option>
	                    <option value="0">Selecione</option>
						<option value="4">Clientes ativo</option>
						<option value="2">Contatos</option>
						<option value="1">Fornecedores</option>
						<option value="3">Construtoras e Incorporadoras</option>
	                </select>

	                <label>Segmento</label>
	                <input type="text" name="seguimento" id="seguimento" value="<?=$seguimento;?>" />

	                <label>Empresa</label>
	                <input type="text" name="empresa" id="txtempresa" value="<?=$empresa;?>" />
	            </p>

	            <p>
	                <label>Endereço</label>
	                <textarea name="cadastro_endereco" id="txtendereco"><?=$endereco;?></textarea>
	            </p>
	            <p>
	                <label>Dados da Empresa</label>
	                <textarea name="dados_empresa" id="dateEmpresa"><?=$dempresa;?></textarea>
	            </p>
	        </div>
	        <div class="members">
	            <div class="titles">
	                <label id="tlnome">Nome</label>
	                <label id="tlemail">E-mail</label>
	                <label id="tltelefone">Telefone</label>
	                <label id="tlcelular">Celular</label>
	            </div>

	            <div class="titles">
	                <input type="text" name="cadastro_contato"   id="contato"  class="cnomes"      value="<?=$contato;?>" />
	                <input type="email" name="cadastro_email1"   id="email"    class="cemails"     value="<?=$email1;?>" />
	                <input type="text" name="cadastro_telefone1" id="telefone" class="ctelefones"  value="<?=$telefone1;?>" />
	                <input type="text" name="cadastro_celular1"  id="celular"  class="ccelulares"  value="<?=$celular1;?>" />
	            </div>

	            <div class="titles">
	                <input type="text" name="cadastro_contato2"  id="cadastro_contato2"  class="cnomes"      value="<?=$contato2;?>"/>
	                <input type="email" name="cadastro_email2"   id="cadastro_email2"    class="cemails"     value="<?=$email2;?>"/>
	                <input type="text" name="cadastro_telefone2" id="cadastro_telefone2" class="ctelefones"  value="<?=$telefone2;?>"/>
	                <input type="text" name="cadastro_celular2"  id="cadastro_celular2"  class="ccelulares"  value="<?=$celular2;?>"/>
	            </div>

	            <div class="titles">
	                <input type="text" name="cadastro_contato3"  id="cadastro_contato3"  class="cnomes"      value="<?=$contato3;?>"/>
	                <input type="email" name="cadastro_email3"   id="cadastro_email3"    class="cemails"     value="<?=$email3;?>"/>
	                <input type="text" name="cadastro_telefone3" id="cadastro_telefone3" class="ctelefones"  value="<?=$telefone3;?>"/>
	                <input type="text" name="cadastro_celular3"  id="cadastro_celular3"  class="ccelulares"  value="<?=$celular3;?>"/>
	            </div>

	            <div class="titles">
	                <input type="text" name="cadastro_contato4"  id="cadastro_contato4"  class="cnomes"      value="<?=$contato4;?>"/>
	                <input type="email" name="cadastro_email4"   id="cadastro_email14"   class="cemails"     value="<?=$email4;?>"/>
	                <input type="text" name="cadastro_telefone4" id="cadastro_telefone4" class="ctelefones"  value="<?=$telefone4;?>"/>
	                <input type="text" name="cadastro_celular4"  id="cadastro_celular4"  class="ccelulares"  value="<?=$celular4;?>"/>
	            </div>

	            <div class="titles">
	                <input type="text" name="cadastro_contato5"  id="cadastro_contato5"  class="cnomes"      value="<?=$contato5;?>"/>
	                <input type="email" name="cadastro_email5"   id="cadastro_email15"   class="cemails"     value="<?=$email5;?>"/>
	                <input type="text" name="cadastro_telefone5" id="cadastro_telefone5" class="ctelefones"  value="<?=$telefone5;?>"/>
	                <input type="text" name="cadastro_celular5"  id="cadastro_celular5"  class="ccelulares"  value="<?=$celular5;?>"/>
	            </div>

	            <div class="titles">
	                <input type="text" name="cadastro_contato6"  id="cadastro_contato6"  class="cnomes"      value="<?=$contato6;?>"/>
	                <input type="email" name="cadastro_email6"   id="cadastro_email16"   class="cemails"     value="<?=$email6;?>"/>
	                <input type="text" name="cadastro_telefone6" id="cadastro_telefone6" class="ctelefones"  value="<?=$telefone6;?>"/>
	                <input type="text" name="cadastro_celular6"  id="cadastro_celular6"  class="ccelulares"  value="<?=$celular6;?>"/>
	            </div>

	            <div class="titles">
	                <input type="text" name="cadastro_contato7"  id="cadastro_contato7"  class="cnomes"      value="<?=$contato7;?>"/>
	                <input type="email" name="cadastro_email7"   id="cadastro_email17"   class="cemails"     value="<?=$email7;?>"/>
	                <input type="text" name="cadastro_telefone7" id="cadastro_telefone7" class="ctelefones"  value="<?=$telefone7;?>"/>
	                <input type="text" name="cadastro_celular7"  id="cadastro_celular7"  class="ccelulares"  value="<?=$celular7;?>"/>
	            </div>

	            <div class="titles">
	                <input type="text" name="cadastro_contato8"  id="cadastro_contato8"  class="cnomes"      value="<?=$contato8;?>"/>
	                <input type="email" name="cadastro_email8"   id="cadastro_email18"   class="cemails"     value="<?=$email8;?>"/>
	                <input type="text" name="cadastro_telefone8" id="cadastro_telefone8" class="ctelefones"  value="<?=$telefone8;?>"/>
	                <input type="text" name="cadastro_celular8"  id="cadastro_celular8"  class="ccelulares"  value="<?=$celular8;?>"/>
	            </div>

	            <div class="titles">
	                <input type="text" name="cadastro_contato9"  id="cadastro_contato9"  class="cnomes"      value="<?=$contato9;?>"/>
	                <input type="email" name="cadastro_email9"   id="cadastro_email19"   class="cemails"     value="<?=$email9;?>"/>
	                <input type="text" name="cadastro_telefone9" id="cadastro_telefone9" class="ctelefones"  value="<?=$telefone9;?>"/>
	                <input type="text" name="cadastro_celular9"  id="cadastro_celular9"  class="ccelulares"  value="<?=$celular9;?>"/>
	            </div>

	            <div class="titles">
	                <input type="text" name="cadastro_contato10"  id="cadastro_contato10"     class="cnomes"      value="<?=$contato10?>"/>
	                <input type="email" name="cadastro_email10"   id="cadastro_email10"       class="cemails"     value="<?=$email10?>"/>
	                <input type="text" name="cadastro_telefone10" id="cadastro_telefone10"    class="ctelefones"  value="<?=$telefone10?>"/>
	                <input type="text" name="cadastro_celular10"  id="cadastro_celular10"     class="ccelulares"  value="<?=$celular10?>"/>
	            </div>

	            <input type="button" value="salvar" title="Salvar" id="btnsalvar" />
	        </div>
		</div>
    </form>
</div>

Esse aqui é o Link do meu botão que tem que abrir o modal

<a href='#janela' rel='modal' class='editar' title='Editar' id='".$row["cadastro_id"]."'><img src='edit.png' alt='Editar' id='btnedit' width='24px' height='24px'></a>

 

Aqui está o JavaScript para o modal aparecer:

$("a[rel=modal]").click(function(ev) {
	ev.preventDefault();

	var id = $(this).attr("href");
	var alturaTela = $(document).height();
	var larguraTela = $(window).width();

	$('.mascarae').css({'width': larguraTela, 'height': alturaTela});
	$('.mascarae').fadeIn(1000);
	$('.mascarae').fadeTo("slow", 0.8);

	var left = ($(window).width() / 2) - ($(id).width() / 2);
	var top = ($(window).height() / 2) - ($(id).height() / 2);

	$(id).css({'top': top, 'left': left});
	$(id).show();
});

$(".mascarae").click(function() {
	$(this).hide();
	$(".windowe").hide();
});

$('.fechar').click(function(ev) {
	ev.preventDefault();
	$(".mascarae").hide();
	$(".windowe").hide();
});

Eu quero ele abra o modal já trazendo o formulário com os dados, o que quero saber é como passar o parametro para ele abrir no formulário

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por unset
      Olá, estou enfrentando um problema e ainda não consegui pensar em uma solução, como resolver o problema, eu estou mudando meu sistema para utilizar janelas modal do bootstrap 5, cadastro e edição e funciona bem, porém ao adicionar um editor de texto wysiwyg tipo ckeditor 4, tinymce, summernot, e outros nenhum deles abre o conteudo no textarea, não estou conseguindo entender o motivo, se eu retiro a chamada dos editores os dados são exibidos corretamente, se eu deixo os dados não são carregados, mais os editores abrem normal.
       
      alguem já passou por isso, tem alguma luz? obrigado desde já por qualquer ajuda.


    • Por ment0r
      Boa noite pessoal, tudo bem?
       
      Estou desenvolvendo um sistema simples com exibição de formulário via modal. Uma vez cadastrado o serviço (tabela possui apenas dois campos, id e nome), eles são exibidos numa tabela com um ícone que permite a alteração do nome.

       
      Eu clico no ícone e é chamado um modal que é gerado via ajax (pois são vários registros).
       

       
      Nesse modal é mostrado o serviço e uma vez alterado, o botão Salvar chama uma função que atualiza a tabela servico, concluindo a tarefa. Fiz o mesmo processo pra cadastrar o serviço, com a diferença de que o modal está presente na mesma página, ou seja, não é chamado via ajax.
       
      Eis os códigos:
      <a href="#" onclick="modalUpdate(<?= trim($array['id']) ?>)"> <i class='bx bx-edit'></i> </a> // Trecho onde eu chamo a função modalUpdate. Função btAltServico click:
      $('#btAltServico').click(function() { var inpnome = $('#nome'); var inpid = $('#id'); if (inpnome.val() == '') { swal("Atenção", "Por favor, preencha os campos obrigatórios", "warning"); if (inpnome.val() == '') { inpnome.css("border","2px solid #f94545"); } else { inpnome.css("border",""); } alert(inpnome); alert(inpid); } else { $.ajax({ url: '../inc/ajax/altServico.php', type: 'post', dataType: 'json', // pode ser html data: { nome : inpnome.val(), id : inpid.val() }, success: function(resposta){ if (resposta == 1) { inpnome.val(""); inpnome.css("border",""); swal("Sucesso", "Serviço alterado", "success"); } else { if (resposta == 0) { swal("Erro", "Serviço não alterado. Log de erro gerado.", "error"); } else { swal("Atenção", "Serviço já cadastrado", "warning"); } } } }) } });  
      E modalUpdate.php :
       
      <?php /* * altServico.php * * Script responsável pelo update de serviços na tabela servico * * Função chamada pelo arquivo ajax.js */ //if ($_POST) { require'../conn.php'; require'../../class/class.geral.php'; $geral = new Geral(); $nome = $_POST['nome']; $id = $_POST['nome']; $ativo = 1; // Verifica se o servico já foi cadastrado $sqlVer = "select nome from algo68_db_cliente.servico where nome = '".$nome."' and id <> ".$id.""; $queryVer = mysqli_query($conn, $sqlVer); $resultVer = mysqli_num_rows($queryVer); if ($resultVer > 0) { echo json_encode(2); // servico já cadastrado } else { // Update do servico $sql = "update algo68_db_cliente.servico set nome = '".$nome."', ativo = ".$ativo." where id = ".$id; $query = mysqli_query($conn, $sql); $result = mysqli_affected_rows($conn); if ($result > 0) { echo json_encode(1); // alterou o servico } else { $geral->logErro(date('d/m/Y|H:i:s'), @$_SERVER[REQUEST_URI], 'AlterarServico', mysqli_error($conn)); echo json_encode(0); // não alterou o servico } } //} ?> O problema é que quando clico no botão Salvar, não acontece nada - se eu colocar um alert qualquer na função click, só pra saber se está chegando, também não da nada. E está da mesma forma que o cadastro de serviço, que funciona perfeitamente.

      Bom, é isso pessoal, tentei ser o mais breve e especifico possível. Qualquer ajuda é bem vinda, obrigado a todos, desde já.
    • Por babylon
      Ola amigos,
       
      Estava querendo criar algo para meu site, um botao igual do site abaixo para calcular formas de pagamento "ver formas de pagamento":
       
      https://www.chipart.com.br/pc-gamer-level-one-black-amd-3400g
       
      Segue imagem em anexo.
       
      Alguem poderia me ajudar se tem algum script algo pronto ou que ajude para abrir pop up modal?
       
      Obrigado a todos.
       
       

    • Por Sapinn
      Estou precisando colocar em um site um propriedade que toda vez que clicar em uma imagem apareça uma janela modal com um slide show em que você pode passar as imagens. Por exemplo se tiver a foto de um celular quando eu clicar nela aparecera um slide show, onde você pode ir passando e vendo outras imagens do celular. Eu já tentei fazer mais sempre dá erro quando eu coloco várias imagens e tento chamar uma por uma. Não sei se eu preciso chamar cada slide ou se existe uma forma simples de se fazer isso. Vou postar aqui um código que eu fiz:
       
      CSS:
      * {   box-sizing:border-box;   font-family: Arial; } .slideshow-container {   max-width: 800px;     position: relative;   margin: auto; } .mySlides {   display: none; } .prev, .next {   cursor: pointer;   position: absolute;   top: 50%;   width: auto;   margin-top: -22px;   padding: 16px;   color: #4285f4;   font-weight: bold;   font-size: 28px;   transition: 0.6s ease;   border-radius: 0 3px 3px 0;   user-select: none; } .next {   right: 0;   border-radius: 3px 0 0 3px; } .prev:hover, .next:hover {   background-color: rgba(0,0,0,0.8); } .dot {   cursor: pointer;   height: 15px;   width: 15px;   margin: 10px 2px;   background-color: #bbb;   border-radius: 50%;   display: inline-block;   transition: background-color 0.6s ease; } .active, .dot:hover {   background-color: #4285f4; } .fade {   -webkit-animation-name: fade;   -webkit-animation-duration: 1.5s;   animation-name: fade;   animation-duration: 1.5s; } .img_slide{     width: 100%;     height: 500px; } /* ----------------MODAL--------------------------------- */ .modal-container{     width: 100vw;     height: 100vh;     background: rgba(0, 0, 0, .8);     position: fixed;     top: 0px;     left: 0px;     z-index: 2000;     display: none;     justify-content: center;     align-items: center;     font-family: Arial, Helvetica, sans-serif; } .modal-container.mostrar{     display: flex; } @keyframes modal{     from{         opacity: 0;         transform: translate3d(0, -60px, 0);     }     to{         opacity: 1;         transform: translate3d(0, 0, 0);     } } .mostrar .modal-content{     animation: modal .3s; } .fechar{     position: absolute;     top: 8px;     right: 3px;     width: 30px;     height: 30px;     font-weight: bold;     color: #4285f4;     font-size: 25px;     font-family: Arial, Helvetica, sans-serif;     cursor: pointer;     background: transparent;     border: none; } @media (max-width: 600px) {     .img_slide{         width: 100%;         height: 300px; } }  
       
      JAVASCRIPT:
      var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) {   showSlides(slideIndex += n); } function currentSlide(n) {   showSlides(slideIndex = n); } function showSlides(n) {   var i;   var slides = document.getElementsByClassName("mySlides");   var dots = document.getElementsByClassName("dot");   if (n > slides.length) {slideIndex = 1}    if (n < 1) {slideIndex = slides.length}   for (i = 0; i < slides.length; i++) {       slides[i].style.display = "none";    }   for (i = 0; i < dots.length; i++) {       dots[i].className = dots[i].className.replace(" active", "");   }   slides[slideIndex-1].style.display = "block";    dots[slideIndex-1].className += " active"; } function iniciaModal(modalID){     const modal = document.getElementById(modalID);     if(modal){         modal.classList.add('mostrar');          modal.addEventListener('click',(e)=>{         if(e.target.id == modalID || e.target.className == 'fechar'){             modal.classList.remove('mostrar');         }     });     }      } const botaoChama = document.querySelector('#botaoChama');  botaoChama.addEventListener('click',()=>{     iniciaModal('modal');      }); const botaoChama2 = document.querySelector('#botaoChama2');  botaoChama2.addEventListener('click',()=>{     iniciaModal('modal2'); });  
       
      HTML:
      <div id="modal" class="modal-container">           <button class="fechar">X</button> <div class="slideshow-container">          <div class="mySlides fade">              <img src = "https://wallpapercave.com/wp/wp3473585.jpg" class="img_slide">           </div>        <div class="mySlides fade">             <img src = "https://i.pinimg.com/originals/cd/7b/5c/cd7b5c8d4687b5c98a445127926a56e2.jpg" class="img_slide">            </div>        <div class="mySlides fade">             <img src =" https://wallpapercave.com/wp/wp2043649.png " class="img_slide">           </div>             <a class="prev" onclick="plusSlides(-1)">❮</a>     <a class="next" onclick="plusSlides(1)">❯</a>     <div style="text-align:center">         <span class="dot" onclick="currentSlide(1)"></span>          <span class="dot" onclick="currentSlide(2)"></span>          <span class="dot" onclick="currentSlide(3)"></span>        </div>   </div>    </div>  <div id="modal2" class="modal-container">           <button class="fechar">X</button> <div class="slideshow-container">          <div class="mySlides fade">              <img src="https://wallpapercave.com/wp/wp9688141.jpg" class="img_slide">           </div>        <div class="mySlides fade">             <img src="https://wallpapercave.com/wp/wp8480719.jpg"  class="img_slide">            </div>        <div class="mySlides fade">             <img src="https://wallpapercave.com/wp/wp9683280.jpg"  class="img_slide">           </div>             <a class="prev" onclick="plusSlides(-1)">❮</a>     <a class="next" onclick="plusSlides(1)">❯</a>     <div style="text-align:center">         <span class="dot" onclick="currentSlide(4)"></span>          <span class="dot" onclick="currentSlide(5)"></span>          <span class="dot" onclick="currentSlide(6)"></span>        </div>   </div>    </div> <button id="botaoChama">Modal</button> <button id="botaoChama2">Modal 2</button>
    • Por Rasp
      Fala galera! Estou com a seguinte situação e queria uma ajuda de pôr onde seguir o meu raciocínio para resolver:
       
      Possuo um array X com dados que vem do meu backend, exemplo:
       
      array = [ 0: [1, 'Banana', '3.00', '...'], 1: [2, 'Maça', '4.00', '...'], 2: [3, 'Abacaxi', '5.00', '...'] ];
      Monto para o usuário uma tela com a tabela desses dados, com informações resumidas e um botão "detalhar" para exibir o conteúdo em um modal:
       
      | ID | Fruta | Preço| Ação | | 1 | Banana | 3.00 | Detalhar | | 2 | Maça | 4.00 | Detalhar | | 3 | Abacaxi| 5.00 | Detalhar | Até aí tudo certo, funciona redondo. Mas preciso fazer com que ao abrir o modal, independente do registro que cliquei (ID 1, 2 ou 3), eu possa "navegar" entre os outros registros no modal (possuo botões para isso) sem precisar sair do modal, como se fosse uma paginação.
       
      Como poderia construir essa lógica?
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.