View Full Version : [Ajuda]PHP - Combo Box


Majin Vegeta
08-05-2008, 01:22
boas, mais uma vez preciso que me ajudem e novamente em PHP.

O meu problema e o seguinte. Eu tenho um formulario em PHP que tem uma Combo Box. O que eu queria era que ao seleccionar uma das opções da combo box ele aparece-se um campo no formulario para por uma imagem por exemplo, e se seleccionasse outro aparecesse por exemplo,uma input box para escrever quaquer coisa.

ja tentei com ifs mas nao estou a ter sucesso. deve me faltar qualquer coisa.

podem-me ajudar?

cumps

cula_ru
08-05-2008, 02:44
metes no select onchange="funcqq()"

depois é que brincas com a

function funcqq(){
if (document.getelementbyID('qqcoisa').selectedindex == 1)
{
faz qq coisa;

}


}

get it?

hostmake
08-05-2008, 04:14
Vegeta, se vais usar um select, e queres ter acções individuais para cada opção tens que criar uma funcção onchange, que leia o conteúdo que esteja seleccionado, e ai efectuar uma acção.


Ou seja é um onChange, ligado a uma função que recebe o seguinte:

document.nome_form.nome_select.options[document.nome_form.nome_select.selectedIndex].value;

que é o valor que está seleccionada, e depois fazes uns if's.

Majin Vegeta
08-05-2008, 19:51
entao para fazer as funçoes vai ter de ser em javascrip e nao em PHP ne?

cumps

hostmake
08-05-2008, 20:23
certo

Majin Vegeta
08-05-2008, 21:49
eu arranjei estas 2 funçoes em que quero que uma chame uma textarea para escrever uma frase e outra um input que e para mais tarde fazer um upload de uma imagem

<script language="JavaScript">
function wallpaper()
{
document.myform.action="";
document.myform.submit();
}
function frase()
{
document.myform.action="";
document.myform.submit();
}
</script>

so que agora nao sei o que meter no action, nem no onchage.

help please

cumps

MPalhas
08-05-2008, 22:41
isso é o que vais por a executar ao clicar num item da combobox? se é, não é bem assim.

na combobox metes:

<select onChange="alterarForm(this.value)">.......</select>

e crias a função alterarFrom:


function alterarForm(valor) {
switch (valor) {
case "valor1": //fazer coisas caso seja esta a opção seleccionada
break;

case "valor2": //mesma coisa
break;

case "valor3": //etc, etc
break;
}
}

não percebi bem a duvida do action. action é o url para onde o browser vai ser encaminhado ao enviar o formulario

Majin Vegeta
08-05-2008, 23:02
<script language="JavaScript">
function alterarForm(valor) {
switch (valor) {
case "valor1":"<td><p>Imagem do Concurso</td><td><input name=userfile type=file></td>";
break;

case "valor2":"<td><p>Frase</td><td><input type=text name=frase_concurso size=50 maxlength=60></td>";
break;

}
}
</script>
<tr>
<td><p>Tipo de Concurso</td><td><select onChange="alterarForm(this.value)">
<option value="">Tipo de Concurso:</option>
<option value=valor1>Melhor Wallpaper</option>
<option value=valor2>Melhor Frase</option>
</select></p></td>
</tr>
<tr>

eu meti deste genero mas continua a nao dar

help!

P.S. desculpem a ignorancia

MPalhas
09-05-2008, 21:26
com Javascript não podes "simplesmente" escrever html. tens primeiro especificar onde é que ele vai ficar e como.
por exemplo, pelo que tens ai, parece-me que queres inserir um campo de uma form, em que cada titulo/campo está numa celula de uma tabela

queres apagar um campo existente e substituir por esse? ou queres que apareça o novo campo por baixo dos que já existem? é que estas duas coisas, parecendo que não, são completamentes diferentes de se fazer.

outra coisa. tu ai estás a abrir um Table Row sem abrir uma tabela primeiro, o que é errado. também te deve faltar um <tr>...</tr> no html que escreveste no javascript, a não ser que queiras mesmo que apareça tudo na mesma linha.

agora, pensando que queres adicionar o campo novo, sem tirar nenhum dos que existem, penso que possa ser assim:


<script language="javascript">
function adicionar campo(campo) {
var tabela = document.getElementById("tabelaForm")

switch (campo) {
case "primeiro":
var newElement= document.createElement("tr")
newElement.innerHTML = "<td>primeiro campo</td> <td><input type='text' /></td>"
tabela.appendChild(newElement)
break;

case "segundo":
var newElement= document.createElement("tr")
newElement.innerHTML = "<td>segundo campo</td> <td><input type='text' /></td>"
tabela.appendChild(newElement)
break;

//etc, etc
}
}
</script>

<table id="tabelaForm">
<tr>...</tr>
<tr>...</tr>
<!-- aqui irão aparecere os campos novos -->
</table>

Majin Vegeta
10-05-2008, 23:11
eu tenho isto

<script language="javascript">
function adicionar campo(campo) {
var tabela = document.getElementById("tabelaForm")

switch (campo) {
case "primeiro":
var newElement= document.createElement("tr")
newElement.innerHTML = "<td><p>Imagem do Concurso</td><td><input name=userfile type=file></td>"
tabela.appendChild(newElement)
break;

case "segundo":
var newElement= document.createElement("tr")
newElement.innerHTML = "<td><p>Frase</td><td><input type=text name=frase_concurso size=50 maxlength=60></td>"
tabela.appendChild(newElement)
break;

//etc, etc
}
}
</script>
<form name="concurso" method="post" enctype="multipart/form-data" id="tabelaForm">
<table align="center" border="0">
<tr>
<td><p>Nome</td>
<td><input type="text" name="nome_concurso" size="50" maxlength="60"></p>
</td>
</tr>
<tr>
<td><p>Data</td>
<td><input type="text" name="data_concurso" size="50" maxlength="5"></p>
</td>
</tr>
<tr>
<td><p>Descrição</td>
<td><textarea name="descricao_concurso" cols="37" rows="5"></textarea></p>
</td>
</tr>
<tr>
<td><p>Tipo de Concurso</td>
<td><select onChange="adicionar campo(this.campo)">
<option value="">Tipo de Concurso:</option>
<option value="primeiro">Melhor Wallpaper</option>
<option value="segundo">Melhor Frase</option>
</select></p>
</td>
</tr>


<?php
//if ($tipo_concurso==1){
//echo '<td><p>Imagem do Concurso</td>';
//echo '<td><input name="userfile" type="file"></td>';
//}
//else { if($tipo_concurso==2){
//echo '<td><p>Frase</td>';
//echo '<td><input type=text name="frase_concurso size=50 maxlength=60></td>';}
//}
?>

</table>


e o que eu quero e ter uma combox em que apareça inicialmente qualquer coisa (exemplo: "Escolha ...")e ao clicar nessa combo vou ter duas opçoes e se clicar na primeira vai me chamar um input para fazer um upload de uma imagem, se clicar na segunda um input para escrever uma frase. eu tentei fazer com o teu exemplo e como tu me explicaste MPalhas e o codigo ficou da maneira que esta acima mas no entanto, a combo continua a nao fazer nada :(:(

cumps

MPalhas
10-05-2008, 23:24
só tens dois erros. o nome da função não pode ter espaços. em vez de "adicionar campo", põe "adicionarCampo" ou "adicionar_campo" por exemplo
e ao chamar a função com o onChange, o parametro não é this.campo, porque isso não existe. o correcto é this.value, que vai buscar o valor de si mesmo, e via passá-lo para a variavel campo da função

depois também há outro problema. é que como isso está agora (tirando os erros claro) podes clicar á vontade na combobox e vão sempre aparecer campos novos, além de que pode adicionar os dois tipos de campo. presumo que só queiras que apareça um unico campo.
para resolver é simples.

atribuis um ID á combobox, e no fim de cada case da função, metes isto:
document.getElementById('id_da_combo').disabled=tr ue;

Majin Vegeta
10-05-2008, 23:49
MPalhas, 5*, :):) funcionou perfeitamente. Agora so tenho um problema de <tr>s e <td>s que tenhp de resolver mas eu depois trato disso. Há só mais uma coisa que te quero perguntar, tipo quando eu seleciono um a cena pa escolher fica bloqueada (disable). Nao ha maneira de se eu quiser seleccionar a outra, desaparecer a input type da que esta seleccionada e aparecer a outra?

cumps

MPalhas
11-05-2008, 00:26
ok, para isso tem que se alterar a função. fica assim:


function adicionarcampo(campo) {
var tabela = document.getElementById("tabelaForm")

if (!document.getElementById('tr_novo_campo')) { //ve se já existe o novo TR, e cria-o se nao houver
var newElement= document.createElement("tr")
newElement.setAttribute('id', 'tr_novo_campo')
tabela.appendChild(newElement)
}

switch (campo) {
case "primeiro":
document.getElementById('tr_novo_campo').innerHTML ='<td>Primeiro<input name="primeiro" ....... /></td>'; //o conteudo do TR muda para o campo escolhido
break;

case "segundo":
document.getElementById('tr_novo_campo').innerHTML ='<td>Segundo<input name="segundo" ....... /></td>';
break;

//etc, etc
}
}


só tens que alterar o innerHTML de cada case e por o campo que queres. poe os TDs, mas não ponhas o TR, que já foi definido no inicio da função

Majin Vegeta
11-05-2008, 00:51
<script language="javascript">
function adicionar_campo(campo) {
var tabela = document.getElementById("tabelaForm")

if (!document.getElementById('tr_novo_campo')) {

if (!document.getElementById('tr_novo_campo')) { //ve se já existe o novo TR, e cria-o se nao houver
var newElement= document.createElement("tr")
newElement.setAttribute('concurso', 'tr_novo_campo')
tabela.appendChild(newElement)
}

switch (campo) {
case "primeiro":
document.getElementById('tr_novo_campo').innerHTML ='<td><p>Imagem do Concurso</td><td><input name=userfile type=file></td>'; //o conteudo do TR muda para o campo escolhido
break;

case "segundo":
document.getElementById('tr_novo_campo').innerHTML ='<td><p>Frase</td><td><input type=text name=frase_concurso size=50 maxlength=60></td>';
break;

//etc, etc
}
}
</script>



<form name="concurso" method="post" enctype="multipart/form-data" id="tabelaForm">
<table align="center" border="0">
<tr>
<td><p>Nome</td>
<td><input type="text" name="nome_concurso" size="50" maxlength="60"></p>
</td>
</tr>
<tr>
<td><p>Data</td>
<td><input type="text" name="data_concurso" size="50" maxlength="5"></p>
</td>
</tr>
<tr>
<td><p>Descrição</td>
<td><textarea name="descricao_concurso" cols="37" rows="5"></textarea></p>
</td>
</tr>
<tr>
<td><p>Prémios</td>
<td><textarea name="premios_concurso" cols="37" rows="5"></textarea></p>
</td>
</tr>
<tr>
<td><p>Tipo de Concurso</td>
<td><select onChange="adicionar_campo(this.value)" id="concurso">
<option value="">Tipo de Concurso:</option>
<option value="primeiro">Melhor Wallpaper</option>
<option value="segundo">Melhor Frase</option>
</select></p>
</td>
</tr>




</table>
<br>
<table border="0" align="center">
<tr>
<td colspan="2" align="center"><input type="submit" value="Criar" name="criar"></td>
</tr>
</table>
</form>

<?php
}
if($ligax) mysqli_close($ligax);
?>


eu coloquei como esta acima so que nao estou a perceber o que tenho de meter onde colocaste (tr_novo_campo)

cumps

MPalhas
12-05-2008, 10:02
tr_novo_campo é o id que tem que ser atribuido ao TR que é criado no javascript. podes deixar assim ou então mudas para um ID á tua escolha, mas tens que mudar em todos para ficar tudo igual.
assim o Javascript vai procurar esse ID no inicio, se encontrar é porque já existe e assim em vez de o criar, muda só o conteudo

Majin Vegeta
12-05-2008, 10:16
tenho que por o id em todos os <tr> da pagina com o mesmo nome e isso?

cumps

MPalhas
12-05-2008, 10:18
não, a tual tabela original deixa estar como está. esse id é para o TR que vai ser criado pelo javascript, para que o script possa saber se ele existe ou não. basta deixares o id como eu o pus no script (podes mudar o nome mas tens que mudar em todos)

Majin Vegeta
12-05-2008, 10:50
não, a tual tabela original deixa estar como está. esse id é para o TR que vai ser criado pelo javascript, para que o script possa saber se ele existe ou não. basta deixares o id como eu o pus no script (podes mudar o nome mas tens que mudar em todos)

mas assim vai ficar como o ultimo codigo que eu postei neste post e com esse codigo, ao escolher qualquer uma das opçoes ele nao me esta a fazer nada

ou tenho de por id=tr_novo_campo onde tenho id=concurso?

cumps

MPalhas
12-05-2008, 11:00
newElement.setAttribute('concurso', 'tr_novo_campo')

e para que é que foste mexer nesta linha? onde tens "concurso" devia estar "id", não podes mexer nisso, que é o que vai atribuir o ID chamado "tr_novo_campo" ao novo TR criado

o que eu te disse é que podias alterar onde diz "tr_novo_campo", mas novamente, terás que alterar em todos os sitios que dizem "tr_novo_campo"

Majin Vegeta
12-05-2008, 11:01
e para que é que foste mexer nesta linha? onde tens "concurso" devia estar "id", não podes mexer nisso, que é o que vai atribuir o ID chamado "tr_novo_campo" ao novo TR criado

o que eu te disse é que podias alterar onde diz "tr_novo_campo", mas novamente, terás que alterar em todos os sitios que dizem "tr_novo_campo"

entao so tenho de por id onde esta concurso?

cumps

MPalhas
12-05-2008, 11:05
sim

Majin Vegeta
12-05-2008, 12:49
MPalhas ja pus id aqui: newElement.setAttribute('id', 'tr_novo_campo')
mas continua a nao fazer nada.

ou tenho de por tr_novo_campo tambem aqui onde tenho id="concurso"?

<td><p>Tipo de Concurso</td>
<td><select onChange="adicionar_campo(this.value)" id="concurso">
<option value="">Tipo de Concurso:</option>
<option value="primeiro">Melhor Wallpaper</option>
<option value="segundo">Melhor Frase</option>
</select></p>
</td>

cumps

MPalhas
12-05-2008, 13:59
sorry! erro meu. olha para a função e deves ver duas linhas exactamente iguais ( if(!document.getElement....... ). apaga completamente uma delas e já deve dar

Majin Vegeta
12-05-2008, 18:42
MPalhas desculpa la estar a chatera-te mais uma vez mas e o seguinte, a cena ja funciona perfeitamente mas ha uma cena que eu queria alterar, que é onde aparece. eu tenho isto assim:

<script language="javascript">
function adicionar_campo(campo) {
var tabela = document.getElementById("tabelaForm")


if (!document.getElementById('tr_novo_campo')) { //ve se já existe o novo TR, e cria-o se nao houver
var newElement= document.createElement("tr")
newElement.setAttribute('id', 'tr_novo_campo')
tabela.appendChild(newElement)
}

switch (campo) {
case "primeiro":
document.getElementById('tr_novo_campo').innerHTML ='<td><p>Imagem do Concurso</td><td><input name=userfile type=file></td>'; //o conteudo do TR muda para o campo escolhido
break;

case "segundo":
document.getElementById('tr_novo_campo').innerHTML ='<td><p>Frase</td><td><input type=text name=frase_concurso size=50 maxlength=60></td>';
break;

//etc, etc
}
}
</script>



<form name="concurso" method="post" enctype="multipart/form-data" id="tabelaForm">
<table align="center" border="0">
<tr>
<td><p>Nome</td>
<td><input type="text" name="nome_concurso" size="50" maxlength="60"></p>
</td>
</tr>
<tr>
<td><p>Data</td>
<td><input type="text" name="data_concurso" size="50" maxlength="5"></p>
</td>
</tr>
<tr>
<td><p>Descrição</td>
<td><textarea name="descricao_concurso" cols="37" rows="5"></textarea></p>
</td>
</tr>
<tr>
<td><p>Prémios</td>
<td><textarea name="premios_concurso" cols="37" rows="5"></textarea></p>
</td>
</tr>
<tr>
<td><p>Tipo de Concurso</td>
<td><select onChange="adicionar_campo(this.value)" id="concurso">
<option value="">Tipo de Concurso:</option>
<option value="primeiro">Melhor Wallpaper</option>
<option value="segundo">Melhor Frase</option>
</select></p>
</td>
</tr>


<?php
//if ($tipo_concurso==1){
//echo '<td><p>Imagem do Concurso</td>';
//echo '<td><input name="userfile" type="file"></td>';
//}
//else { if($tipo_concurso==2){
//echo '<td><p>Frase</td>';
//echo '<td><input type=text name="frase_concurso size=50 maxlength=60></td>';}
//}
?>

</table>
<br>
<table border="0" align="center">
<tr>
<td colspan="2" align="center"><input type="submit" value="Criar" name="criar"></td>
</tr>
</table>
</form>

<?php
}
if($ligax) mysqli_close($ligax);
?>


e quando executo o onchange as inputs aparecem-me abaixo do botao criar e eu nao percebo porque.

podes-me ajudar mais uma vez?

cumps

P.S. desculpa ser tao chato

MPalhas
12-05-2008, 19:04
aparecem por baixo do botão porque o javascript ao fazer appendChild, vai criar o objecto dentro de um outro objecto (neste caso a tabela), mas adiciona a seguir a todos os objectos já existentes

não me lembro agora como se faz para adicionar a meio da tabela, mas sempre podes por a combobox fora da tabela e aí já não deve haver problemas

Majin Vegeta
12-05-2008, 19:14
ja esta, fechei a form antes da table do botao criar e ja deu. depois se for necessario meto outra form para o botao criar so que agora como as inputs estao dentro de java script nao as consigo alinhar ao meio da pagina :(

cumps

Majin Vegeta
14-05-2008, 01:28
ja esta, fechei a form antes da table do botao criar e ja deu. depois se for necessario meto outra form para o botao criar so que agora como as inputs estao dentro de java script nao as consigo alinhar ao meio da pagina :(

cumps

se eu meter nas inputs um link para css e alinhar no css as tabelas, e possivel que ele alinhe as inputs ao centro?

e que ja tentei de varias formas mas nao consigo alinhar as inputs que estao no javascrip ao centro.
ja experimentei meter aqui...

switch (campo) {
case "primeiro":
document.getElementById('tr_novo_campo').innerHTML ='<td><p>Imagem do Concurso</td><td><input name=userfile type=file></td>'; //o conteudo do TR muda para o campo escolhido
break;

...onde esta <td>, abrir a <table> e a <tr> antes e o mais esquisito e que se colocar na tag <table> align="center" e border=1, o align nao faz mas o border faz :(

help please

cumps

Majin Vegeta
23-05-2008, 00:22
MPalhas continuo com problemas por causa das tabelas. como ja referi atras a combo box quando era seleccionada aparecia sempre no fundo de tudo. eu experimentei meter o que estava abaixo da combo noutra tabela e noutra form que era para aparecer abaixo da combo e dava so que assim nao insere os dados na base de dados da segunda form porque o botao de inserir os dados ta na segunda form e os dados sao introduzidos na primeira, ou seja, a unica maneira e ter o botao dentro da mesma form da combo box mas assim a combo vai me aparecer depois do botao e eu queria que aparecesse antes.

nao sabes como posso resolver isto?

cumps