Publicado em 8 de mar.

Cadastro com combo dinamico ajax php mysql

Olá,
Tenho 2 tabelas:

cidade(id_cidade,nome_cidade)
bairro(id_bairro, nome_bairro, id_cidade)

Preciso fazer o cadastro de bairros, onde visualizo as cidades da tabela cidade via select/option, e abaixo insiro um bairro via input. Tanto a informação do select(id_cidade) qto a do input(nome_bairro) deverão ser gravadas na tabela bairro.
Atualmente, o id_cidade nao esta gravando na tabela bairro, apenas aparece na tela via echo, não consigo gravar esta informação. Alguem pode me ajudar?
Vou postar os arquivos abaixo.. desde ja agradeço a atenção...

cad_bairro.php
<!DOCTYPE HTML>

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="_recursos/js/jquery-1.9.1.min.js" language="javascript"></script>
 <script type="text/javascript">
$(document).ready(function() {
$("#salvar_bairro").click(function() {
var nome_bairro = $("#nome_bairro");
var nome_bairroPost = nome_bairro.val();

$.post("salvar_bairro.php", {nome_bairro: nome_bairroPost},

function(data){
$("#resposta_bairro").html(data);
}
, "html");
});
});
</script>
</head>

 <body>
 <div id="conteudo">
<?php
include "menu_admin.php";
?>
 <form id="cidade" name="cidade" method="post" action="" style="float:left; margin-left:300px; margin-top:-200px"><br><br>
 <h3>Cadastro de Bairros</h3><br><br>
 <label>Cidade: </label>
 <select name="cidade" id="cidade">
 <option value="0">Selecione...</option>
 <?php
require "conexao/conexao.php";
$city = mysql_query("SELECT * FROM cidade");

if (mysql_num_rows($city) <= '0'){

echo '<option value="0">Não ha cidades cadastradas</option>';

}else{
while($res = mysql_fetch_array($city)){

$id_cidade = $res['id_cidade'];
$nome_cidade = $res['nome_cidade'];
echo '<option value="'.$id_cidade.'">'.$nome_cidade.'</option>';
}
}
?>
 </select><br /><br />
 <label>Bairro:  <input type="text" name="nome_bairro" id="nome_bairro" /></label>
 <input type="button" value="Salvar" id="salvar_bairro" />
 </form>
 <div id="resposta_bairro"></div>
</div>

</body>
</html>

///////////////////////////////////////////////////////////
salvar_bairro.php

<?php
require "conexao/conexao.php";

$select_cidade = mysql_query("SELECT * FROM bairro, cidade WHERE cidade.id_cidade == bairro.id_cidade");
$nome_bairro = $_POST["nome_bairro"];

if(!($nome_bairro)){

print "Preencha com o nome do bairro!";
exit();
}

$nome_bairro = mysql_real_escape_string($nome_bairro);
$busca = "SELECT COUNT(*) AS total FROM bairro WHERE nome_bairro='$nome_bairro'";
$consulta = mysql_query($busca);
$total = mysql_result($consulta, 0, "total");
if ($total == 0){
$sql = "INSERT INTO bairro (nome_bairro) VALUES ('{$nome_bairro}')";
$qr = mysql_query($sql) or die(mysql_error());

if($qr):

echo '<script>alert("Cadastro realizado com sucesso!")</script>';

else:

echo '<script>alert("Erro ao efetuar o cadastro!")</script>';
endif;

}else{

print 'Bairro já cadastrado';
}

mysql_close($conexao);
?>

Discussão (2)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

angelorubin· 9 de mar.

Bom dia,

Vou ser direto pois estou na correria aqui:

cad_bairro.php

<!doctype html>

<html lang="pt-br">
 <head>
 <meta charset="utf-8">
 <link rel="stylesheet" href="css/style.css"/>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script type="text/javascript">
 $(function() {
 $("#salvar_bairro").click(function() {
 var nome_bairro = $("#nome_bairro").val();
 var id_cidade = $('#cidade option:selected').attr('value');
 $.post("salvar_bairro.php", {nome_bairro: nome_bairro, id_cidade: id_cidade},
 function(data){
 $("#resposta").html(data);
 }, "html");
 });
 });
 </script>
 </head>

 <body>

 <div id="conteudo">
 <?php // include "menu_admin.php"; ?>
 <form id="cidade" name="cidade" method="post">
 <h3>Cadastro de Bairros</h3>
 <label>Cidade</label>
 <select name="cidade" id="cidade">
 <option value="0">Escolha a Cidade</option>
 <?php
 require "includes/conecta.php";
 $city = mysql_query("SELECT * FROM cidade");

 if (mysql_num_rows($city) <= '0') {
 echo '<option value="0">Não há cidades cadastradas.</option>';
 }
 else {
 while($res = mysql_fetch_array($city)){
 $id_cidade = $res['id_cidade'];
 $nome = $res['nome'];
 echo '<option value="'.$id_cidade.'">'.ucfirst($nome).'</option>';
 }
 }
 ?>
 </select>
 <label>Bairro</label>
 <input type="text" name="nome_bairro" id="nome_bairro" />
 <input type="button" value="Salvar" id="salvar_bairro" />
 </form>
 <div id="resposta"></div>
 </div>

 </body>
</html>

salvar_bairro.php

<?php

	require "includes/conecta.php";

	/*
	$select_cidade = mysql_query("SELECT * FROM bairro, cidade WHERE cidade.id_cidade == bairro.id_cidade");
	*/
	$nome = $_POST["nome_bairro"];
	$fk_id_cidade = $_POST["id_cidade"];
	/*
	if(!($nome_bairro)){
 print "Preencha com o nome do bairro!";
 exit();
	}

	$nome_bairro = mysql_real_escape_string($nome_bairro);
	$busca = "SELECT COUNT(*) AS total FROM bairro WHERE nome_bairro='$nome_bairro'";
	$consulta = mysql_query($busca);
	$total = mysql_result($consulta, 0, "total");

	if ($total == 0){
 */
 $sql = "INSERT INTO bairro (id_bairro, nome, fk_id_cidade) VALUES ('','{$nome}','{$fk_id_cidade}')";
 $qr = mysql_query($sql) or die(mysql_error());
 /*
 if($qr):
 echo '<script>alert("Cadastro realizado com sucesso!")</script>';
 else:
 echo '<script>alert("Erro ao efetuar o cadastro!")</script>';
 endif;
 }
 else {
 print 'Bairro já cadastrado';
 }
 */
 if($qr){
 echo "Inserido com sucesso";
 }
 else {
 echo "Problemas na inserção dos dados, contate o administrador do sistema.";
 }
 mysql_close($conecta);
?>

O que eu fiz basicamente foi modificar o seu jQuery e colocar o id da cidade junto na requisição ajax para a pagina salvar_bairro.php, e lá eu inseri no banco os dados fk_id_cidade e nome do bairro na tabela bairro.

Troquei as conexões, não esquece de arrumar isso, comentei as validações/verificaçòes que você fez, pois não tive tempo para analisá-las, fui direto ao ponto mesmo.

* Dica achei muito perigoso deixar a pessoa preencher isso ! Creio que exista forma melhor de coletar esses dados dinamicamente, tipo estes web services por exemplo, que trazem os dados pelo cep para se obter mais integridade nisso e evitar dor de cabeça adiante.

Qualquer dúvida é só postar.

Espero que ajude.

nanajulia· 12 de mar.

Olá angelorubin,

Muito obrigada!!!
Valeu mesmo... Era isso q eu nao estava conseguindo fazer, passar a informação selecionada no combo para a outra tabela!!!

E quanto a deixar o usuário preencher isto, não será assim, na verdade o sistema q estou criando é bem grande e eu estava fazendo um teste com as tabelas bairro e cidade... pq as outras terão a mesma logica, na hora do cadastro, tem varias tabelas relacionadas... Os bairros eu mesmo q vou preencher...

Valeu!!!

P.S. Esta é a maneira mais eficaz de se trabalhar? Com ajax? Deste jeito a busca é mais rapida tb não é?