"onSubmit"

Thiagolgf · Abril 30, 2014

Boa tarde!

Estou acompanhando a apostila da Caelum com a finalidade de aprender Javascript, entretanto cheguei em um ponto que o exemplo não funciona de jeito nenhum.

Tenho no arquivo index.htm o seguinte código e este arquivo já contempla a referência ao script em outro diretório.

Referência ao script:

<script src="js/home.js"></script>

O 'form' onde tudo deveria acontecer:

<!--Inicio da Busca-->
<section class="busca">
  <h2>Busca</h2>

  <form action="http://www.google.com.br/search" id="form-busca">
   <input type="search" name="q" id="q">
   <input type="image" src="img/busca.png">
  </form>
</section>
<!--Fim da Busca-->

E um script chamado home.js com o seguinte código:

function validaBusca() {
  if (document.querySelector('#q').value == '') {
    alert('Não podia ter deixado a busca em branco!');
    return false;
  }
}
document.querySelector('#form-busca').onSubmit = validaBusca;

Gostaria de saber o que está sendo feito de errado.

Att,

Thiagolgf

William Bruno · Abril 30, 2014

Aperte Ctrl+Shift+J e veja oq aparece no console de erros.

http://wbruno.com.br/javascript-puro/como-debugar-javascript-firefox-erros-comuns/

Thiagolgf · Abril 30, 2014

No console de erros aparece esta mensagem indicando o arquivo home.js.

Uncaught TypeError: Cannot set property 'onSubmit' of null

No link enviado não consta nada parecido.

Att,

Thiagolgf

William Bruno · Abril 30, 2014

Não está conseguindo achar o elemento:

document.querySelector('#form-busca')

Nesse caso, a tag <script> está depois ou antes do html do form ?

Faça o seguinte:

window.onload = function(){
    document.querySelector('#form-busca').onSubmit = validaBusca;
}

para aguardar o DOM estar pronto.

Thiagolgf · Maio 2, 2014

A tag <script> está antes do html do form, ela está dentro do <head> e o form está dentro do <body>.

A solução sugerida não funcionou.

William Bruno · Maio 2, 2014

A tag script deve ficar depois do elemento html.

Ok, mas apareceu mais algum erro no console ? qual ?

Thiagolgf · Maio 5, 2014

Bruno, não estou conseguindo te entender.

Seguem ambos os arquivos

Arquivo: index.htm

<html>
  
  <head>
    <title>Mirror Fashion</title>
    <meta charset="ANSI">
<link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/estilos.css">
<script src="js/home.js"></script>
  </head>


  <body>


    <header class="container">
      <h1><img src="img/logo.png" alt="Mirror Fashion"></h1>


      <p class="sacola">
        Nenhum item na sacola de compras
      </p>


      <nav class="menu-opcoes">
        <ul>
          <li><a href="#">Sua Conta</a></li>
          <li><a href="#">Lista de Desejos</a></li>
          <li><a href="#">Cartão Fidelidade</a></li>
          <li><a href="sobre_novo.htm">Sobre</a></li>
          <li><a href="#">Ajuda</a></li>
        </ul>
      </nav>
    </header>


<!--Inicio das classes container e destaque-->
<div class="container destaque">
 <!--Inicio da Busca-->
 <section class="busca">
   <h2>Busca</h2>


<form action="http://www.google.com.br/search" id="form-busca">
 <input type="search" name="q" id="q">
 <input type="image" src="img/busca.png" onclick="validaBusca()">
</form>
      </section>
 <!--Fim da Busca-->


      <!--Inicio do Menu Departamento-->
 <section class="menu-departamentos">
   <h2>Departamentos</h2>


<nav>
 <ul>
   <li><a href="#">Blusas e Camisas</a></li>
<li><a href="#">Calças</a></li>
<li><a href="#">Saias</a></li>
<li><a href="#">Vestidos</a></li>
<li><a href="#">Sapatos</a></li>
<li><a href="#">Bolsas e Carteiras</a></li>
<li><a href="#">Acessórios</a></li>
 </ul>
</nav>
      </section>
 <!--Fim do Menu Departamento-->


 <img src="img/destaque-home.png" alt="Promoção: Big City Night">
</div>
<!--Fim .container .destaque-->


<div class="container paineis">


 <!--Inicio Painel Novidades-->
 <section class="painel novidades">
   <h2>Novidades</h2>


<ol>
 <li>
   <a href="produto.html">
     <figure>
   <img src="img/produtos/miniatura1.png">
   <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
</figure>
   </a>
 </li>
 <li>
   <a href="produto.html">
     <figure>
   <img src="img/produtos/miniatura2.png">
   <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
