Bom fiz um exemplo rápido (melhor que completar seu código e você não entender).
1º Tenho uma tabela telefone
com id
, nome
e telefone
:
--
-- Database: `sistema`
--
CREATE DATABASE IF NOT EXISTS `sistema`;
USE `sistema`;
--
-- Estrutura da tabela `telefone`
--
CREATE TABLE IF NOT EXISTS `telefone` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`nome` varchar(255) NOT NULL,
`telefone` varchar(15) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;
--
-- Extraindo dados da tabela `telefone`
--
INSERT INTO `telefone` (`id`, `nome`, `telefone`) VALUES
(1, 'Stack', '1111111111111'),
(2, 'Over', '22222222222222'),
(3, 'Flow', '333333333');
2º Monto minha página de cadastro (usei jquery
e bootstrap
):
<?php
require_once 'minpdo.php'; //importo minha biblioteca de crud
require_once 'telefone.php'; //php com definições do meu banco e tabela
$mnpdo = new MinPDO();
try {
$telefones = $mnpdo->consult("telefone", "*"); // consulta todos telefones
} catch (MinPDOException $ex) { //caso haja erro
echo <<<ERRO
<div class="text-center text-danger">
{$ex->getMessage()}
</div>
ERRO;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cadastro dinâmico</title>
<link rel="stylesheet" href="bootstrap.css" />
</head>
<body>
<table class="table table-hover" id="telefones">
<tr class="text-primary">
<td colspan="2">
<strong>Nome</strong>
</td>
<td>
<strong>Telefone</strong>
</td>
</tr>
<?php
if(!empty($telefones)) { // se tiver telefones
for($i = 0; $i < count($telefones); $i ++) { //exibe todos
echo <<<ITEM
<tr>
<td colspan="2">
<p>{$telefones[$i]['nome']}</p>
</td>
<td>
<p>{$telefones[$i]['telefone']}</p>
</td>
</tr>
ITEM;
}
}
?>
</table>
<table class="table table-striped">
<tr class="text-center">
<td>
<br>
<div class="form-group">
<label>Nome:</label>
<input name="nome" class="form-control" id="nome" type="text" />
</div>
</td>
<td>
<br>
<div class="form-group">
<label>Telefone:</label>
<input name="telefone" maxlength="15" class="form-control" id="telefone" type="tel" />
</div>
</td>
<td>
<br>
<div class="form-group">
<label style="opacity: 0;">...</label>
<input class="btn btn-primary form-control envia" value="+" type="submit" />
</div>
</td>
</tr>
</table>
<script src="jquery.js"></script>
<script>
$(function(){
$(".envia").click(function() {
if( $('#nome').val() != "" && $('#telefone').val() ) { //se ambos tiverem com conteudo
$.ajax({
type: "POST", //tipo de registro
url: "cadastra.php", //pagina de cadastro
data: { //envia nome e telefone
nome : $("#nome").val(),
telefone : $("#telefone").val()
} ,
success: function(retorno) {
if(retorno == "fail") {
//falha
} else {
$("table#telefones tr:last").after(retorno); //exibe novo registro
}
}
});
}
});
});
</script>
</body>
</html>
A parte mais importante aí é o script
, note o uso do Ajax
, é ele que permite fazer esse cadastro dinâmico, nele informo o método, a página onde irei tratar meus dados, os dados e também quando der sucesso etc.
3º Meu INSERT
com a página cadastra.php
<?php
require_once 'minpdo.php';
require_once 'telefone.php';
$mnpdo = new MinPDO();
if(isset($_POST['nome']) and isset($_POST['telefone'])) {
try { //tenta inserir e dar echo (retorno do ajax) de uma linha da tabela
$mnpdo->insert("telefone",
array("nome", "telefone"),
array($_POST['nome'], $_POST['telefone']) );
echo <<<ITEM
<tr>
<td colspan="2">
<p>{$_POST['nome']}</p>
</td>
<td>
<p>{$_POST['telefone']}</p>
</td>
</tr>
ITEM;
} catch (MinPDOException $ex) {
echo "fail"; // falha do bd
}
} else {
echo "fail"; // não tem dados
}
Note que esse é a página que faz o insert
, então é ela quem cito no ajax
. Caso dê tudo certo ela retornará para o ajax
o linha de tabela para meu novo registro, caso não, ela retorna uma mensagem "fail"
O exemplo pode ser baixado nesse link do MEGA, para testar, rode o arquivo sistema.sql
no seu gerenciador de dados, e entre no index.php
. O arquivo minpdo.php
é uma classe que fiz de CRUD
para auxiliar meus projetos, caso tenho interesse nesse link do GitHub há o tutorial de como usa-la.