Mudar <option> conforme o valor do radio button selecionado PH

[Robert Pardim 0]

Olá pessoal, sou novo aqui no fórum e estou com uma dúvida... Depois de pesquisar por vários fóruns e até achar tópicos semelhantes e não obter solução satisfatória, resolvi estrear meu primeiro Tópico! rsrs :joia:

 

Minha dúvida é a seguinte:

 

Preciso de um script em php que faça uma consulta numa tabela dentro das <option> de um <select> conforme o valor do <input radio> marcado anteriormente. Vou exemplificar melhor na figura abaixo:

 

 

 

 

Considerando que os valores do <input radio> e do <select> estarão numa tabela do banco, pensei na seguinte lógica:

<form action="processa-conteudo.php" method="post">
<label>Categorias:</label>
<input type="radio" value="1" name="categoria"> Categoria 1
<input type="radio" value="2" name="categoria"> Categoria 2
<input type="radio" value="3" name="categoria"> Categoria 3
<input type="radio" value="4" name="categoria"> Categoria 4

<label>Página:</label>

Ai dentro do <select> eu faria algo assim:

<select>
<?php
                                        
require("conn.php");
                                                
if($_POST['categoria'] == 1)		
{													
$query = "SELECT * FROM paginas WHERE categoria_pagina = 'Categoria 1' ORDER BY nome_pagina";
$row = mysql_query($query);

while($row = mysql_fetch_array($query))
{                   
echo '<option value="'.$row['nome_pagina'].'">'.$row['nome_pagina'].'</option><br/>'; 
}
}

if($_POST['categoria'] == 2)        
{                                                    
$query = "SELECT * FROM paginas WHERE categoria_pagina = 'Categoria 2' ORDER BY nome_pagina";
$row = mysql_query($query);

while($row = mysql_fetch_array($query))
{
echo '<option value="'.$row['nome_pagina'].'">'.$row['nome_pagina'].'</option><br/>';
}
}

if($_POST['categoria'] == 3)        
{                                                    
$query = "SELECT * FROM paginas WHERE categoria_pagina = 'Categoria 3' ORDER BY nome_pagina";
$row = mysql_query($query);

while($row = mysql_fetch_array($query))
{
echo '<option value="'.$row['nome_pagina'].'">'.$row['nome_pagina'].'</option><br/>';
}
}

if($_POST['categoria'] == 4)        
{                                                    
$query = "SELECT * FROM paginas WHERE categoria_pagina = 'Categoria 4' ORDER BY nome_pagina";
$row = mysql_query($query);

while($row = mysql_fetch_array($query))
{
echo '<option value="'.$row['nome_pagina'].'">'.$row['nome_pagina'].'</option><br/>';
}
} 
?>
</select>
</form>

O problema é que como são variáveis de sessão do tipo $_POST elas necessitam de um submit no form pra ser alimentada e só na pagina que tiver no atributo action é que eu conseguiria fazer as verificações e imprimir o select único pra cada radio button.

 

Preciso fazer as verificações na mesma página, pois existiram outros inputs abaixo desses e o action de tudo estaria inserindo todos os dados na tabela conteúdos.

 

Alguem me da um help ?

[Tadeu Barbosa 18]

Você poderia passar o array com o nome da categoria e seus itens para um object do Javascript e validar tudo por ele. Seguindo a lógica:

// HTML (com dados vindos do BD)
input[id="Categoria 1"]
input[id="Categoria 2"]
input[id="Categoria 3"]

// JS e JQuery
// Só uma ideia (Fiz o código por aqui, não testei)
arr = {
  'Categoria 1': ['Página 1', 'Página 2'],
  'Categoria 2': ['Página 1', 'Página 2']
};

input.click=function(){
  
  var categoria = $(this).attr('id');

  for( i in arr[categoria] ) {
    
    alert( arr[categoria][i] ); // retorno: ['Página 1', 'Página 2'];

   // ai é só inserir no SELECT...
  }
}

Obs.: Se quiser saber mais só perguntar que dou uma melhorada no código...

