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
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
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
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
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
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
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
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
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
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
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
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
|
|