Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

fabio cisotto

Formulario principal com link (iframe?) abrir um subformulario dentro.

Recommended Posts

Ola Pessoal,

 

Tenho um formulario onde pego dados do cliente. Preciso inserir um link para entrada de dados (opcionais ) do cliente, dentro deste mesmo formulario. Vi uma vez um site com um formulario, e no meio das perguntas, havia um link "See more questions >". E clicando neste link, abriam mais perguntas neste mesmo formulario (e não página seguinte ou sobreposta). Isso foi feito com DIV? IFRAME? JQUERY? Como posso abrir uma janela dentro do meu formulario? Desde já obrigado pela atencao.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Talvez seja tudo carregado de uma vez e fica em elementos ocultos na página, ou em arrays gerenciados por js/jquery ou são carregadas na hora via ajax.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Pode fazer isto:

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

		$(document).ready({
			$('#adicional_form').css({'height':'0px','display':'none'});
		});
		
		function mostrarForm(){
			$('#adicional_form').css({'display':'block'});
			$('#adicional_form').animate({'height':'50px'});
		}			
	</script>
</head>
<body>
	<div id="form">
		<form>
			<input type="text" id="nome" placeholder="Seu nome">
		</form>
	</div>
	<span onclick="mostrarForm()">Dados opcionais</span>
	<div id="adicional_form">
		<input type="text" id="dogName" placeholder="Nome do seu cachorro">
	</div>
	<input typ="Submit" value="Enviar">
</body>
</html>

A proposta do Criquio também é boa.

Assim você teria de criar um outro documento html, apenas com os campos adicionais, e o formulário principal propriamente dito:

<html>
<head>
	<title>iMaster</title>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript">
		
		function mostrarForm(){
			var url;
			url = "formulario.adicional.htm";
			$.get(url, function(retorno){
				$(retorno).appendTo('#formData');
			})
		}			
	</script>
</head>
<body>
	<div>
		<form id="formData">
			<input type="text" name="nome" placeholder="Seu nome">
		</form>
	</div>
	<span onclick="mostrarForm()">Dados opcionais</span>
	<input typ="Submit" value="Enviar">
</body>
</html>

E o formulário adicional, que deve ser colocado na mesma raiz da página com o formulário principal:

<input type="text" name="email" placeholder="Seu email"><br>
<input type="text" name="telefone" placeholder="Seu telefone"><br>
<input type="text" name="facebook" placeholder="Seu´facebook"><br>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ola Luccas,

 

Em primeiro lugar, muito obrigado pelas respostas acima, ajudoram-me bastante, mesmo havendo alguns probleminhas como: a) um erro de sintaxe no 1o form na linha 8 ( $('#adicional_form').css({'height':'0px','display':'none'}); ).

 

b) Entao passei para os outros 2 forms seguintes e complementares. A solução de certa forma funcionou, exceto que o "Dados opcionais" fica sempre ativo, ou seja, se for clicado mais vezes, ele vai "enchendo a tela" com os input text do formulario 2.

 

Pergunto: é possível fazer o form "formulario.adicional.htm" aparecer abaixo de "Dados opcionais" ? Veja um num site internacional, cujas imagens seguem abaixo: Na imagem 1, nota-se o gatilho (SHOW MORE ATTRIBUTES) em vermelho:1.jpg

Ao se acionado, ele abre a seguinte tela ( inserindo-a no meio dos outros input text)

 

2.jpg

 

Cada "show more" abre mais dados. E o interessante, é que se clicarmos novamente no gatilho, a janela se fecha!

 

Eu sei Luccas, que isso dever ser complicado e parece que estou pendindo demais. Nao precisa escrever o codigo fonte, mas se você puder apenas me indicar o caminhoi a tomar (span onclick/jquery, i frame e etc) ja adudaria mutíssimo! Obrigado e bom feriado!

Fabio B. Cisotto

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.