Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

MarceloZ

Inserir dados da Tabela dinâmica!

Por , em PHP

Recommended Posts

MarceloZ    2

MarceloZ
Postado

Carissimos

 

eu tenho esse codigo em js que gera uma tabela dinâmica na pagina

 


você preenche os dados no form e ele vai adicionando os dados em uma tabela abaixo.

minha duvida é

como eu faço para salvar esses dados gerados na tabela no banco de dados?

é possivel isso?

 

 

 

desde de já obrigado.

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

MarceloZ    2

MarceloZ
Postado
Então o form é esse



<html>

<head>

<script src="script.js" type="text/javascript"></script>

</head>

<body>

<div id="topo">


</div>

<div id="esq">


<div id="exemplo_tabela">

<form name="inserir" method="post" action="inserir.asp">

<b>Inserir Dados:</b><br />

<label for="id">Id:</label><br /> <input type="text" name="id" /><br />

<label for="nome">Nome:</label><br /> <input type="text" name="nome" /><br />

<select name="sexo">

<option value="Masculino">Masculino</option>

<option value="Feminino">Feminino</option>

</select>

<br />

<input type="submit" name="Inserir" value="Inserir" />

<br /><br />

</form>



<a href="cancelar.php" rel="limpa_tabela">[Limpar tabela]</a>

<br /><br /><br />

<table id="tabela_clientes">

<tbody>

<tr class="titulo">

<td>Id</td>

<td>Nome</td>

<td>Sexo</td>

<td></td>

</tr>


</tbody>

</table>


</div>

</div>


</body>

</html>



Dai vem o .js que faz a graça da coisa

a minha duvida como insiro os dados gerados no bd






// Funçao para tratar eventos

function adicionarEvento(objeto, TipoEvento, funcao){

if(objeto.addEventListener){ // todos navegadores menos IE

objeto.addEventListener(TipoEvento, funcao, false);

return true;

} else if (objeto.attachEvent){ // IE

var r = objeto.attachEvent('on'+TipoEvento, funcao);

return r;

} else {

return false;

}

}

// mostra a linha inserida na tabela

var efeitos = {

corFundo: function(tabela,id,cor){

var elem = document.getElementById(tabela);

elem.rows[id].style.background=cor;

},

mostra: function(tabela,id,valor){

var tab = document.getElementById(tabela);

var elem = tab.rows[id];

if(elem.style.display == "none") elem.style.display = "";

if(!valor || valor == undefined) valor=0;

if(valor < 100){

valor+=10;

alpha = valor/100;

elem.style.MozOpacity=alpha;

elem.style.filter="alpha(opacity="+valor+")";

elem.style.opacity = alpha;

setTimeout("efeitos.mostra('"+tabela+"',"+id+","+valor+")",20);

}

},

limpa: function(idtabela,id,valor){

var tab = document.getElementById(idtabela);

var totLinhas = tab.rows.length;

if(id==undefined) id=1;

var elem = tab.rows[id];

this.corFundo(idtabela,id,"#FF0000");

if(elem.style.display == "none") elem.style.display = "";

if(valor == undefined) valor=100;

if(valor > 0){

valor-=10;

alpha = valor/100;

elem.style.MozOpacity=alpha;

elem.style.filter="alpha(opacity="+valor+")";

elem.style.opacity = alpha;

setTimeout("efeitos.limpa('"+idtabela+"',"+id+","+valor+")",10);

} else {

//elem.style.display="none";

id++;

if(id<totLinhas){

setTimeout("efeitos.limpa('"+idtabela+"',"+id+",100)",10);

} else tabela.limpa(tab);

}

}

}

// Objeto para manipular a tabela

