Ir para conteúdo

POWERED BY:

Arquivado

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

Andrew Marques

Informações alterar junto com o formulário

Por , em Desenvolvimento frontend

Recommended Posts

Andrew Marques    47

Andrew Marques
Postado

Olá pessoal, tenho uma dúvida...

 

Vi em um site que quando vou digitando meus dados em um formulário os dados vão aparecendo do lado igual como vai ficar no caso meu anúncio no site, como tem o google adsense a pré-visualização...

 

Alguém sabe como faço isso??

 

Para quando a pessoa vai digitando no formulário as informações já vão aparecendo ao lado na pré-visualização...

 

Agradeço desde já! :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

thejefferson    1

thejefferson
Postado

Olá ! Cara, isso pode ser feito da seguinte maneira :

Usaremos HTML ; CSS e JavaScript.:

Primeiramente iremos criar um formulário. Vou apenas dar um breve exemplo:

 

<html>
<head>
<title>Acesse : www.diariodecanguaretama.com.br</title>

<style type="text/css">
    .lado_esquerdo{position:absolute; left:0px;}/* Esta função em css faz com que o formulário onde iremos inserir os dados, fique do lado esquerdo. */
    .lado_direito{position:absolute; left:250px;}/* Esta função em css faz com que o formulário onde irá receber os dados do form_1, fique do lado direito do form_1. */
</style>

<script type="text/javascript">
    function vizualizar_nome()
    {
        var valor_nome = document.form_1.nome_1.value;
        document.getElementById("nome_2").value=valor_nome;
    }// Esta função em javascript junto com a função "onblur", que coloquei no campo "nome_1", irá fazer com que o valor/conteúdo do campo "nome_2", que será tipo nossa pré-vizualização, receba o valor do campo "nome_1", que será o fomulário que iremos estar inserindo nossos dados.
    
    function vizualizar_email()
    {
        var valor_email = document.form_1.email_1.value;
        document.getElementById("email_2").value=valor_email;
    } // Esta função em javascript junto com a função "onblur", que coloquei no campo "email_1", irá fazer com que o valor/conteúdo do campo "email_2", que será tipo nossa pré-vizualização, receba o valor do campo "email_1" quando você tirar a seleção dele. Ele será o fomulário que iremos estar inserindo nossos dados.
    
    function vizualizar_cidade()
    {
        var valor_cidade = document.form_1.cidade_1.value;
        document.getElementById("cidade_2").value=valor_cidade;
    } // Esta função em javascript junto com a função "onblur", que coloquei no campo "cidade_1", irá fazer com que o valor/conteúdo do campo "cidade_2" quando você tirar a seleção dele. Ele será tipo nossa pré-vizualização, qure irá receber o valor do campo "cidade_1", que será o fomulário que iremos estar inserindo nossos dados.
    
</script>

</head>
<body>
<div class="lado_esquerdo">
   <form name="form_1">
        <table>
            <tr>
                <td>Nome:</td>
                <td><input type="text" id="nome_1" onblur="vizualizar_nome()"/></td>
                </tr>
                <tr>
                <td>E-mail:</td>
                <td><input type="text" id="email_1" onblur="vizualizar_email()"/></td>
                </tr>
                <tr>
                <td>Cidade:</td>
                <td><input type="text" id="cidade_1" onblur="vizualizar_cidade()"/></td>
                </tr>
                <tr>
                <td><input type="submit" value="Enviar" /></td>
            </tr>
        </table>
    </form>
</div>

<div class="lado_direito">
   <form name="form_2">
        <table>
            <tr>
                <td>Nome:</td>
                <td><input type="text" id="nome_2" disabled/></td>
                </tr>
                <tr>
                <td>E-mail:</td>
                <td><input type="text" id="email_2" disabled/></td>
                </tr>
                <tr>
                <td>Cidade:</td>
                <td><input type="text" id="cidade_2" disabled/></td>
                </tr>
                <tr>
                <td><input type="submit" value="Enviar" /></td>
            </tr>
        </table>
    </form>
</div>

</body>
</html>

 

A maneira que consegui foi essa por enquanto. Qualquer dúvida, fale comigo por email : jeffersondonasci@hotmail.com

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito