[php-brasil] Janela Pop Up com PHP e Javascript

[Eduardo Fernandes]

Pessoal, boa noite,

 

Sou iniciante em PHP, estou dando meus primeiros passos ainda e estou confeccionando um site simples para cadastro de funcionários em um BD MySQL. Estou utilizando um form HTML onde há validação dos campos para que não sejam deixados em branco e no final, após o insert, uma janela pop up se abre informando "Cadastro efetuado com sucesso!". Até consegui colocar para rodar e está funcionando bem, porém, todas as janelas pop up, tanto da validação dos textfields como do insert estão abrindo duas vezes. Se eu deixo de colocar o nome no textfield e dou o submit do form, ele abre duas vezes a janela dizendo que "O campo nome deve ser preenchido!". Quando adiciono um usuário, ele abre duas vezes a janela "Cadastro efetuado com sucesso!". Alguém saberia me dizer por que isso está acontecendo? Abaixo estou postando uma parte do código. Muito obrigado a todos!!

 

<?php

include "../conexao/conexao.php";

if ($_POST){
   
 $nome = $_POST['func_nome'];
 $login = $_POST['func_login'];
 $senha = $_POST['func_senha'];
 $nivel = $_POST['func_nivel'];
 
   
 if (empty ($nome)){
  echo "<script language='javascript'>";
  echo "alert('O campo NOME deve ser preenchido!');";
  echo "</script>";
 }else    
 
 
 if (empty($login)){
  echo "<script language='javascript'>
     alert('O campo LOGIN deve ser preenchido!');
     </script>";
 }else
 
 if (empty($senha)){
  echo "<script language='javascript'>
     alert('O campo SENHA deve ser preenchido!');
     </script>";
 }else
 
 if (empty($nivel)){
  echo "<script language='javascript'>
     alert('Selecine o nível de acesso!');
     </script>";
 }else
 
 if ($nivel == "--"){
  echo "<script language='javascript'>
     alert('Selecione o Nivel!');
     </script>";
 
 }else{

 
 $cadastrar = "INSERT INTO funcionarios (func_nome, func_login, func_senha, func_nivel) VALUES ('$nome', '$login', '$senha', '$nivel')";
 
  $cadastrar_query = mysql_query($cadastrar, $conexao);
  
    
  echo "<script language='javascript'>
   <!--
    alert('Cadastro efetuado com sucesso!');
    //-->
    </script>";
  
 
  }
   
}

?>
--
Att,

Eduardo Fernandes

MVHost: Analise e Desenvolvimento de Sistemas Web
http://www.mvhost.com.br
Mobile: 21 9486-7840
E-mail: edu...@mvhost.com.br
GoogleTalk: efernan...@gmail.com
Msn: efernan...@hotmail.com

[Elton Schivei Costa]

Para Boas Práticas:

1. Use um Framework PHP.
2. Use um Framework JavaScript.
3. Use JavaScript e PHP Orientado à Objetos.
4. Não use PopUps, use Modals.
5. Valide Formulários primeiro pelo JavaScript depois pelo PHP.
6. Use Ajax.
   

Quando conseguir trabalhar com isso verá que a produção será em torno de 60% à 80% mais rápida e evitará problemas no PHP quando tratado previamente via JavaScript.

Att.

--
Você está recebendo esta mensagem porque se inscreveu no grupo "php-brasil" dos Grupos do Google.
Para postar neste grupo, envie um e-mail para php-b...@googlegroups.com.
Para cancelar a inscrição nesse grupo, envie um e-mail para php-brasil+...@googlegroups.com.
Para obter mais opções, visite esse grupo em http://groups.google.com/group/php-brasil?hl=pt-BR.

[Alysson Tibério]

Olá,

Não acho que é necessário ele aprender um framework PHP, ou qualquer
outro framework, se ainda ele está dando os primeiros passos na
linguagem em si.

É interessante dar um passo de cada vez, primeiramente devemos
aprender os principais conceitos da linguagem em questão, antes de
partir para a utilização de um framework específico

Atenciosamente.

On 8 abr, 01:10, Elton Schivei Costa <lord.sh...@gmail.com> wrote:
> Para Boas Práticas:
>
>    1. Use um Framework PHP.
>    2. Use um Framework JavaScript.
>    3. Use JavaScript e PHP Orientado à Objetos.
>    4. Não use PopUps, use Modals.
>    5. Valide Formulários primeiro pelo JavaScript depois pelo PHP.
>    6. Use Ajax.

>
> Quando conseguir trabalhar com isso verá que a produção será em torno de 60%
> à 80% mais rápida e evitará problemas no PHP quando tratado previamente via
> JavaScript.
>
> Att.
>
> Em 7 de abril de 2010 23:21, Eduardo Fernandes

> <efernandes1...@gmail.com>escreveu:

> > E-mail: edua...@mvhost.com.br
> > GoogleTalk: efernandes1...@gmail.com
> > Msn: efernandes1...@hotmail.com

>
> > --
> > Você está recebendo esta mensagem porque se inscreveu no grupo "php-brasil"
> > dos Grupos do Google.
> > Para postar neste grupo, envie um e-mail para php-b...@googlegroups.com.
> > Para cancelar a inscrição nesse grupo, envie um e-mail para

> > php-brasil+...@googlegroups.com<php-brasil%2Bunsu...@googlegroups.com>

[André Melo]

Mande o html do seu formulario!

Para cancelar a inscrição nesse grupo, envie um e-mail para php-brasil+...@googlegroups.com.

Para obter mais opções, visite esse grupo em http://groups.google.com/group/php-brasil?hl=pt-BR.

--
==================================
André Melo - 061 8174-6797
Desenvolvedor Web                              
msn: andrer...@hotmail.com            
==================================

[Éverton Pereira]

Eu já tive problemas parecidos com alert em javascript, que era pra aparecer só uma vez mas aparecia duas.

Uma sugestão: em cada teste, ao invés de dar o alert, crie uma variável chamada 'mensagem' e concatene as mensagens de erro nela. Depois no final, teste se a variável 'mensagem' veio vazia, se não vier, dê o alert usando essa variável, se vier vazia, faça o insert.

Também é uma boa dar uma olhada no html que foi gerado após o script ser executado, pra ver se vai aparecer mais de uma vez o alert do javascript.

--

[Eduardo Fernandes]

André,

 

Obrigado pela ajuda de todos do fórum. Estou colocando abaixo todo o código. Agradeço mesmo a ajuda de todos, mas como disse o Alysson, eu sou iniciante, mas iniciante mesmo, só sei fazer mesmo o básico no PHP. Mas estou arriscando! rsrsrsrs...

 

Eu alterei o código ontem, fiz a validação primeiro em javascript e tirei a validação em PHP:

 

<?php

if ($_POST){

include "../conexao/conexao.php";

$nome = $_POST['func_nome'];
$login = $_POST['func_login'];
$senha = $_POST['func_senha'];
$nivel = $_POST['func_nivel'];

$cadastro = "INSERT INTO funcionarios (func_nome, func_login, func_senha, func_nivel) VALUES ('$nome', '$login', '$senha', '$nivel')";
$cadastro_query = mysql_query($cadastro, $conexao);

if ($cadastro_query){
 
 echo "<script language='javascript'>";
 echo "alert('Cadastro efetuado com sucesso!')";
 echo "</script>";
 
}
}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script language="javascript">

function valida_cadastro(){
 if (document.cadastro.func_nome.value==""){

  alert("O campo \"NOME\" deve ser preenchido!");

  document.cadastro.func_nome.focus();
  return false;
 } else
 
 if (document.cadastro.func_login.value==""){

  alert("O campo \"LOGIN\" deve ser preenchido!");

  document.cadastro.func_login.focus();
  return false;
 }else
 
 if (document.cadastro.func_senha.value==""){

  alert("O campo \"SENHA\" deve ser preenchido!");

  document.cadastro.func_senha.focus();
  return false;
 }else
 
 if (document.cadastro.func_nivel.value==""){
  alert("Selecione um nivel de acesso!");
  document.cadastro.func_nivel.focus();
  return false;
 }else{
  
  return true;
  
 }
}

</script>

</head>

<body>

<table width="379" border="1" align="center">
  <tr>
    <td align="center">Cadastro de Funcionários</td>
  </tr>
  <tr>
    <td><form name="cadastro" method="post" action="" onsubmit="return valida_cadastro()">
   
    <table width="371" border="1">
  <tr>
    <td>Nome:</td>
    <td><input name="func_nome" type="text" id="func_nome" size="40" maxlength="40" /></td>
  </tr>
  <tr>
    <td>Login:</td>
    <td><input name="func_login" type="text" id="func_login" size="20" maxlength="20" /></td>
  </tr>
  <tr>
    <td>Senha:</td>
    <td><input name="func_senha" type="text" id="func_senha" size="10" maxlength="10" /></td>
  </tr>
  <tr>
    <td>Nível de Acesso:</td>
    <td><p>
      <select name="func_nivel" size="1" id="func_nivel">
        <option selected="selected">--</option>
        <option value="administrador">Administrador</option>
        <option value="usuario">Usuário</option>
      </select>
      <br />
    </p></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input type="submit" name="cadastrar" id="cadastrar" value="Cadastrar" />
      <input type="reset" name="limpar" id="limpar" value="Limpar" /></td>
  </tr>
