Utilizando Alertas sem submeter

[CamilaLopez 9]

Boa tarde turma ...

Estou com uma duvida em relacao a fazer a utilizacao de alertas do bootstrap no meu codigo !!!

Eu só consigo mostrar ele submetendo o formulario, mas quero que seje mostrado sem fazer load da pagina e se possivel só mostrar e resetar os campos para em branco.

 

É somente para o cadastro de usuario, exemplo:

 

quando clicar em cadastrar, verificar se existe o usuario no BD e se sim ... mostrar um alerta de perigo em vermelho, se não mostrar o de sucesso em verde e logo limpar os campos e não fazer o load.

 

 

 

[allex_carvalho 124]

Você está querendo validar os campos. Para fazer a pesquisa no banco, comece estudando ajax. Para fazer a validação do formulário, precisará estudar submit.

[CamilaLopez 9]

Obrigado mas estou sem tempo pra estudar agora .... preferia um exemplo pratico de alguem que já tenha isto em pratica ... acho que webdesign faca isto no dia a dia e eu nao manjo dos front-end como vcs !!

ta tenhu a pagina toda pronta e os codigos de bando de dados, só queria estilizar o alerta com jquery

[Damon 20]

CamilaLopez

 

Vou passar pra vc um exemplo bem simples que vc pode adequar as suas necessidades ok.

function validar(formulario){        
				if(formulario.nome.value == ''){ /* aqui vc coloca a condição que vc quer que seja submetido o controle do campo. */           

					alert("O campo NOME é obrigatório.");  /* aqui é o que vc quer que apareça na mensagem.*/
         			return false;  } /*fecha aqui */

				if(formulario.nome.value.length <= 3){         
					alert("Nome invalido.");  
			return false;     } 
				if(formulario.email.value.indexOf(('@' && '.'),0)== -1){
					alert("EMAIL invalido.");        
			return false; } 

Espero ter te ajudado.

Abraços

[CamilaLopez 9]

Obrigado amigo, mas a validacao de campos e strings eu sei ..... :D

Como citado acima quero é uma verificao de banco de dados, eu ja tenho ela pronta rodando ... só que preciso faze-le sem o loader da pagina ou seja faze-lo com jquery.

 

quando submeter o formulario ele faz uma busca pelo novo usuario cadastrado exemplo: "teste@teste.com"

Select * from usuario where email= "teste" ;

E ae se ele existir já na base de dados mostrar um alerta com bootstrap bunitim informando que já existe.
porem que sem load

E se nao existir mostrar o aerta verdim e limpar os campos, mas já foi feito o cadastro por traz.

[Damon 20]

Assim desculpa a falta de atenção, agora entendi o que você quis dizer.

 

Então da uma olhada neste exemplo que william bruno fez acho que cabe certinho no seu problema.

 

http://wbruno.com.br/ajax/verificar-se-usuario-ja-existe-no-banco/

[Leonardo Silva_109261 6]

Você pode usar a função $.POST() ou $.GET() do jQuery vai depender do method do seu formulário.

Basicamente você vai monstar um arquivo para chegar o campo, por exemplo:

   $(document).ready(function(){
    
        // Ação para quando você sair do input
        $("#campoUsuario").blur(function(){
                
                var Usuario = $(this).val(); // Recupera o valor do campo para ir checar no banco.
                // Aqui função para ir buscar no banco, sendo que o formulário está com o method igual a POST
                $.POST("checar.php", {nome:Usuario}, function(data){
                    
                    // Faz um alerta com a resposta do banco caso seja igual a true
                    // avisando que o usuário já existe;
                    
                    if(data == "True"){
                        alert("O usuário já existe no banco"); // Alerta pro usuário.
                        $("#campoUsuario").css('border-color', 'red'); // Coloca o campo com a borda vermelha
                        return false; // Não envia o form.
                    }
                    
                }

        });
        
    });

O arquivo checar.php vai receber essa informação como se fosse o envio normal de um form, ou seja, dentro do arquivo você vai recuperar o valor enviado usando o valor passado no segundo parametro da função $.POST() que é {nome:VALOR_DO_PARAMETRO}, ou seja, lá você vai recuperar assim:

 

 

 
 $nome = $_POST['nome'];
 

 

Se fosse GET seria:

 

 

 
$nome = $_GET['nome'];
 

 

Eu fiz esse vídeo tutorial mostrando exatamente o que você quer - http://webvisualedinamica.com/web-visual-dinamica-formulario-de-cadastro-dinamico-com-jquery-php-e-mysql/

 

Dá uma olhada lá, espero que ajude.

 

Abraço.

[rdpacato 2]

No meu exemplo são dois combobox, onde pego valores ao carregar a página... sem submeter.. para preenche-los:

 

 

 

Combos (está com uma lista:

<div id="comboVeiculo">
			<c:import url="ServletVeiculo" />
			<c:set var="listaVeic" value="${requestScope.listaVeiculo}" />
				<select name="veiculo" id="VeicSelecionado" style="width:125px;">
					<option value="0">VEICULO</option>
						<c:forEach var="listasVeic" items="${listaVeic}">
							<option value="${listasVeic.veiculo}">${listasVeic.veiculo}</option>  
						</c:forEach>
				</select>
			</div>
		
		
			<div id="comboDispositivo">
			<c:import url="ServletVeiculo" />
			<c:set var="listaDisp" value="${requestScope.listaDispositivo}" />
				<select name="dispositivo" id="DispSelecionado" style="width:125px;">
					<option value="0">DISPOSITIVO</option>
						<c:forEach var="listasDisp" items="${listaDisp}">
							<option value="${listasDisp.dispositivo}">${listasDisp.dispositivo}</option>
						</c:forEach>
				</select>					
			</div>

Função:

function displayVals() {
	  var veiculoSeleionado = $('#VeicSelecionado :selected').text();
	  var dispositivoSeleionado = $('#DispSelecionado :selected').text();
	  $.ajax({
	        type: 'POST',
	        url: 'ServletVeiculo',
	        data: {
	            veiculo:veiculoSeleionado,
	            dispositivo:dispositivoSeleionado
	        },
	        beforeSend:function(){
	            // this is where we append usually a loading image
	        },
	        success:function(data){
	            // successful request; do something with the data
	            $('#output').html(data);

	        },
	        error:function(){
	            // failed request; give feedback to user
	        }
	    });	  
	}
	$( "select" ).change( displayVals );
	displayVals();