Ir para conteúdo

POWERED BY:

Arquivado

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

Angelo-ti

funcao Jquery - Validar form sem refresh

Por , em Javascript

Recommended Posts

Angelo-ti    3

Angelo-ti
Postado 

    <html>
    <head>
    <script type="text/javascript" src="[url=http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js]http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js [/url]"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
    jQuery('#ajax_form').submit(function(){
    var dados = jQuery( this ).serialize();
     
    jQuery.ajax({
    type: "POST",
    url: "controller.php?fun=inserir",
    data: dados,
    success: function( data )
    {
    document.getElementById('msg').innerHTML = data;
    }
    });
    return false;
    });
    });
    </script>
    </head>
    <body>
    <form method="post" action="" id="ajax_form">
    <label><input type="hidden" name="id" value="" /></label>
    <label>Nome: <input type="text" name="nome" value="" /></label>   
    <label><input type="submit" name="enviar" value="Enviar" /></label>
    </form>
    <div id="msg"></div>
    </body>
    </html>

Esta funcionado 100%, queria deixar ele mais dinâmico, queria passar os seguintes valores.

 

url (pagina em php.)

div onde vai aparecer a mensagem.

 

 

vlw...

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

desculpe, não entendi.

 

vc queria passar "onde" para quem ?

oque vc quer dizer com "mais dinâmico" ?

 

no caso seria: mais reaproveitável ?

Se for, te aconselho a fazer assim:

jQuery(document).ready(function() {
    jQuery('#ajax_form').submit(function() {
        var $this = jQuery(this),
            dados = $this.serialize();

        jQuery.ajax({
            type: "POST",
            url: $this.attr('action'),
            data: dados,
            success: function(data) {
                $this.next('div').html( data );
            }
        });
        return false;
    });
});

eu troquei o URL para pegar sempre do atributo action do form.

E troquei o sucess para sempre ler a próxima div na marcação após o form.

 

Outra forma de fazer isso, seria apenas reescrever essa parte do JSON ou fazer uma função.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Angelo-ti    3

Angelo-ti
Postado

vc queria passar "onde" para quem ?

Queria passa a URL(action do form), fico legal do jeito que fez..

 

queria passa o nome da div de retorno -

his.next('div').html( data ); nao funcionou

 

queria passa o nome do form - mais como tem action fico legal.

 jQuery('#ajax_form')

 

 

oque vc quer dizer com "mais dinâmico" ?

 

que posso usar com diferentes, códigos (forms)

 

 

Vlw pela força.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Angelo-ti    3

Angelo-ti
Postado

aproveitando, como eu faço para limpar os dados do forma após o envio,

 

tentei usar esse

 

complete: {
// limpa todos os campos do form
$("#ajax_form").each(function(){ this.reset(); }); }

 

não funcionou.



esse funciona

 

 

$("#ajax_form")[0].reset();

 

tem algum outra jeito melhor?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

é isso mesmo:

$("#ajax_form")[0].reset();

Qnto aos parâmetros, vc pode fazer assim tb:

function envia_form($form, $alvo) {

	jQuery.ajax({
		type: "POST",
		url: $form.attr('action'),
		data: $form.serialize(),
		success: function(data) {
			$alvo.html(data);
		}
	});
}
jQuery(document).ready(function() {
	jQuery('#ajax_form').submit(function() {
		envia_form(jQuery(this), jQuery('#msg'));
		return false;
	});
});

dá uma lida aqui:

http://wbruno.com.br/jquery/vixi-aprendi-jquery-mas-agora/

vai te ajudar a entender como funciona o jQuery.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Angelo-ti    3

Angelo-ti
Postado

não entendi muito seu código,

 

precisa fazer uma função mais ou menos assim

 

function enviar ($form, $div ) // nome do formulário , nome da div vai o retorno
{
jQuery.ajax({
type: "POST",
url: $form.attr('action'),
data: $form.serialize(),
success: function(data) {
document.getElementById($div).innerHTML = data; }
});
}

 

chamas isso em um Onclick, entendeu

 

esse código assim esta dando esse erro


Erro: TypeError: $form.attr is not a function

 

 

 




			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
William Bruno
			  

	
		
	
			 1501
	
		
	

		

		

			


	
		William Bruno
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

vc tem q passar o objeto dom e não o nome.



Veja:






envia_form(jQuery(this), jQuery('#msg'));



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					






					
				
			
			



		

	


	
	

	

	







	

		
			
				Ir para a lista de tópicos
				Javascript
			
		
	

	




	

	

	




						


	

		
	


					

					

	

		
        


	

		
    
			
				
					
					
  • 
				
					
					
  • 
				
					
					
  • 
				
			
		

	


		
            
			

	

		
		

			

				
			

		

	



		
	


					

				

			

			
		

		
		


	×
	

		

			

			

				
			


			
		

	



		

	































	
















		
			
		
		
		
		







	




	







	

		

			

				
Informação importante

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

			

			

				  Aceito