</figure>
   </a>
 </li>
 <li>
   <a href="produto.html">
     <figure>
   <img src="img/produtos/miniatura3.png">
   <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
</figure>
   </a>
 </li>
 <li>
   <a href="produto.html">
     <figure>
   <img src="img/produtos/miniatura4.png">
   <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
</figure>
   </a>
 </li>
 <li>
   <a href="produto.html">
     <figure>
   <img src="img/produtos/miniatura5.png">
   <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
</figure>
   </a>
 </li>
 <li>
   <a href="produto.html">
     <figure>
   <img src="img/produtos/miniatura6.png">
   <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
</figure>
   </a>
 </li>
</ol>
 </section>
 <!--Final Painel Novidades-->


 <!--Inicio Painel Mais Vendidos-->
 <section class="painel mais-vendidos">
   <h2>Mais Vendidos</h2>


<ol>
 <li>
   <a href="produto.html">
     <figure>
   <img src="img/produtos/miniatura1.png">
   <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
</figure>
   </a>
 </li>
 <li>
   <a href="produto.html">
     <figure>
   <img src="img/produtos/miniatura2.png">
   <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
</figure>
   </a>
 </li>
 <li>
   <a href="produto.html">
     <figure>
   <img src="img/produtos/miniatura3.png">
   <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
</figure>
   </a>
 </li>
 <li>
   <a href="produto.html">
     <figure>
   <img src="img/produtos/miniatura4.png">
   <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
</figure>
   </a>
 </li>
 <li>
   <a href="produto.html">
     <figure>
   <img src="img/produtos/miniatura5.png">
   <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
</figure>
   </a>
 </li>
 <li>
   <a href="produto.html">
     <figure>
   <img src="img/produtos/miniatura6.png">
   <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
</figure>
   </a>
 </li>
</ol>
 </section>
 <!--Fim Painel Mais Vendidos-->
</div>


    <footer>
 <div class="container">
   <img src="img/logo-rodape.png" alt="Logo Mirror Fashion">


   <ul class="social">
     <li><a href="http://facebook.com/mirrorfashion">Facebook</a></li>
 <li><a href="http://twitter.com/mirrorfashion">Twitter</a></li>
 <li><a href="http://plus.google.com/mirrorfashion">Google+</a></li>
   </ul>


 </div>
    </footer>


  </body>


</html>

Arquivo: home.js

function validaBusca() {
  if (document.querySelector('#q').value == '') {
    alert('Não podia ter deixado a busca em branco!');
return false;
  }
}


document.querySelector('#form-busca').onSubmit = validaBusca;

Tente me explicar, pois não consigo te entender.

No corpo do HTML, dentro do BODY não tenho nenhuma tag SCRIPT.

Anderson Danilo · Maio 5, 2014

Por padrão o navegador carrega de cima para baixo, acredito que o seu arquivo "home.js" foi carregado antes do formulário ser renderizado pelo navegador.

Você tem duas opções:

Colocar o javascript no final da página
Aguardar o evento onload do window para aplicar o "onSubmit" no form (como o Willian Bruno disse)

Thiagolgf · Maio 6, 2014

Como ficaria o javascript no fim da página se ele tem que ficar dentro do HEAD?

Anderson Danilo · Maio 6, 2014

Você pode colocar no final:

http://blog.caelum.com.br/por-uma-web-mais-rapida-26-tecnicas-de-otimizacao-de-sites/#l16

Thiagolgf · Maio 6, 2014

Ok, entendi!

Tenho que colocar a tag SCRIPT e todo o seu conteúdo dentro do arquivo INDEX.HTM depois do formulário.

<!--Inicio da Busca-->
 <section class="busca">
   <h2>Busca</h2>


<form action="http://www.google.com.br/search" id="form-busca">
 <input type="search" name="q" id="q">
 <input type="image" src="img/busca.png" onclick="validaBusca()">
</form>


<script>
 function validaBusca() {
            if (document.querySelector('#q').value == '') {
              alert('Não podia ter deixado a busca em branco!');
         return false;
            }
          }
 document.querySelector('#form-busca').onSubmit = validaBusca;
</script>


      </section>

Aí dá certo e a mensagem aparece!

Muito obrigado pela ajuda ao leigo aqui!

Arquivado

"onSubmit"

Recommended Posts

Thiagolgf 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

Thiagolgf 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

Thiagolgf 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

Thiagolgf 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Anderson Danilo 43

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiagolgf 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Anderson Danilo 43

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiagolgf 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Javascript - Calcular Valores Monetário em Tempo Real

JavaScript - Exibir logo dentro da Tabela html

PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto

Fóruns

Tempo Real

Informação importante