2

Tenho um sistema com diversos formulários chamando jQuery e ajax para resolver os problemas e cadastrar os dados recuperados no banco mysql. Como eu sou iniciante, estou tendo problemas por falta de conhecimento. O que eu aprendi:

<script src="jQuery"></script>
<script>
$(document).ready(function(){
      $("#enviar").click(function() {

            $nome = $("nome").val();
            if(nome != "") { tratamento e banco } else { avisa o usuário }

      });
});
</script>

<body>
      <form action="" method="post" enctype="application/x-www-form-urlencoded">
             <input type="text" id="nome">
             <input type="submit" id="enviar">
      </form>

Mas agora eu tenho que processar 20 variáveis, de repente fazer funções para validar algumas e depois com ajax mandar para o banco de dados e processar todas as mensagens. Não posso escrever esse script de outro jeito que não seja num .js externo que vai ficar só para isso. Eu tentei criar um .js externo mas quando eu clico em enviar o script não busca o .js com o parametro #enviar para começar a processar o formulário mesmo que no form action eu chame o arquivo PHP e coloque o jQuery dentro dele.

Pergunta: Como ao dar a ação do id enviar no submit do form, ele vai buscar o arquivo externo e vai processar todo esse javascript. Eu sou iniciante mas já tenho sistemas em PHP. Agora, como eu vou chamar o meu javascript externo?

Também tentei inserí-lo no topo do sistema pensando que ele seria um include ou require como no PHP mas totalmente sem sucesso.

1 Resposta 1

4

Pelo que eu entendi, o que você quer fazer é evitar que o formulário seja submetido caso o nome não seja preenchido. Você pode fazer isso da seguinte forma:

O seu arquivo HTML terá o seguinte conteúdo:

    <html>
    <head>...</head>
    <body>
    <form id="formulario" action="seu-script.php" method="post" enctype="application/x-www-form-urlencoded">
         <input type="text" id="nome">
         <input type="submit" id="enviar">
    </form>
    <script type="text/javascript" src="jquery.min.js" ></script>
    <script type="text/javascript" src="seu-script.js" ></script>
    </body>
    </html>

Dessa forma, o jquery será carregado antes do seu script. Agora, o seu-script.js deve ser o seguinte conteúdo:

    $(function(){
          $("#formulario").submit(function(evento) {
                if (!$("#nome").val()) {
                   evento.preventDefault();
                   alert("Você deve preencher o campo nome.");
                }
          });
    });

Veja que ao invés de observar o evento click do botão, é observado o evento submit do formulário, que é um evento mais genérico (cobre o caso do usuário simplesmente apertar a tecla enter).

A linha "evento.preventDefault()" faz com que o formulário não seja submetido.

A linha abaixo avisa o usuário. Você pode preferir criar um elemento na página ou mostrar algum elemento escondido, ao invés de usar o alerta.

Quando o formulário for submetido, ele vai executar o seu-script.php , que deve validar novamente os dados (pois o usuário pode ter desabilitado o javascript, ou forjado o envio de dados através de outra ferramenta que não o navegador) e fazer a comunicação com o banco de dados.

3
  • Se funcionar e claro que vai funcionar, você é um cara super legal e vou te dar a melhor resposta. Todos aqui poderiam ser assim compreensíveis com iniciantes. Quer dizer que se chamar meu arquivo debaixo do form vai executar o .js antes do .php? Excelente. 7/08/2014 às 2:39
  • Excelente @Daniel Neis ... muito obrigado pela sua ajuda. Excelente a sua resposta que é a solução da minha pergunta. Espero milhares de pessoas legais como tu por aqui. 7/08/2014 às 3:07
  • Com esta experiência também descobri um pouco do motivo pelo qual os scripts vão ao fundo dos sites, justamente para fazer esta chamada antes do PHP entre outras coisas. Infos para os iniciantes como eu. 7/08/2014 às 3:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .