CRUD with Javascript

5

Well, I need to do a CRUD and then a search on what is submitted on my form.

I have already created the page and can already submit my form and show it in a table.

I'm not sure how to do this.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Agenda de Contatos</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
    <header>
        <div class="container">
            <h1>Agenda Contatos</h1>
        </div>
    </header>
    <main class="container">
        <section>
            <h2>Meus Contatos</h2>
            <table>
                <tr>
                    <th>Nome</th>
                    <th>Rua</th>
                    <th>Bairro</th>
                    <th>Telefone Fixo</th>
                    <th>Telefone Celular</th>
                </tr>
                <tbody class="contato">

                </tbody>
            </table>
        </section>
        <section>
            <h2>Cadastro de Contatos</h2>
            <form id="formulario" >
                <fieldset>
                    <label for="campo-nome">Nome:</label>
                    <input id="campo-nome" type="text" placeholder="digite o nome do seu Contato">
                </fieldset>
                <fieldset class="campo-endereco">
                    <label for="campo-endereco">Rua:</label>
                    <input id="campo-endereco" type="text" placeholder="digite o endereço do seu Contato">
                </fieldset>
                <fieldset class="campo-bairro">
                    <label for="campo-bairro">Bairro:</label>
                    <input id="campo-bairro" type="text" placeholder="digite o seu bairro do seu Contato">
                </fieldset>
                <fieldset class="campo-endereco">
                    <label for="campo-telefoneFixo">Telefone Fixo:</label>
                    <input id="campo-telefoneFixo" type="text" placeholder="digite o telefone Fixo">
                </fieldset>
                <fieldset class="campo-TelefoneCelular">
                    <label for="campo-celular">Telefone Celular:</label>
                    <input id="campo-celular" type="text" placeholder="digite o telefone Celular">
                </fieldset>
                <button id="adicionar-contato" class="botao bto-principal">Adicionar</button>
            </form>
        </section>
    </main>
    <script src="js/index.js"></script>
</body>
</html>

index.js

    var contatos = [ 
    document.querySelector("#campo-nome"),
    document.querySelector("#campo-endereco"),
    document.querySelector("#campo-bairro"),
    document.querySelector("#campo-telefoneFixo"),
    document.querySelector("#campo-celular"),
    ];
    console.log(contatos);

    document.querySelector('#formulario').addEventListener("submit", function(event){

    event.preventDefault();

    var tr = document.createElement('tr');

    /*campo é o meu elemento, como se fosse o i.*/
    contatos.forEach(function(posicao) {
        td = document.createElement('td');
        td.textContent = posicao.value;
        tr.appendChild(td);
    });

    var tabela = document.querySelector("table tbody");

    tabela.appendChild(tr);

    for(var i=0;i <=contatos.length;i++){
        this[i].value ='';
    }

    contatos[0].focus();
});
    
asked by anonymous 20.08.2017 / 22:07

1 answer

0

To remove and change you will do the same process by passing the ID.

Remove

To remove, very simple, you will click on the record of the table that you clicked, and send the selected ID. This way you make a delete by passing the ID.

Update

The update is as you did in create. But you will send the ID. Then in the case, you make an update passing the ID also that will send, and changes the fields.

    
21.08.2017 / 20:06