Problema com o form modal.

diego.djss · Abril 23, 2014

Nem sei se estou no fórum certo para essa dúvida mais ai vai, chamo meu form modal com um JavaScript abaixo:

$(document).ready(function(){
    $('.janelaModal, .fundoModal').hide(); 
        e = document.getElementsByTagName('#cadastrar');
        //alert(e);
       $('#cadastrar').click(function(v){
       v.preventDefault();
      $('.login, #cadastrar').hide(); 
      $('.fundoModal').fadeTo(0, 0.7);
      $('.janelaModal').fadeIn();
   });
  $('.fundoModal, .fecharModal').click(function(v){
       v.preventDefault(); 
      $('.janelaModal, .fundoModal').fadeOut();
      $('.login, #cadastrar').fadeIn();
  });
});

Nele têm um form com um input do type"submit" que vai realizar a validação em .php, mais assim que pressiono o mesmo ele fecha o form modal. E o engraçado é que o método foi chamado corretamento(da para ver na URL).

O que pode ser isso? Só iniciante...

William Bruno · Abril 23, 2014

Quando vc pressiona o botão submit, o form é enviado, e o comportamento é mandar tudo para o server-side.

Se vc não quer q o modal feche, vc deve enviar o form com javascript, impedindo o comportamento default do submit.

diego.djss · Abril 23, 2014

No caso usar o onClick para isso em vez do "submit"?

William Bruno · Abril 23, 2014

Não.

vc tem q usar

$('form').submit(function(e){
    e.preventDefault(); //impedindo q o submit seja enviado

    //... aqui vc envia com ajax
});

diego.djss · Abril 23, 2014

Não estou conseguindo, poderia me mostrar um exemplo mais claro. Desculpa ai só muito leigo.

Código:

<?PHP

include('/classes/DB.class.php');

$conn = new conect();

$conn->conectar();

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Login</title>

</head>

$(document).ready(function(){

$('.formModal, .fundoModal').hide();

$('#FormCadastrar').click(function(e){

e.preventDefault();

$('#login, .cadastrar').hide();

$('.fundoModal').fadeTo(0, 0.7);

$('.formModal').fadeIn();

});

$('.fundoModal').click(function(v){

v.preventDefault();

$('.formModal, .fundoModal').fadeOut();

$('#login, .cadastrar').fadeIn();

});

$('#tt').submit(function(e){

e.preventDefault();

});

</script>

*{

margin: 0;

padding:0;

}

#login{

width:200px;

top:50%;

left:50%;

;

height:0 auto;

border:#999999 1px solid;

position:absolute;

}

.form{

padding-left:20px;

}

.dblock{

display:block;

}

.fundoModal{

background-color:#000000;

z-index:1;

width:100%;

height:100%;

position:absolute;

}

.formModal{

z-index:2;

background-color:#FFFF00;

width:400px;

height:400px;

position:absolute;

top:50%;

left:50%;

;

margin-top:-200px;

}

</style>

<body>

</form>

</div>

<a href="#" id="FormCadastrar">Cadastrar</a>

</div>

<label class="dblock">Login</label>

<label class="dblock">Senha</label>

</form>

</div>

<div>

<?PHP

if(isset($msg)){

echo $msg;

echo $teste;

}

?>

</div>

</body>

</html>

diego.djss · Abril 24, 2014

O código que realmente estou usando:

<?PHP
session_start(); //Inicia a nossa sessão
if(!empty($_SESSION['login'])){
header('Location: [url=http://localhost/SicloCotacao/index.php');]http://localhost/SicloCotacao/index.php');[/url] 
}
?>
 
<?PHP
include("includes/header.php");
?>
<!doctype html>
<html lang="pt-br"><!--Informa qual a linguagem principal do documento-->
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/estilo_login.css"/>
<link rel="stylesheet" type="text/css" href="css/estilo_modal.css"/>
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
<title>Siclo Cotação</title>
<link rel="shortcut icon" type="image/x-icon" href="imagens/icone_title.ico"/><!--Adiciona icone no titulo do site-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/modal.js"></script>
<script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function(){
    $("#FormLogin").validationEngine();
//$("#FormCadastrar").validationEngine();
   });
   
function realizarCadastro(){
$('#FormCadastrar').submit(function(e){
e.preventDefault(); 
$.ajax({
     url: 'header.php', //caminho do arquivo a ser executado
dataType: 'html', //tipo do retorno
type: 'post', //metodo de envio
beforeSend: function(){
//função chamada antes de realizar o ajax
},
complete: function(){
//função executada depois de terminar o ajax
},
success: function(data, textStatus){
//retorno dos dados
},
error: function(xhr,er){
//tratamento de erro
}
});
}); 
}
</script>
</head>
<body>
<div class="fundoModal"></div>
<div class="janelaModal bradius">
<div class="topoModal">
<div class="tituloModal">Cadastro</div>
        <div class="fecharModal"><a href="#">Fechar</a></div>
</div>
    <div id="formModal">
        <form id="FormCadastrar" action="?acao=cadastrarUsuario" method="post">
         <label>Login</label>
            <input type="text" name="login" class="txt bradiusForm validate[required, maxSize[20]]" placeholder="Login"/> 
            <label>Senha</label>  
            <input type="password" name="password" class="txt bradiusForm validate[required, maxSize[20]]" placeholder="Password"/>
            <label>Confirme a Senha</label>  
            <input type="password" name="checkPassword" class="txt bradiusForm validate[required, maxSize[20]]" placeholder="Confirme a Password"/>
            <label>Nome</label>
            <input type="text" name="nome" class="txt bradiusForm validate[required, maxSize[80]]" placeholder="Nome"/>
            <label>E-mail</label>
            <input type="text" name="e-mail" class="txt bradiusForm validate[required, maxSize[80]]" placeholder="E-mail"/>
            <input type="submit" class="sb bradiusForm" value="Confirmar" onClick="realizarCadastro()"/>
        </form>
    </div>
    <div class="rodapeModal">
     <?PHP 
if(isset($msg)){
echo "$msg";
}
?> 
    </div>
</div>
<div id="cadastrar"><a href="cadastro.php" title="Cadastre-se e venha fazer parte da nossa equipe.">Cadastre-se »<a/></div>
<div class="login">
    <form id="FormLogin" action="?acao=logar" method="post">
     <input type="text" name="login" placeholder="Login" class="validate[required, maxSize[20]]" />
        <input type="password" name="password" placeholder="Password" class="validate[required, maxSize[20]]"/>
        <input type="submit" class="btn" value="Login"/>
        <input type="checkbox" id="checkbox"><label class="checkbox" for="checkbox">Lembrar meu nome de usuário e senha</label>
    </form>
</div>
</body>
</html>

Não está funcionando, ajuda.

William Bruno · Abril 24, 2014

vc está quase, agora leia sobre delegate events.

e aí acompanhe no console de erros do browser o motivo de falhar.

ctrl + shif + j

diego.djss · Abril 24, 2014

A falha:

event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

Estou pesquisando sobre o que você me falou, mais têm em varias linguagem de programação, procuro em jquery, javascript, ect?

diego.djss · Abril 25, 2014

Camarada ainda não conseguir, pode me dar uma luz ai.

William Bruno · Abril 26, 2014

vamos lá, isso aqui:

function realizarCadastro(){

remove, não faz muito sentido essa função com outra função dentro.

e sobre o delegate, é só fazer:

$('body').on('submit', '#FormCadastrar', function(e){

diego.djss · Abril 29, 2014

Você está me ajudando e muito, e venho aqui pedir novamente.

Segue o meu ajax:

$('body').on('submit', '#FormCadastrar', function(e){   
    e.preventDefault(); 
     $.ajax({
     url: 'includes/header.php', //caminho do arquivo a ser executado
    dataType: 'html', //tipo do retorno
    type: 'get', //metodo de envio
    data: {acao:'cadastrarUsuario'},
    beforeSend: function(){
    //função chamada antes de realizar o ajax
    },
   complete: function(){
    //função executada depois de terminar o ajax
   },
   success: function(data, textStatus){
   //retorno dos dados
    console.log(data);
    var resultado = data;
    alert(resultado);
   },   
   error: function(xhr,er){
    //tratamento de erro
    alert('Erro');
    }
  });
}); 
</script>

O meu php:

<?PHP
//Globais
include("/classes/Db.classe.php");
$connect=new DB;
$connect=$connect->connect();
//Testar conexão
if(!$connect){
echo "Erro de conecção com o banco de dados, procure o administrador.";
exit; 
}
 
//Método de Login
if(isset($_GET["acao"])){
$acao=$_GET["acao"];
if($acao=="logar"){
$login=$_POST["login"];
$password=$_POST["password"];
$query=mysql_query("select * from usuario where Login = '$login' and Senha='$password'");
$result=mysql_num_rows($query);
if($result >= 1){
//Redirecionar para a página desejada
$_SESSION['login'] = $login;
$_SESSION['password'] = $password;
header('Location: [url=http://localhost/SicloCotacao/index.php');]http://localhost/SicloCotacao/index.php');[/url]
}
}
//Método log out
if($acao=="sair"){
session_destroy();
header('Location: [url=http://localhost/SicloCotacao/login.php');]http://localhost/SicloCotacao/login.php');[/url]
}
//Método cadastrar
if($acao=="cadastrarUsuario"){
$login=$_POST["login"];
$password=$_POST["password"];
$checkPassword=$_POST["checkPassword"];
$nome=$_POST["nome"];
$senha=$_POST["e-mail"]; 
if($password <> $checkPassword){
$msg="As senha não conferem."; 
echo $msg; 
} 
}
}
 
?>

Erro do console:

<br /> <b>Warning</b>: include(/classes/Db.classe.php): failed to open stream: No such file or directory in <b>C:\xampp\htdocs\SicloCotacao\includes\header.php</b> on line <b>3</b><br /> <br /> <b>Warning</b>: include(): Failed opening '/classes/Db.classe.php' for inclusion (include_path='.;C:\xampp\php\PEAR') in <b>C:\xampp\htdocs\SicloCotacao\includes\header.php</b> on line <b>3</b><br /> <br /> <b>Fatal error</b>: Class 'DB' not found in <b>C:\xampp\htdocs\SicloCotacao\includes\header.php</b> on line <b>4</b><br />

O problema é que não estou conseguindo retornar o valor de $msg.

William Bruno · Abril 29, 2014

Tem erro no seu php, corrija.

diego.djss · Abril 29, 2014

Imagino que seja no include, mais esse php e chamado por outros form's e se mudar vai dar problema nos mesmos.

Arquivado

Problema com o form modal.

Recommended Posts

diego.djss 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

diego.djss 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

diego.djss 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

diego.djss 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

diego.djss 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

diego.djss 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

diego.djss 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

diego.djss 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sistema não funciona corretamente

Fazer busca no Banco de dados usando vários critério

Ler campos com caracteres especiais no xml

Fóruns

Tempo Real

Informação importante