[Robert Pardim 0]

Interessante sua ideia Tadeu, mas a partir disso como eu chamaria esse objeto (array) do JS ?? colocaria no HTML dentro de cada <input radio> o parametro "onClick" e chamaria a função ?? Outro detalhe, como eu iria colocar as mysql_query do PHP dentro dele? já que o php (cliente-servidor) iria ser executado primeiro em relação ao js(cliente).

[Tadeu Barbosa 18]

Desculpe pela demora... Mas ai está uma das formas de se fazer isso. Não é a única, lembrando.,,

 

http://ideone.com/GiGbr2 // Código

 

http://codepad.viper-7.com/TddmTd // Funcionando

[Robert Pardim 0]

Olá novamente Tadeu, queria te agradecer pelas soluções... Os dois scripts que você me passou nos links, funcionam perfeitamente, fiz os testes e é exatamente o que eu precisava! rsrs :clap:

<html> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<head>  
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>

<script>
var data = {
"Categoria 1":["P\u00e1gina 1 Categoria 1","P\u00e1gina 2 Categoria 1"],
"Categoria 2":["P\u00e1gina 1 Categoria 2","P\u00e1gina 2 Categoria 2"],
"Categoria 3":["P\u00e1gina 1 Categoria 3","P\u00e1gina 2 Categoria 3"],
"Categoria 4":["P\u00e1gina 1 Categoria 4","P\u00e1gina 2 Categoria 4"]
};

</script>
<div id="inputs">
<input type="radio" name="categoria" value="Categoria 1"> Categoria 1
<input type="radio" name="categoria" value="Categoria 2"> Categoria 2
<input type="radio" name="categoria" value="Categoria 3"> Categoria 3
<input type="radio" name="categoria" value="Categoria 4"> Categoria 4
</div>

<select id="select"></select>

<script>
$(function(){

'use stric';

(update = function(index)
{
var first = $('input[name="categoria"]:eq(0)').val();

$('#select option').remove();

$('input[name="categoria"]').eq(index||0).attr('checked','checked');

var array = data[ index||first ];

for( i in array)
{
$('#select').
append('<option value="'+ array[i] +'">'+ array[i] +'</option>');
}

})();

$('input[name="categoria"]').change(function()
{
update( $(this).val() );

});
});
</script>
<body>
</body>  
</html>  

Fiz as modificações para resgatar os valores do BD, consegui resgatar os valores dos inputs radio agora preciso resgatar os valores dos <option>, porém como eles estão dentro de um array... estou tendo dificuldades.

<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
 
<div id="inputs">
<?php
    require("conn.php");
	
	$query = mysql_query("SELECT * from categorias");
	while($result = mysql_fetch_array($query))
	 {
      echo "<input type=\"radio\" name=\"categoria\" value=\"{$result['value_categoria']}\"> {$result['nome_categoria']}<br/>";	 
	 }
 
?>
</div>

<?php

$valor_categoria = $result['value_categoria'];

     // AQUI EM PRECISAVA RESGATAR OS VALORES DOS <options> do select

     // $query = mysql_query("Select (nome_pagina) FROM paginas WHERE categoria_pagina = $valor_categoria");
	
	$query = array(
                
     // AQUI FICARIA ASSIM
     // while ($row = mysql_fetch_array($query)) {				
     // '$valor_categoria' = array($row['nome_pagina']) }

		'Categoria 1' => array('Página 1 Categoria 1', 'Página 2 Categoria 1'),
 
		'Categoria 2' => array('Página 1 Categoria 2', 'Página 2 Categoria 2')
	);
 
	echo sprintf("<script>var data = %s;</script>", json_encode($query) );
	
		
?>
 
<select id="select"></select>
 
<script>
$(function(){
 
	'use stric';
 
	(update = function(index)
	{
		var first = $('input[name="categoria"]:eq(0)').val();
 
		$('#select option').remove();
 
		$('input[name="categoria"]').eq(index||0).attr('checked','checked');
 
		var array = data[ index||first ];
 
		for( i in array)
		{
 
			$('#select').
			append('<option value="'+ array[i] +'">'+ array[i] +'</option>');
		}
 
	})();
 
	$('input[name="categoria"]').change(function()
	{
 
		update( $(this).val() );
 
	});
 
});
</script>

