• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

lopes_andre

Interactive Forms em Javascript/HTML. Como fazer?

15 mensagens neste tópico

Viva,

Abri um tópico na secção HTML, mas vejo que este sub-forum é o mais adequado para esta pergunta.

Queria fazer uma Interactive Form em HTML, mas estou a dar em doido, não vejo informação em parte alguma de como o fazer...

Queria fazer uma form em que conforme o OPTION BUTTON escolhido, me apareça um formulário diferente. Se fosse escolhido o OPTION BUTTON com a designação "Masculino" o utilizador iria ter de preencher umas text boxes, já se fosse escolhida a opção "Feminino" teriam de ser preenchidas outras text boxes. Eu sei que isto é possivel fazer num mesmo formulário usando os Interactive Forms.

Aqui está um exemplo de uma: http://www.zimmertech.com/tutorials/javascript/22/interactive-hidden-forms-tutorial.php

Alguem me dá umas luzes de como fazer isto?

Cumprimentos.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

algo do género

<select id='tipoBatata' onChange="fritarBatatas(this.value)">
......
</select>

function fritarBatatas(queBatatas){
if queBatatas = 'azul' {
//codigo
} else {
//outro codigo
}
}

onde tens código tens de meter o código que gera as form fields, agora não tenho tempo, depois digo qualquer coisa.....

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Muito obrigado pelas resposta fnds3000.

Agora, onde poderei aprender mais sobre form fields? Havará por ai algum tutorial com exemplos de como fazer?

Desde já obrigado.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Sempre podes adicionar todos os campos possíveis para ambas as checkboxes e depois divides o que pertence a cada com um div com display:none e depois com JavaScript mostras o div correspondente à checkbox selecionada.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Olá Nazgulled, obrigado pela resposta.

Compreendo o que me queres dizer, mas não tenho conhecimentos técnicos de como o fazer. Haverá por ai algum exemplo ou tutorial com essa técnica dos DIVS?

Mais uma vez, muito obrigado pela ajuda.

Cumprimentos.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Se quiseres facilidade, sempre podes usar uma framework JS, por exemplo, jQuery (a que eu uso).

Se tiveres o seguinte:

<div id="masculino" style="display: none"></div>
<div id="feminino" style="display: none"></div>

Pasta fazeres, usando jQuery:

$('#masculino').show(); // mostra a div
$('#masculino').hide(); // esconde a div

Depois, nas cheboxes ou radio buttons basta teres também um id associado e fazes o seguinte, imaginando que o id do radiobutton masculino é "radiom":

$('#radiom').onclick(function() {
    $('#masculino').show();
    $('#feminino').hide();
});

Muito basicamente é isto.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Mais uma vez obrigado. À noite testo o jQuery.

Muito obrigado pela disponibilidade.

Cumprimentos.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Viva,

Já estou a usar o jQuery, mas não estou a ir lá.

Deixo o que estava a testar.

<html> 
<head> 
<script type="text/javascript" src="jquery.js"></script> 

<script type="text/javascript">

$('#masculino').show(); // mostra a div
$('#masculino').hide(); // esconde a div
</script>

<script type="text/javascript">

$('#radiom').onclick(function() {
$('#masculino').show();
$('#feminino').hide();
});
</script>


</head>
<body> 

<input type="radio" name="masculino"  id="radiom"> Masculino<br>
<input type="radio" name="feminino" > Feminino<br>

<div id="masculino" style="display: none">Mostra Masculino</div>
<div id="feminino" style="display: none">Mostra Feminino</div>

</body> 
</html>

O script não está a funcionar, porque não percebi o principio de funcionamento dos Javascrips... Pergunto, o que estou a fazer de errado.

Desde já obrigado.

Cumprimentos.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Assim a primeira vista, enganei-me, é click() e não onclick(). Experimenta isso, agora não posso testar...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Olá Nazgulled, obrigado pela resposta.

Compreendo o que me queres dizer, mas não tenho conhecimentos técnicos de como o fazer. Haverá por ai algum exemplo ou tutorial com essa técnica dos DIVS?

Mais uma vez, muito obrigado pela ajuda.

Cumprimentos.

Tipo, primeiro crias duas divs com o conteudo de cada subForm

<select id='tipoBatata' onChange="fritarBatatas(this.value)">
<option value="azuis">Azuis</option>
<option value="amarelas">Amarelas</option>
</select>
<div id="batatasAzuis" style="display:none">
<!-- Metes o form das batatas azuis aqui -->
</div>
<div id="batatasVerdes" style="display:none">
<!-- Metes o form das batatas verdes aqui -->
</div>

