Quantcast
Channel: Últimos conteúdos
Viewing all articles
Browse latest Browse all 14190

Formulário com .Hide e .toggle Juqery

$
0
0

olá pessoal eu recentemente fiz uma landing page para um empresa e precisei colocar um formulário para contato no final da páriga.

para quem quiser ver um exemplo está aqui http://www.rmb.esy.es/auaha

bom está tudo funcionando porém quando eu seleciono o assunto nos campos radio ele não me dá o assunto na próxima etapa do formulário por que eu estou usando as funçoes .hide e .toggle do Jquery para proseguir com o formulário. de algum modo quando ele chama a função hide ele perde os valores dos inputs radio. segue o código abaixo.

<form>
        
    <div id="radius">
        <div><input class="radio" type="radio" value="Estou começando um projeto novo" checked name="assunto" id="assunto" />
        <span>Estou começando um projeto novo </span></div>

        <div><input class="radio" type="radio" value="Quero melhorar minha loja, dar um up no layout"  name="assunto" id="assunto" />
        <span>Quero melhorar minha loja, dar um up no layout</span></div>

        <div><input class="radio" type="radio" value="Quero aumentar as minhas vendas com campanhas e relacionamento"  name="assunto" id="assunto" />
        <span>Quero aumentar as minhas vendas com campanhas e relacionamento</span></div>

        <div><input class="radio" type="radio" value="Quero conversar sobre outro assunto"  name="assunto" id="assunto" />
        <span>Quero conversar sobre outro assunto</span></div>
    </div><!--/ Radius -->

    <div id="formularius">
        <h1>Preencha o formulário</h1>
        <div id="left">
            <label>nome <input type="text" id="nome" name="nome" placeholder="seu nome completo"></label>
            <label>email <input type="text" id="email" name="email" placeholder="seuemail@seuemail.com.br"></label>
            <label>telefone <input type="text" id="fone" name="fone" placeholder="(11)11111-1111"></label>
            <h2 id="back-to-form">clique aqui para voltar</h2>
            
        </div>

        <div id="right">
            <label>investimento <select name="invest" id="invest">
                <option value ="de R$ 1.000 a 2.000">de R$ 1.000 a 2.000</option>
                <option value ="de R$ 1.000 a 2.000">de R$ 2.000 a 3.000</option>
                <option value ="de R$ 3.000 a 4.000">de R$ 3.000 a 4.000</option>
                <option value ="de R$ 6.000 a 10.000">de R$ 6.000 a 10.000</option>
            </select></label>
            <label id="textarea">mensagem <textarea placeholder="Deixe sua mensagem" name="msg" id="msg"></textarea></label>
            <div id="btnSubmit">Continuar <h2>>></h2></div>
        </div>
    </div><!--/ formularius -->

    <buttom id="submit-radio">Continuar</buttom>
        <script type="text/javascript">
         $("#submit-radio").click(function(){
         $("#radius").hide( "slow" );
         });

         $("#submit-radio").click(function(){
         $("#formularius").toggle( "slow" );
         });

         $("#submit-radio").click(function(){
         $("#submit-radio").hide( "slow" );
         });

         $("#back-to-form").click(function(){
         $("#formularius").hide( "slow" );
         });

         $("#back-to-form").click(function(){
         $("#radius").toggle( "slow" );
         });

         $("#back-to-form").click(function(){
         $("#submit-radio").toggle( "slow" );
         });
        </script>
    </form> 

Viewing all articles
Browse latest Browse all 14190