O problema parece ser simples de resolver, estou tendo dificuldades com a sintaxe, como ficaria a query dentro do array para exibir os valores dos <options> correspondentes a cada categoria que está dentro de uma tabela no meu Banco ??

[Tadeu Barbosa 18]

Você pode buscar todas as páginas e categorias e colocá-las no array... Não precisa fazer uma busca pra cada não.

 

Exemplo:

(obs.: dá uma checada nos nomes das colunas rs, não sei se coloquei certo )

// Isso fica no topo
// 
$query = mysql_query("SELECT nome_pagina,nome_categoria FROM `paginas` ");

$returnForJS = $categorias = array();

while ($row = mysql_fetch_array($query))
{

	// Adiciona as categorias para os inputs
	$comeCategoria = $row['nome_categoria'];

	if( !isset($categorias[ $comeCategoria ]))
	{
		$categorias[] = $comeCategoria;
	}

	// Adiciona as páginas e categorias ao array
	// Seria como: $returnForJS = array(Pagina 1', etc)
	$returnForJS[] = $row['nome_pagina'];
}

// Onde você for imprimir o array JS
// 
echo sprintf("<script>var data = %s;</script>", json_encode($returnForJS) );

// Coloque onde você quer imprimir os inputs
// 
foreach( $categorias  as $index => $value)
{
	echo "<input type=\"radio\" name=\"categoria\" value=\"{$value}\"> {$value} <br/>";	 
}

[Robert Pardim 0]

Agora sim Tadeu, funcionando perfeitamente!

 

O problema tava nas tabelas do meu banco, onde os valores das categorias tava em uma tabela, e os valores das páginas tava em outra... Tive que fazer algumas modificações e funcionou, o código ficou assim:

<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
 
<?php
require("conn.php");

// Select simples pegando os 3 campos na tabela página 
$query = mysql_query("SELECT nome_pagina, pasta_pagina, nome_categoria FROM `paginas`");

$returnForJS = $categorias = array();

while ($row = mysql_fetch_array($query))
{
	// Adiciona as Categorias: array('Categoria 1', etc)
	$nomeCategoria = $row['pasta_pagina'];
	
	if( !isset($categorias[ $nomeCategoria ]))
	{

		$categorias[ $nomeCategoria ] = $nomeCategoria;
	}

	// Adiciona as páginas e categorias ao array
	// Seria como: $returnForJS['Categoria 1'][] ...
	$returnForJS[ $row['pasta_pagina'] ][] = $row['nome_pagina'];
}

// Onde você for imprimir o array JS
echo sprintf("<script>var data = %s;</script>", json_encode($returnForJS) );

// Coloque onde você quer imprimir os inputs
echo '<div id="inputs">';

foreach( $categorias  as $index => $value)
{
 // Select na mesma tabela para retornar só o nome de cada categoria, e imprimir nos inputs logo abaixo
 $query = mysql_query("Select (nome_categoria) FROM paginas WHERE (pasta_pagina) = '$value'");
 $row = mysql_fetch_array($query);
 echo "<input type=\"radio\" name=\"categoria\" value=\"{$value}\"> {$row['nome_categoria']} <br/>";	 
}
echo '</div>';

?>

<select id="select"></select>
 
<script>
$(function(){
 
	'use stric';
 
	(update = function(index)
	{
		var first = $('input[name="categoria"]:eq(0)').val();
 
		$('#select option').remove();
 
		$('input[name="categoria"]').eq(index||0).attr('checked','checked');
 
		var array = data[ index||first ];
 
		for( i in array)
		{
 
			$('#select').
			append('<option value="'+ array[i] +'">'+ array[i] +'</option>');
		}
 
	})();
 
	$('input[name="categoria"]').change(function()
	{
 
		update( $(this).val() );
 
	});
 
});
</script>

Valeu cara, abraços!