depois o js trata de mostrar/ocultar o que interessa

function fritarBatatas(queBatatas){
switch(queBatatas){
  case "azuis":
   document.getElementById("batatasAzuis").style.display = "inherit"
   document.getElementById("batatasVerdes").style.display = "none"
   break;
  case "verdes":
   document.getElementById("batatasAzuis").style.display = "none"
   document.getElementById("batatasVerdes").style.display = "inherit"
   break;
}
}

não testei....

Cumps :(

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

É exactamente por esse código que eu prefiro usar uma framework como jQuery. Fica tudo muito mais simples e com código mais legível. Mas pronto, são sugestões, usa a que gostares mais.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

É exactamente por esse código que eu prefiro usar uma framework como jQuery. Fica tudo muito mais simples e com código mais legível. Mas pronto, são sugestões, usa a que gostares mais.

Sinceramente, eu prefiro criar o meu próprio código, porque tenho mais flexibilidade e o código só faz aquilo que é preciso (tornando a página mais leve, - KB), como tu disses-te são opções.....
0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Permite discordar...

Com uma framework de JS também crias o teu próprio código (nem percebi bem o que querias dizer com isto) e tens ainda mais flexibilidade do que JavaScript puro. Por exemplo, se usares JavaScript nu e cru podem-te surgir situações em que tens de ter ifs a perguntar em que browser estamos, se for X fazes de uma forma se for Y fazes de outra, por exemplo, AJAX em que o XmlHttpRequest é criado de forma diferente. Ora, o jQuery trata disso, não tens tu de te preocupar com isso, basta invocares o método para submter usando AJAX e pronto, ta feito, não tens tu de programar tudo e verificar o browser que estás a trabalhar e etc. Não tens este tipo de flexibilidade com JavaScript puro. E este é só um exemplo, existem muitos mais. O jQuery simplifica tudo o que o JS tem de "complicado", ja viste bem o que tens de fazer para esconder uma simples div? É para estas situações que existem frameworks. É como o .NET existe para o C#/VB.NET e o JRE para JAVA. De certa forma, é tudo parecido.

E sinceramente não sei até que ponto concordo a parte da página mais leve, por duas razões. Mas primeiro, tudo depende do que queres fazer, se for cenas simples e vais dar pouco uso ao JS, se calhar não compensa ter uma framework por trás, agora, se a intenção for dar muito uso e criar uma aplicação que JS intensivamente o caso muda de figura.

1) Primeiro ponto para despachar, num acho que uns míseros Kbs façam a diferença e se forem compactados e usada compressão gzip ainda fica menos de metade. E mais, como o MX+ disse noutro tópico, o JS é "cached" no browser, por isso...

2) Segundo, como disse anteriormente, se tiveres um uso intensivo de JS não sei o que compensa mais. Se não, vejamos... Tu para esconder um div fazes document.getElementById("batatasVerdes").style.display = "none" e eu faço $('#batatasVerdes').hide();. Ou seja, os bytes que tu gastas por cada char usando JS puro eu gasto na framework. No fundo, vai dar ao mesmo (em termos de Kb), claro que isto depende da envergadura do projecto, se for cenas simples, talvez jQuery (ou outra framework qualquer), não compense.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

2) Segundo, como disse anteriormente, se tiveres um uso intensivo de JS não sei o que compensa mais. Se não, vejamos... Tu para esconder um div fazes document.getElementById("batatasVerdes").style.display = "none" e eu faço $('#batatasVerdes').hide();. Ou seja, os bytes que tu gastas por cada char usando JS puro eu gasto na framework. No fundo, vai dar ao mesmo (em termos de Kb), claro que isto depende da envergadura do projecto, se for cenas simples, talvez jQuery (ou outra framework qualquer), não compense.

não necessariamente, podes fazer uma função e fica do género  hide('batatasverdes') .....

Concordo com a parte de que se for um site que use muito js compense um fw, mas para srcipt simples acho que não, como é este caso, acho que já nos estamos a desviar do tema inicial........

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Mas tu não sabes se "este" é um script simples ou não :D Tipo, a dúvida dele foi esta, coisa simples, mas lá sabemos se ele vai usar JS mais intensivamente? Eu quando comecei a usar o jQuery até me deu mais vontade de pensar em novas coisas para adicionar aos meus scripts porque é muito fácil de trabalhar com a framework. Coisas que não me passavam pela cabeça porque não estava com paciência para aprender JavaScript como deve ser.

Mas o tema inicial já está praticamente respondido... :P Mas pronto, chega de off-topic.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora