Make a hidden form

Asked

Viewed 225 times

3

I am developing a basic CRUD, and I need that when the user click EDIT, open a form below, or side, no matter, with the fields for him to edit such information, and when click 'OK', the field disappear and show the edited fields.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>';
    ?>
javascript html css

  • Put the code to make it easier to help you

  • is using jquery?

  • I’m not wearing it, but I think I do, I don’t quite understand. The idea would be to make a hidden form, so when the user click edit, it appears, with the option to update the fields and give the Submit in it.

  • I put the answer with jquery there

  • Okay, thank you so much for your help and willingness. Thanks !

  • worked out? if it didn’t work out, just say!

  • put tbm an option without using jquery, if you prefer!

  • Jean, define an id or at least a name for each html element of yours, so it makes it easy to control and maintain the elements of your page

  • I got it, I added your answer to the one from the partner down there, and I got it :D I started seeing js, jquery, and the like a week ago, so I’m not very familiar, but you guys helped me a lot, thank you very much!

  • Thank you! Since you solved your problem, choose one of the answers as correct, to indicate that your doubt has been solved.

Show 5 more comments

2 answers

1

Put this jquery code 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 from 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";
}

1


Has here an example of how to show/Hide to 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

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.