Ir para conteúdo
Fórum CódigoFonte.net
inrapa

Campos dinâmicos com AJAX + PHP + JSON

Recommended Posts

Galera, preciso muito de uma mão num sisteminha simples que estou desenvolvendo.

É um sistema de cadastro de estoque com retirada de produtos. Numa saída, quero poder selecionar mais de uma produto.

Funciona assim: digito data de saída, hora de saída, seleciono a categoria do produto e ele cria um select dinâmico dos produtos dessa categoria.

Aí estou tentando criar um botão que insira mais categorias e mais produtos na mesma página, ou seja, adiciona campos dinamicamente (CATEGORIA > PRODUTOS DESSA CATEGORIA).

Até aí funciona bem, ele adiciona os campos das categorias, mas não está pegando os produtos corretamente, conforme seleciono a categoria. Aliás, ele funciona para o primeiro campo, mas nos demais não.

Bom, vou postar os códigos abaixo pra quem puder me auxiliar:

Banco de dados:

CREATE TABLE IF NOT EXISTS `produtos` (

`codigo_produto` int(11) NOT NULL AUTO_INCREMENT,

`categoria_id` int(11) NOT NULL,

`nome_produto` varchar(255) NOT NULL,

`quantidade` int(10) unsigned NOT NULL,

`preco_compra` decimal(10,2) NOT NULL,

`datainc` date NOT NULL,

`preco_venda` decimal(10,2) NOT NULL,

`preco_medio` decimal(10,2) NOT NULL,

`quantidade_minima` int(10) unsigned NOT NULL,

`quantidade_ideal` int(10) unsigned NOT NULL,

`foto` varchar(100) NOT NULL,

PRIMARY KEY (`codigo_produto`)

) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=38 ;

CREATE TABLE IF NOT EXISTS `categoria` (

`categoria_id` int(11) NOT NULL AUTO_INCREMENT,

`nome_categoria` varchar(255) NOT NULL,

PRIMARY KEY (`categoria_id`)

) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;

************************************************************

NO ARQUIVO “SAIDA.PHP” ESTÁ ASSIM

************************************************************

<!--------------------------------------------JSON PARA SELECT DINAMICO - USA O ARQUIVO categorias.ajax.php------------------------------------------------->

$(document).ready(function(){

$("select[name=produto]").change(function(){

$("select[name=categoria]").html('<option value="0">Carregando...</option>');

$.post("categorias.ajax.php",

{produto:$(this).val()},

function(valor){

$("select[name=categoria]").html(valor);

}

)

})

})

<!--------------------------------------------FORMULARIO------------------------------------------------->

<form id="form1" name="form1" method="POST" action=" salvar.php" enctype="multipart/form-data">

<p>Data de saída:

<input type="text" id="dataret" size="10" maxlength="10" name="dataret" value="<?php echo date("d/m/Y");?>" onKeyUp="Formatadata(this,event)" class="tcal" />

<br />

Hora de saída:

<input type="text" id="horaret" size="5" maxlength="5" name="horaret" value="<?php echo date("H:i");?>">Formato: hh:mm

<br>

Retirado por:

<select name="retirado_por" class="textBox" id="retirado_por">

<option selected value="">Selecione uma pessoa</option>

<?

while ($dados2 = mysql_fetch_array($re2)) {

echo "<option value=" . $dados2['id_vendedor] . "'>" . $dados2['nome_vendedor'] . "</option>";

}

?>

</select>

<!--------------------------------------------AQUI É ONDE ADICIONA OS CAMPOS DINAMICOS------------------------------------------------->

<fieldset>

<legend>Produtos</legend>

<div class="produtos">

<p class="campoProdutos">

<select name="produto">

<option value="0">Escolha uma categoria</option>

<?php

$sql = "SELECT * FROM categoria ORDER BY nome_categoria ASC";

$qr = mysql_query($sql) or die(mysql_error());

while($ln = mysql_fetch_assoc($qr)){

echo '<option value='.$ln['categoria_id].'">'.$ln['nome_categoria'].'</option>';

}

?>

</select>

<select name="categoria">

<option value="0" disabled="disabled">Escolha uma categoria primeiro</option>

</select>

<a href="#" class="removerCampoProduto">Remover campo</a>

</p>

</div>

<a href="#" class="adicionarCampoProduto">Adicionar campo</a>

</fieldset>

<input type="submit" class="submit" value="Enviar" />

</form>

************************************************************

ARQUIVO “categorias.ajax.php” ESTÁ ASSIM

************************************************************

<?php

mysql_connect("localhost", "root", "");

mysql_select_db("cad_provisorio");

$produto = $_POST['produto'];

$quantidade = count($produto);

for ($i=0; $i<$quantidade; $i++) {

// echo "Telefone: ".$telefone[$i]."<br />";

$sql = "SELECT * FROM produtos WHERE categoria_id = $produto ORDER BY nome_produto ASC";

$qr = mysql_query($sql) or die(mysql_error());

if(mysql_num_rows($qr) == 0){

echo '<option value="0">'.htmlentities('Não categorias nesse produto').'</option>';

}else{

while($ln = mysql_fetch_assoc($qr)){

echo '<option value='.$ln['categoria_id].'">'.$ln['nome_produto'].'</option>';

}

}

}

?>

************************************************************

ARQUIVO “adiciona_campos.php” - está inserido como um SCRIPT.JS

************************************************************

$(function () {

function removeCampoProduto() {

$(".removerCampoProduto").unbind("click");

$(".removerCampoProduto").bind("click", function () {

i=0;

$(".produtos p.campoProdutos").each(function () {

i++;

});

if (i>1) {

$(this).parent().remove();

}

});

}

removeCampoProduto();

$(".adicionarCampoProduto").click(function () {

novoCampo = $(".produtos p.campoProdutos:first").clone();

novoCampo.find("input").val("");

novoCampo.insertAfter(".produtos p.campoProdutos:last");

removeCampoProduto();

});

});

Compartilhar este post


Link para o post
Compartilhar em outros sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Visitante
Responder

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Processando...

×
×
  • Criar Novo...