Forum Pplware

Versão Completa: Select > option dinâmica
Está de momento a ver uma versão reduzida do nosso conteúdo. Ver versão completa com o formato adequado.
Boa tarde,

Estou a tentar fazer algumas brincadeiras com Ajax pela primeira vez, mas estou a ter algumas dificuldades. O que eu queria fazer era relativamente simples mas estou com algumas dificuldades em encontrar exemplos.

queria fazer o seguinte

tenho um formulário de inserção de elementos onde um dos items é por exemplo escolher categoria.
Para este campo vou buscar todas as categorias à base de dados e disponho-as numa Select dum formulario:

exemplo:

Código PHP:
<select>
<
option value="xyz">xyz</option>
<
option value="xyz2">xyz2</option>
<
option value="xyz3">xyz3</option>
</
select
depois o que eu queria era depois destas opções ter um link adicionar nova que abriria por cima do formulário onde o utilizador podia adicionar uma nova categoria, quando ele submete o formulário ela ser adicionada à base de dados e sem fazer refresh da pagina esta ultima aparecer já na select box.

Andei à procura de exemplos mas o que encontrei foram exemplos em que adicionava à lista mas não adicionava à base de dados.

Se alguém me conseguir apontar para um tutorial em como fazer isso dava-me muito jeito..


cumprimento,
Marco Monteiro
Olá Marco,

Pelo que percebi, o teu problema é adicionar o objecto retornado à select, certo? É muito simples, utilizando jQuery, por exemplo:

Código:
<script>
val = objectoRetornado.value;
name = objectoRetornado.value;
$('#IdDaTuaSelect').append($("<option></option>").attr("value",val).text(name));
</script>
Boas,
Eu uso o jquery para fazer o post para c#, mas o principio deve ser o mesmo.

O que tens de fazer é fazer uma chamada por GET ou POST (depende do que queres fazer e qual o objectivo, neste caso acho que o melhor é por POST). Exemplo da página do form:
Código:
<select id="xpto">
<option value="xyz">xyz</option>
<option value="xyz2">xyz2</option>
<option value="xyz3">xyz3</option>
</select>

<input type="text" name="newValue" id="newValue" />
<input type="button" name="insertBtn" id="insertBtn" value="Insert ME!" onClick="AddNewValue();" />


<script type="text/javascript">
$.post("fileQueFazInsertNaBd.php",
    {newValue: $('#newValue').val()},
        function(data) //Function de callback de quando acaba o pedido
        {
            var json = eval('(' + data + ')'); //Eu normalmente faço a resposta em json, e tenho de fazer isto para passar para json... acho que o php dá para fazer a resposta directa em json
            if(data.Status) // ou data.status == true
            {
                //$("#xpto").addValue($('#newValue').val()) - Eu não lembro como se adiciona elementos a um select via jquery
            }else{
                // caso dê erro, podes querer dar alguma mensagem
            }
            alert(data.Message); //Meti este fora pq a mensagem vem sempre do servidor
        });

</script>

E o php que recebe o post:
Código PHP:
<?php
//Eu já não me lembro bem de php, por isso é bem provavel que isto não funcione, mas é só para dar a ideia

$valorDoSelect $POST["newValue"];

if(
$valorDoSelect != ""){
    
//Insere na bd
    //...
    
echo "{Status:true, Message: 'Valor Inserido'}";
}else{
    echo 
"{Status:false, Message: 'O valor não pode ser vazio ou outro erro'}";

}
?>
ok, vou experimentar hoje depois do jantar e digo qq coisa =)
thanks
acabei por fazer como o berto disse e safei-me bem =) thanks...
Não te esqueças de fazer o sanitize dos parametros que estás a receber do ajax, por causa dos sql injections Wink
URL's de Referência