Export data from an array to a table on the same page using a javascript function?

Navigation
0

I want form data to be printed in the following table when you press the insert button. 

<tr>
    <th>Nome</th>
    <th>Data de Nascimento</th>
    <th>CPF</th>
    <th>RG</th>
    <th>Email</th>
    <th>Código de Acesso</th>
</tr>

    Registration table               

    

<form name="form1" onsubmit="return fasle">
    <table align="center">
        <h1 align="center">Exercicio</h1>
            <tr>
                <td> Nome: </td> <td> <input id="nomeID" /> </td>
            </tr>

            <tr>
                <td> Data de Nascimento: </td>  <td><input type="text" name="data" onKeyPress="MascaraData(form1.data);"
                maxlength="10" onBlur= "ValidaDataform1.data);"></td>
            </tr>

            <tr>
            <td> CPF:</td> <td> <input type="text" name="cpf" onBlur="ValidarCPF(form1.cpf);" onKeyPress="MascaraCPF(form1.cpf);" maxlength="14"/></td> 
            </tr>

            <tr>
                <td>RG:</td>    <td><input id="rgID" /></td>
            </tr>

            <tr>
                <td>Email:</td>     <td><input id="emailID" /> </td>
            </tr>
            <tr>
                <td>Código de acesso:</td>  <td><input  id="codigoID" /></td>
            </tr>
            <tr>
                <td>Senha:</td>     <td><input  id="senhaID" /></td>
            </tr>
            <tr>
                <td>Confirmação de senha:</td>      <td><input  id="confirmaID" /></td>
            </tr>
    </table>
    <div align="center">                                            
        <table >
            <tr>
                <td >
                    <button onclick="inserir()" type="submit">Inserir</button>
                </td>
            </tr>                                           
        </table>
    </div>
    <br>
        <table border="1" align="center">
            <caption></caption>
            <thead>
                <tr>
                <th>Nome</th> <th>Data de Nascimento</th> <th>CPF</th> <th>RG</th> <th>Email</th> <th>Código de Acesso</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td id="nome"></td> <td id="nascimento"></td>   <td id="cpf"></td> <td id="rg"></td>    
                    <td id="email"></td> <td id="codigo"></td>  
                </tr>

                <tr>
                    <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> 
                </tr>

                <tr>
                    <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> 
                </tr>

                <tr>
                    <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> 
                </tr>

                <tr>
                    <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> 
                </tr>

            </tbody>
        </table>
    </form>
</body>

    
asked by anonymous 28.01.2016 / 19:34

1 answer

0

Do you want to pass txts values to the correct table? See the example below (it's to save in an array, but as the question is just to transpose the information, I did not implement it. 

function inserir() {

  nome = document.getElementById("nomeID").value;
  dtNasc = document.getElementById("data").value;
  cpf = document.getElementById("cpf").value;
  rg = document.getElementById("rgID").value;
  email = document.getElementById("emailID").value;
  codigo = document.getElementById("codigoID").value;

  var table = document.getElementById("linhas");

  var row = table.insertRow();

  var cell1 = row.insertCell();
  var cell2 = row.insertCell();
  var cell3 = row.insertCell();
  var cell4 = row.insertCell();
  var cell5 = row.insertCell();
  var cell6 = row.insertCell();

  cell1.innerHTML = nome;
  cell2.innerHTML = dtNasc;
  cell3.innerHTML = cpf;
  cell4.innerHTML = rg;
  cell5.innerHTML = email;
  cell6.innerHTML = codigo;
}
<form name="form1" onsubmit="return false;">
  <table align="center">
    <h1 align="center">Exercicio</h1>
    <tr>
      <td>Nome:</td>
      <td>
        <input id="nomeID" />
      </td>
    </tr>

    <tr>
      <td>Data de Nascimento:</td>
      <td>
        <input type="text" id="data" maxlength="10">

      </td>
    </tr>

    <tr>
      <td>CPF:</td>
      <td>
        <input type="text" id="cpf" maxlength="14" />
      </td>
    </tr>

    <tr>
      <td>RG:</td>
      <td>
        <input id="rgID" />
      </td>
    </tr>

    <tr>
      <td>Email:</td>
      <td>
        <input id="emailID" />
      </td>
    </tr>
    <tr>
      <td>Código de acesso:</td>
      <td>
        <input id="codigoID" />
      </td>
    </tr>
    <tr>
      <td>Senha:</td>
      <td>
        <input id="senhaID" />
      </td>
    </tr>
    <tr>
      <td>Confirmação de senha:</td>
      <td>
        <input id="confirmaID" />
      </td>
    </tr>
  </table>
  <div align="center">
    <table>
      <tr>
        <td>
          <button onclick="inserir()" type="submit">Inserir</button>
        </td>
      </tr>
    </table>
  </div>
  <br>

  <table id="tbCadastros" border="1" align="center">
    <thead>
      <tr>
        <th>Nome</th>
        <th>Data de Nascimento</th>
        <th>CPF</th>
        <th>RG</th>
        <th>Email</th>
        <th>Código de Acesso</th>
      </tr>
    </thead>
    <tbody id="linhas">
    </tbody>
  </table>
</form>
    
28.01.2016 / 19:58
Java working JSON Back to another dialogAlert