Select > option dinâmica

[mpmont]

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

[Bruno Bernardino]

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>

[Berto]

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'}";

}
?>

[mpmont]

ok, vou experimentar hoje depois do jantar e digo qq coisa =)
thanks

[mpmont]

acabei por fazer como o berto disse e safei-me bem =) thanks...

[Berto]

Não te esqueças de fazer o sanitize dos parametros que estás a receber do ajax, por causa dos sql injections