</table>

   
    </form></td>
  </tr>
</table>

</body>
</html>

[Elton Schivei Costa]

Cara, cuidado aí com sua query, INJECTION FORTE E NERVOSO.

Continue usando a validação também no PHP, ela é a mais importante.

Só uma coisinha, na sua form, tem o seguinte onsubmit="return valida_cadastro()", isso não vai funcionar em todos os navegadores. o retorno booblean deve estar após a chamada à function. portanto, tente assim.

<?php

if (isset($_POST['inserir']) && $_POST['inserir'] === "inserir"){

include "../conexao/conexao.php";

$nome = $_POST['func_nome'];

$login = $_POST['func_login'];

$senha = $_POST['func_senha'];

$nivel = $_POST['func_nivel'];

$cadastro = "INSERT INTO funcionarios (func_nome, func_login, func_senha, func_nivel) VALUES ('$nome', '$login', '$senha', '$nivel')";

$cadastro_query = mysql_query($cadastro, $conexao);

if ($cadastro_query){

 

 echo "<script language='javascript'>";

 echo "alert('Cadastro efetuado com sucesso!')";

 echo "</script>";

 

}

}

?>

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<script language="javascript">

function valida_cadastro(){

 if (document.cadastro.func_nome.value==""){

  alert("O campo \"NOME\" deve ser preenchido!");

  document.cadastro.func_nome.focus();

 } else

 

 if (document.cadastro.func_login.value==""){

  alert("O campo \"LOGIN\" deve ser preenchido!");

  document.cadastro.func_login.focus();

 }else

 

 if (document.cadastro.func_senha.value==""){

  alert("O campo \"SENHA\" deve ser preenchido!");

  document.cadastro.func_senha.focus();

 }else

 

 if (document.cadastro.func_nivel.value==""){

  alert("Selecione um nivel de acesso!");

  document.cadastro.func_nivel.focus();

 }else{

  

  document.getElementById("cadastro").submit();

  

 }

}

</script>

</head>

<body>

<table width="379" border="1" align="center">

  <tr>

    <td align="center">Cadastro de Funcionários</td>

  </tr>

  <tr>

    <td><form id="cadastro" name="cadastro" method="post" action="cadastro.php">

    <td><input type="button" name="cadastrar" id="cadastrar" value="Cadastrar" onclick="valida_cadastro();return false;" />

      <input type="reset" name="limpar" id="limpar" value="Limpar" /></td>

  </tr>

</table>

    <input id="limpar" type="hidden" name="inserir" value="inserir" />

    </form></td>

  </tr>

</table>

</body>

</html>

Att.

[Elton Schivei Costa]

Ah! Esqueci de avisar outra coisa.

Não use <script language="javascript">

Use <script type="text/javascript">

Isso impede problemas de CrossBrowser.

[Eduardo Fernandes]

Elton, muito obrigado pela resposta!

 

Ainda não testei, mas fiquei com dúvida em alguns pontos:

 

<input id="limpar" type="hidden" name="inserir" value="inserir" /> Por que colocar essa tag?

 

e outro ponto:

 

  document.getElementById("cadastro").submit(); O que faz esse comando?

 

 

Muito obrigado!!

 

 

Abs,

[André Melo]

<input id="limpar" type="hidden" name="inserir" value="inserir" /> Por que colocar essa tag?

Vc não precisa usar isso!

document.getElementById("cadastro").submit(); O que faz esse comando?

A grosso modo, pega seu form com id="cadastro" e submete.

[André Melo]

O botão para enviar os dados do form (submit) vc pode mudar para um type="button"  e colocar o envento onClick="valida_cadastro();" e na sua função valida_cadastro() vc faz as verificações e no final vc submete usando o document.getElementById("cadastro").submit();. e depois do alert vc coloca um return;
Não testei mas é mais ou menos assim!

Ex.:

if (document.cadastro.func_nome.value==""){

  alert("O campo \"NOME\" deve ser preenchido!");

  document.cadastro.func_nome.focus();
 return;

 }

 if (document.cadastro.func_login.value==""){

  alert("O campo \"LOGIN\" deve ser preenchido!");

  document.cadastro.func_login.focus();
 return;

 }

 

 if (document.cadastro.func_senha.value==""){

  alert("O campo \"SENHA\" deve ser preenchido!");

  document.cadastro.func_senha.focus();
return;

 }

 

 if (document.cadastro.func_nivel.value==""){

  alert("Selecione um nivel de acesso!");

  document.cadastro.func_nivel.focus();
return;

 }

  

  document.getElementById("cadastro").submit();

[Elton Schivei Costa]

bom, esta hidden field é para garantir que a inserção será feita somente se este campo for passado via Post, que é o que confirmo na primeira linha do PHP:

if (isset($_POST['inserir']) && $_POST['inserir'] === "inserir"){

os 3 sinais de igual "===" é para ter certeza que o tipo e o valor são exatamente iguais.

Se reparar, eu troquei seu botão de submit onde ele passou a ser um button com propriedade onclick.

o  document.getElementById("cadastro") instância o objeto <Form />(eu uso o getElementById por causa do crossbrowser) e o submit() faz com que ele envie os dados do formulário como um botão de submit.

Att.

Em 8 de abril de 2010 12:49, Eduardo Fernandes <efernan...@gmail.com> escreveu:

[Elton Schivei Costa]

André, foi exatamente o que fiz, dê uma olhada na html de resposta que enviei para ele.

Att.

[André Melo]

Não tinha visto que era uma solução para o problema. Pensei que fosse lixo do e-mail que fica ao responder!
Desculpas!

[Elton Schivei Costa]

kkkk, normal, isso acontece quando não uso o GMail, ai o lixo é tenso.

Desculpas aceitas André.

[Eduardo Fernandes]

Amigos do PHP Brasil,

 

Agradeço a todos pela ajuda! Porém mesmo com todas as modificações feitas, continuo com a janela pop-up abrindo duas vezes. Outra coisa, se eu trocar o submit pelo button, ele não está enviando o formulário. Clico no button  e ele simplesmente não faz nada, mesmo colocando no final do javascript o document.getElementById("cadastro").submit(); . Ah, o javascript também não deu certo quando coloquei text/javascript. Ele simplesmente ignorou qualquer validação dos campos.

 

Mais uma vez obrigado a todos!

[Jose Wilker]

a validação dos dados nao irá funcionar. facilmente poderá ser burlada. use o código abaixo para validar os tampos.

document.cadastro.func_nome.value.match(/\S/);

att,

José Wilker (JW)

"O Impossível é apenas uma questão de opinião"

2010/4/10 Eduardo Fernandes <efernan...@gmail.com>

[Jose Wilker]

É inutil a utilização de frameworks de qualquer natureza e janelas modais e ajax, quando não se conhece javascript.

primeiro deve-se conhecer mto bem a linguagem antes de optar por um framework, caso contrário sairá algo bizarro no código.

att,

José Wilker (JW)

"O Impossível é apenas uma questão de opinião"

2010/4/8 Elton Schivei Costa <lord....@gmail.com>

[Eduardo Fernandes]

Jose Wilker, obrigado pela dica. Voltei ao meu código original, sem as mudanças que os amigos propuseram. Resolvi instalar o Firefox no meu PC para fazer um teste e para minha surpresa deu certo. Ele agora só abre duas janelas pop-up quando eu uso o IE.

 

Abs!

[Jose Wilker]

Eduardo, pra você poder aprimorar suas habilidades seria de grande ajuda para você uma lida no site da w3c. lá você poderá ler sobre, html, css, javascript. e no php.net você vai conseguir aprender sobre php bacana.

nesse seu caso, é apenas a estrutura do seu documento que está errada. uma lida de 2hrs vai deixar vc fera. 

veja sobre functions em JS no google (coloca assim "javascript functions"), ai ao inves de vc ficar escrevendo direto "document.getElementById()" você cria uma função que faça isso pra vc e retorne o valor.

tenta algo do genero:

function xID(v) {

 return document.getElementById(v);

}

esse return serve pra quando você quiser saber o resultado daquela mini bloco que vc está executando.

e falar de expressao regular pode parecer o fim do mundo para muita gente, só que veja de uma maneira diferente. se vc usar expressao regular é o jeito mais eficiente de validar alguma informação, ou extrair alguma informação de um bloco de dados.

procura no google sobre, "Regular Expression" e depois que ler sobre isso da uma lida sobre  "Regular Expression in JavaScript". aí você vai conseguir compreender direito como funciona.

se vc precisar de qualquer ajuda no aprendizado é só falar, todos deram soluções validas pra você, que deve levar em consideração mas é bem mais interessante para o seu aprendizado da uma pesquisada no google sobre os tópicos que eu lhe passei, ai vc fica fera.

abs,

José Wilker (JW)

"O Impossível é apenas uma questão de opinião"

2010/4/10 Eduardo Fernandes <efernan...@gmail.com>

[Eduardo Fernandes]

Jose Wilker,

 

Mais uma vez muito obrigado pelas suas dicas. Sou ainda um mero iniciante, mas vou buscar me aprimorar com as dicas que todos vocês me deram. Eu já havia entrado no W3C Schools e dado uma lida rápida em javascript e gostei muito. Vou continuar lendo e me aperfeiçoando. Fiquei muito feliz pela prontidão e rápida ajuda de todos do fórum. Muito obrigado mesmo.

 

 

Abs!