Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fail to fading out a div with jQuery Submit button

i need a little bit of help and my friend told me to ask here, hope someone can help me, thanks.

I'm trying to make my hole div 'primaria' fadeout when i sucesfully send the form with an .asp form and then make the div 'secundaria' fadein (she is with the display: none property)

<div id="primaria">

    <div class="escrita">

         <p class="fontegrande">CADASTRE-SE </p>
         <p class="fontepequena">E RECEBA NOSSAS</p> 
         <p class="fontemedia">PROMOÇÕES EXCLUSIVAS</p>
     </div>

         <div class="formulario">
            <form id="formform" name="news" action="newsletter_xp.asp" method="post" class="validate send-ajax">
                <input id="formvalue_name" type="text" name="nome" value="Seu nome:2" title="required:true;msg_nome:'Informe seu nome.';cleanup:true;">
                <input id="formvalue_email" type="email" name="email" value="Seu email:2" title="required:true;email:true;msg_email:'Informe um e-mail válido.';cleanup:true;">
                <input type="hidden" name="acao" value="IN">
                <input class="hide" type="submit" value="Cadastrar" title="Cadastrar">
                <a href="#"  class="submit" title="Cadastrar" id="formvalue_send">CADASTRAR</a>

            </form>
         </div>

    </div>  

     <div id="secundaria">

         <div class="escrita2">
             <p class="fontegrande2">PRONTO!</p>
             <p class="fontemedia2">SEU CADASTRO FOI</p>
             <p class="fontepequena2">REALIZADO COM SUCESSO</p>                                     
        </div>
    </div>
</div>

And the script:

<script>

   $('#formform').submit(function(e){
      $('#primaria').fadeOut('slow',function(){
         $('#secundaria').fadeIn('slow');
      });
   });
</script>
like image 543
Júlio Nienow Avatar asked Mar 26 '26 07:03

Júlio Nienow


1 Answers

Try this :

http://jsfiddle.net/h4nov4qf/

<div id="primaria">

    <div class="escrita">

         <p class="fontegrande">CADASTRE-SE </p>
         <p class="fontepequena">E RECEBA NOSSAS</p> 
         <p class="fontemedia">PROMOÇÕES EXCLUSIVAS</p>
     </div>

         <div class="formulario">
            <form id="formform" name="news" action="newsletter_xp.asp" method="post" class="validate send-ajax">
                <input id="formvalue_name" type="text" name="nome" value="Seu nome:2" title="required:true;msg_nome:'Informe seu nome.';cleanup:true;">
                <input id="formvalue_email" type="email" name="email" value="Seu email:2" title="required:true;email:true;msg_email:'Informe um e-mail válido.';cleanup:true;">
                <input type="hidden" name="acao" value="IN">
                <input class="hide" type="submit" value="Cadastrar" id="btn" title="Cadastrar">
                <a href="#"  class="submit" title="Cadastrar" id="formvalue_send">CADASTRAR</a>

            </form>
         </div>

    </div>  

     <div id="secundaria">

         <div class="escrita2">
             <p class="fontegrande2">PRONTO!</p>
             <p class="fontemedia2">SEU CADASTRO FOI</p>
             <p class="fontepequena2">REALIZADO COM SUCESSO</p>                                     
        </div>
    </div>
</div>

<script>
$('#btn').click(function(e){
      e.preventDefault();
      $('#primaria').fadeOut('slow',function(){
         $('#secundaria').fadeIn('slow');
      });
   });
</script>

<style>
#secundaria
{
    display: none;    
}
</style>
like image 90
DinoMyte Avatar answered Mar 28 '26 20:03

DinoMyte



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!