3

Estou desenvolvendo um CRUD básico, e eu preciso que quando o usuário clique em EDITAR, abra um form embaixo, ou do lado, não importa, com os campos para ele editar tais informações, e quando clicar em 'OK', o campo desapareça e mostre os campos editados.inserir a descrição da imagem aqui

<?php
        $sql = "SELECT * FROM postagens";
        $result = $postagens->select();
        while ($array = mysql_fetch_array($result)){
            echo '<h2><li>' .$array['titulo'].'<h2></li>
            <h4><li>' .$array ['conteudo'].'</li></h4>
            <h4><li>'.$array['id'].'</li></h4>
            <a href="Postagens/editarPost.php"><input type="button" value="Editar"></a>
            <a href="index.php?exid='.$array['id'].'"><input type="button" value="Excluir"></p>';
    ?>
10
  • Coloque o código para ficar mais fácil de lhe ajudar
    – LocalHost
    29/05/2016 às 18:06
  • está usando jquery? 29/05/2016 às 18:15
  • Não estou usando, mas creio que precise, não entendo muito bem. A ideia seria fazer um form oculto, para quando o usuário clicar em editar, ele aparecer, com a opção de atualizar os campos e dar o submit no mesmo. 29/05/2016 às 18:18
  • coloquei a respota com jquery aí 29/05/2016 às 18:21
  • Certo, muito obrigado pela ajuda e disposição. Valeu ! 29/05/2016 às 18:24

2 Respostas 2

1

Tem aqui um exmplo de como fazer show/hide ao form:

// carregar no botão para editar e o form aparece
var btn_editar = document.getElementById('btn_editar');
btn_editar.addEventListener('click', function() {
    document.getElementById('form_editar').style.display = 'block';
});


// carregar no botão para esconder o form
var btn_hide = document.getElementById('btn_hide');
btn_hide.addEventListener('click', function() {
    document.getElementById('form_editar').style.display = 'none';
});
#form_editar {
  display:none;
}
<button id="btn_editar">
Editar
</button>
<button id="btn_hide">
Esconder Form
</button>
<form id="form_editar">
<input type="text" placeholder="nome">
<input type="email" placeholder="email">
</form>

JSFIDDLE

1

Coloque esse código com jquery dentro da função ready do javascript para rodá-lo.

Com jquery:

$('#id-do-botão-editar').click(function(e){
     $('#id-do-form').hide();
     $('#area-com-os-campos-pra-editar').show();
});

Chame essa função no evento onclick do seu botão editar:

Com javascript puro:

function oculta(){
     document.getElementById("id-do-form").style.display= "none";
     document.getElementById("area-com-os-campos-pra-editar").style.display= "inline";
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .