Make a hidden form

Question

Make a hidden form

Navigation

#1 by (1 votes)
#2 by (1 votes)

3

I'm developing a basic CRUD, and I need it when the user clicks EDIT, open a form below, or the side, it does not matter, with the fields for it to edit such information, and when you click OK, the field disappears and show the edited fields.

<?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>';
    ?>

javascript html css

asked by anonymous 29.05.2016 / 19:59

2 answers

1

Place this code with jquery inside the javascript ready function to run it.

With jquery:

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

Call this function in the onclick event of your edit button:

With pure javascript:

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

29.05.2016 / 20:21

Implement the Filter Access Control - JSP How to view or download any PDF file in WebView?

score 1 · Accepted Answer

here is an example of how to show / hide the 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