var tabela = {

limpa: function(tabela){

totalLinhas = tabela.rows.length;

for(var i=1;i<totalLinhas;i++){

//Seleciona a segunda linha para ser excluida

// para que não seja removido o titulo

tabela.deleteRow(1);

}

var linha = tabela.insertRow(1); // Insere uma nova linha

var coluna = linha.insertCell(0); // Insere uma coluna na linha

coluna.setAttribute("cols", 3); // Define colspan = 3

coluna.innerHTML="Sem dados a serem exibidos"; // Texto informativo

inicia();

},

insere: function(tabela,id,nome,sexo){

// Primeiro testamos se a primeira linha nao eh a mensagem "Sem dados..."

if(tabela.rows.length>1){

if(tabela.rows[1].cells[0].innerHTML=="Sem dados a serem exibidos")

tabela.deleteRow(1); // se for apagamos

}


proxLinha = tabela.rows.length; // pega o total de linhas da tabela para acrescentar a nova

var linha = tabela.insertRow(proxLinha); // Insere uma nova linha

var colunaId = linha.insertCell(0); // Insere a coluna ID

var colunaNome = linha.insertCell(1); // Insere a coluna Nome

var colunaSexo = linha.insertCell(2); // Insere a coluna Sexo

var colunaCancela = linha.insertCell(3); // Insere a coluna Cancelar


//Abaixo inserimos o conteudo nas colunas criadas

colunaId.innerHTML=id;

colunaNome.innerHTML=nome;

colunaSexo.innerHTML=sexo;

colunaCancela.innerHTML="<a href='cancelar.php' rel='cancela_cliente'>[_Cancelar_]</a>";

efeitos.mostra(tabela.id,linha.rowIndex);

inicia(); // atualiza os links

},

apaga: function(tabela,linha){

id = linha.rowIndex;


var confirma = confirm("Tem certeza que deseja apagar o registro?");

if(confirma) {

tabela.deleteRow(id);

if(tabela.rows.length<2){

var linha = tabela.insertRow(1); // Insere uma nova linha

var coluna = linha.insertCell(0); // Insere uma coluna na linha

coluna.setAttribute("cols", 3); // Define colspan = 3

coluna.innerHTML="Sem dados a serem exibidos"; // Texto informativo

}

inicia(); // atualiza os links

}

}

}

function inicia(){

var pegaLinks = document.getElementsByTagName("a");

for(var i=0;i<pegaLinks.length;i++){

if(pegaLinks.getAttribute("rel")){

var link_atual = pegaLinks.getAttribute("rel");

if(link_atual=='cancela_cliente'){

pegaLinks.onclick=function(){

var tabela_clientes = document.getElementById("tabela_clientes");

// linha abaixo comentada, aqui viria o Ajax para chamar a pagina que cancelaria o cliente do banco de dados

//fsAjax("cancelar.php", "mensagem", "Aguarde...");


// Voltamos para o pai do link que eh a coluna e depois para o pai

// da coluna que é a linha.. entao pegamos sua posiçao na tabela

//var linha_atual = this.parentNode.parentNode.rowIndex;

tabela.apaga(tabela_clientes,this.parentNode.parentNode)


return false;

}

}

if(link_atual=='limpa_tabela'){

pegaLinks.onclick=function(){

var tabela_clientes = document.getElementById("tabela_clientes");

// linha abaixo comentada, aqui viria o Ajax para chamar a pagina que limparia a tabela no banco de dados

//fsAjax("limpar.php", "mensagem", "Aguarde...");

efeitos.limpa(tabela_clientes.id); // com efeito

//tabela.limpa(tabela_clientes); // sem efeito

return false;

}

}

}

}

// ====================

// Pega o envio do formulario de inserir dados

var pegaInputs = document.getElementsByTagName("input");

for(var i=0;i<pegaInputs.length;i++){

var input_tipo = pegaInputs.getAttribute("type");

var input_nome = pegaInputs.getAttribute("name");

if(input_tipo=='submit' && input_nome=='Inserir'){

pegaInputs.onclick=function(){

var tabela_clientes = document.getElementById("tabela_clientes");

var form_insere = document.inserir;

var id = form_insere.id.value;

var nome = form_insere.nome.value;

var sexo = form_insere.sexo.value;

// aqui viria o Ajax para enviar o formulario e cadastrar no banco de dados

tabela.insere(tabela_clientes,id,nome,sexo);

//fsAjax("index.php?cadastro", "mensagem", "Aguarde...","POST");

return false;

}

}

}

}

adicionarEvento(window, "load", inicia);


// Tabela

Compartilhar este post

Link para o post
Compartilhar em outros sites

Weverton Luiz Sales    2

Weverton Luiz Sales
Postado

Não tive tempo de ler o tópico com calma, pois estou em aula agora, mas, caso vocês queiram utilizar o jquery, basta:

 

$(function(){

    // - Quando o botão for clicado ...
    $("#idDoBotão").click(function(){

       // - Requisitamos os valores dos campos...
       var nome  = $("#idDoCampoNome").val();
       var idade = $("#idDoCampoIdade").val();

       $.post("GRAVABANCO.PHP", {nome:nome, idade:idade}, function(retorno){
            
             if(retorno == 1)
                alert("Gravado com Sucesso!");
             else
                alert("ERRO: "+retorno);

       })

    })

})

 

 

Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

MarceloZ    2

MarceloZ
Postado
<?php

$nome = $_POST['nome'];

$sexo = $_POST['sexo'];


//Abrindo Conexao com o banco de dados

$conexao = mysql_pconnect("localhost","root","") or die (mysql_error());

$banco = mysql_select_db("dados");


//Utilizando o mysql_real_escape_string voce se protege o seu código contra SQL Injection.

$nome = mysql_real_escape_string($nome);

$sexo = mysql_real_escape_string($sexo);



$insert = mysql_query("insert into contatos (nome,sexo) values ('{$nome}','{$sexo}')");

mysql_close($conexao);

if($insert) {

print "Cadastro Realizado!";

}else {

print "Erro ao Cadastrar!";

}

?>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alex.89    6

Alex.89
Postado

Neste código

 

$(function(){

    // - Quando o botão for clicado ...
    $("#idDoBotão").click(function(){

       // - Requisitamos os valores dos campos...
       var nome  = $("#idDoCampoNome").val();
       var idade = $("#idDoCampoIdade").val();

       $.post("GRAVABANCO.PHP", {nome:nome, idade:idade}, function(retorno){
            
             if(retorno == 1)
                alert("Gravado com Sucesso!");
             else
                alert("ERRO: "+retorno);

       })

    })

})

o javascript está esperando por um retorno da página gravabanco.php, este retorno deve ser o número 1, caso contrario, até vai gravar no anco, porem vai mostrar um alert de erro, muda a resposta no arquivo gravabanco.php para isto

if($insert) {
 echo 1;
}else {
 echo 0;
}

 

Na variavel $conexao, troca mysql_pconnect por mysql_connect

 

se ainda assim não gravar faz o seguinte, no teu arquivo javascript onde está

if(retorno == 1)
   alert("Gravado com Sucesso!");
else
   alert("ERRO: "+retorno);

troca por

if(retorno)
  alert(retorno);
else
  alert(retorno);

assim vai aparecer um alert com a mensagem de erro do arquivo gravabanco.php

 

 

abrços

Compartilhar este post

Link para o post
Compartilhar em outros sites

MarceloZ    2

MarceloZ
Postado

Eu consegui cadastrar o item no banco só que ele perdeu a função de listar o item cadastrado na tabela.

 

Antes assim ele listava na tabela mas não grava no bd

 

 

// Pega o envio do formulario de inserir dados

var pegaInputs = document.getElementsByTagName("input");

for(var i=0;i<pegaInputs.length;i++){

var input_tipo = pegaInputs.getAttribute("type");

var input_nome = pegaInputs.getAttribute("name");

if(input_tipo=='submit' && input_nome=='Inserir'){

pegaInputs.onclick=function(){

var tabela_clientes = document.getElementById("tabela_clientes");

var form_insere = document.inserir;

var id = form_insere.id.value;

var nome = form_insere.nome.value;

var sexo = form_insere.sexo.value;

// aqui viria o Ajax para enviar o formulario e cadastrar no banco de dados

tabela.insere(tabela_clientes,id,nome,sexo);

$.post("enviar.php", {id: id, nome: nome, sexo: sexo},

return false;

}

}

}

}

adicionarEvento(window, "load", inicia);

 

agora assim ele grava no bd mas não faz a listagem :(

 

 

// Pega o envio do formulario de inserir dados

$(document).ready(function() {

$("#enviar").click(function() {

var id = $("#id");

var idPost = id.val();

var nome = $("#nome");

var nomePost = nome.val();

var sexo = $("#sexo");

var sexoPost = sexo.val();

$.post("enviar.php", {id: idPost, nome: nomePost, sexo: sexoPost},

function(data){

$("#resposta").html(data);

}

, "html");

});

});

}

adicionarEvento(window, "load", inicia);

 

 

preciso que grave no bd e faça a listagem.

estou tentando implementar o http://jqueryui.com/dialog/#modal-form

que tem o mesmo funcionamento de antes mas com uma tela a mais.

utilizando

http://jqueryui.com/dialog/#modal-form

 

não sei como fazer o submit dos dados

Compartilhar este post

Link para o post
Compartilhar em outros sites

Weverton Luiz Sales    2

Weverton Luiz Sales
Postado

Amigos vamos lá:

 

Pelo que me parece o erro principal de tudo isso está no arquivo GRAVABANCO.PHP, então aqui vai uma sintaxe bem básica para efetuar o que pedimos...

 

<?php

// - Primeira coisa, efetuamos a conexão com o banco de dados
$conn = mysql_connect("Local", "Usuario", "Senha");

// - Certo, agora vamos resgatar as váriaveis vindas do "post"
$nome  = $_POST['nome'];
$idade = $_POST['idade'];

// - Montamos e posteriormente executamos o SQL...
$sql = "INSERT INTO ...";
$qry = mysql_query($sql)or die(mysql_error());

// - Caso ocorra algum erro na instrução SQL, o número '1' não será impresso, uma vez que ele vai parar a execução no "mysql_error()", resumindo, se imprimir '1', --> FUNFOU!

echo '1';

?>

 

....

 

Abraço a todos! :coolio:

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos PHP
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito