none
Interação HTML5 e JavaScript RRS feed

  • Pergunta

  • Pessoal,

    Preciso de ajuda para um formulário em HTML5 que precisa fazer algumas validações usando Javascript. Explico abaixo:

    Tenho uma pergunta cuja resposta é formada por um array de radiobuttons e uma vez que um dos radiobuttons é selecionado eu preciso emitir uma mensagem de alerta e carregar uma variável do tipo string que será testada ao final do script por meio de uma cadeia de ifs.

    Por exemplo:

    Você gosta mais de jogar em qual ambiente?

    1) Aberto

    2) Fechado

    3) Ambos

    Eu escolho a opção Aberto (1), então eu preciso carregar uma variável com a palavra "aberto" para ser testada mais tarde no código, por meio de ifs.

    Aqui está o meu código HTML:

    Construção do array de radiobuttons:

      <p>
      <label>Você se sente melhor para jogar em ambiente abertos, fechados ou ambos?</label><br>
      <input type = "radio"
             name = "radambiente"
          id = "ambientefechado"
          value = "Fechado"
          checked = "checked"/>
      <label for = "ambientefechado">Ambiente Fechado</label>

      <input type = "radio"
             name = "radambiente"
          id = "ambienteaberto"
          value = "Aberto"/>
      <label for = "ambienteaberto">Ambiente Aberto</label>
      
      <input type = "radio"
             name = "radambiente"
          id = "ambienteambos"
          value = "Ambos"/>
      <label for = "ambientefechado">Ambos</label>
      </p>

    Botão para submeter a resposta:

      <input
        type = "button"
        id = "btn-enviar"
        onclick = ambiente()
        value = "Buscar!">

    Função Javascript:

    Function Ambiente()
    document.getElementById("btn-enviar").onclick = ambiente()
    {
        var radios = document.getElementsByName("radambiente");
        for (var i = 0; i < radios.length; i++)
     {
            if (radios[i].checked)
      {
       varorienta = radios[i].value;
                alert("Passou por aqui!");
            }
        }
    };

    Desde já muito obrigada!

    Starshine.


    A água sempre vence.


    • Editado Star Shine quarta-feira, 29 de julho de 2015 20:48
    quarta-feira, 29 de julho de 2015 20:43

Respostas

  • Amigo, achei o erro... Function é com "f" minúsculo... a única diferença...

    Obrigada de qualquer forma....

    Starshine.


    A água sempre vence.


    • Editado Star Shine sexta-feira, 31 de julho de 2015 00:52
    • Marcado como Resposta Star Shine sexta-feira, 31 de julho de 2015 00:52
    sexta-feira, 31 de julho de 2015 00:51

Todas as Respostas

  • Bom dia Star S

    Me explica essa parte que não entendi direito, pois esta chamando uma função que não existe ambiente()

    Function Ambiente()
    document.getElementById("btn-enviar").onclick = ambiente()
    {
        var radios = document.getElementsByName("radambiente");
        for (var i = 0; i < radios.length; i++)
     {
            if (radios[i].checked)
      {
       varorienta = radios[i].value;
                alert("Passou por aqui!");
            }
        }
    };


    GTSA vantagem de ser inteligente é que podemos fingir que somos imbecis enquanto ao contrario é completamente impossivel

    quinta-feira, 30 de julho de 2015 12:48
  • Oi! Obrigada pela ajuda!

    Eu simplifiquei o código mas ainda não consegui.... fiz de modo a apenas aparecer uma mensagem quando clicar o botão, mas não funcionou....

    estou postando meu código original:

    <!DOCTYPE HTML>
    <html>
      <head>
        <title>Seu Esporte!</title>
        <meta charset = "UTF-8" />
     <link rel="stylesheet" href="css/estilo.css"> 
     <script>
      Function Funcao1()
      {
        alert("Passou por aqui!");
      }
     </script>
      </head>

      <header class = "containerh">
        <table>
             <tr>
                <td class = "logo">
                    <img src="imagens/Logo Jouer.png" alt="Jouer!" border=0></h1>
                </td>
                <td class="Menu">
                    <ul>
                        <li class="MenuLinha"> <a href= "default.aspx">Home</a></li>
                        <li class="MenuLinha"> <a href = "Jouer.aspx">Jouer!</a></li>
                        <li class="MenuLinha"> <a href ="Esportes.aspx">Esportes</a></li>
                        <li class="MenuLinha"> <a href ="FormOportunidade.aspx">Jouer Oportuni</a></li>
                        <li class="MenuLinha"> <a href ="Projeto.aspx">Project</a></li>
                        <li class="MenuLinha"> <a href ="Noticias.aspx">Notícias</a></li>
                        <li class="MenuLinha"> <a href ="Pesquisa2.aspx">Seu Esporte</a></li>
                        <li class="MenuLinha"> <a href ="FormContato.aspx">Contato</a></li>
                    </ul>
                </td>
                <td>
                   <img src="imagens/Bolinhas2.png" alt="Jouer!" border=0></h1>
                </td>
            </tr>
         </table>
      </header>
      <body class="container">
        <br> <br>
        <center><img src="imagens/figurabusca.png" alt="Jouer!" border=0></h1></center>
     <br> <br>
      
         <form>
          <fieldset>
           <legend><b>Quais as suas preferências quando ao esporte? Clique na resposta mais adequada!</b></legend>
        <br>
        <p>
           <label>Você prefere receber orientação completa antes de jogar (guiada), enquanto está jogando (semi-guiada) ou você não precisa de orientação (livre)?</label><br>
        <input type = "radio"
               name = "radorienta"
         id = "orientaguiada"
         value = "guiada"
         checked = "checked"/>
        <label for "orientaguiada">Guiada</label>

        <input type = "radio"
               name = "radorienta"
         id = "orientasemiguiada"
         value = "semi-guiada">
        <label for "orientasemiguiada">Semi-Guiada</label>
       
        <input type = "radio"
               name = "radorienta"
         id = "orientalivre"
         value = "livre"/>
        <label for "orientalivre">Livre</label> 
        </p>
           <p>
              <label>No esporte que você procura, o time deveria ser composto apenas de homens, apenas por mulheres ou ambos?<label><br>       
              <input type = "radio"
                     name = "radsexo"
                     id = "sexoMasculino"
                     value = "Homens"
                     checked = "checked" />
              <label for = "sexoMasculino">Homens</label>
             
              <input type = "radio"
                     name = "radsexo"
                     id = "sexoFeminino"
                     value = "Mulheres"/>
              <label for = "gendermale">Mulheres</label>
     
              <input type = "radio"
                     name = "radsexo"
                     id = "sexoAmbos"
                     value = "Ambos"/>
              <label for = "sexoAmbos">Ambos</label>
            </p>
            <p>
      <label>Você se sente melhor para jogar em ambiente abertos, fechados ou ambos?</label><br>
      <input type = "radio"
             name = "radambiente"
          id = "ambientefechado"
          value = "Fechado"
          checked = "checked"/>
      <label for = "ambientefechado">Ambiente Fechado</label>

      <input type = "radio"
             name = "radambiente"
          id = "ambienteaberto"
          value = "Aberto"/>
      <label for = "ambienteaberto">Ambiente Aberto</label>
      
      <input type = "radio"
             name = "radambiente"
          id = "ambienteambos"
          value = "Ambos"/>
      <label for = "ambientefechado">Ambos</label>
      </p>
      <p>
      <label>Qual o grau de investimento que você está disposto a empregar?</label><br>
      <input
            type = "radio"
         name = "radinvest"
         id = "investbaixo"
         value = "baixo"
         checked = "checked"/>
      <label for = "investbaixo">Baixo</label>
      
      <input
            type = "radio"
         name = "radinvest"
         id = "investmedio"
         value = "medio"/>
      <label for = "investmedio">Medio</label>

      <input
            type = "radio"
         name = "radinvest"
         id = "investalto"
         value = "alto"/>
      <label for = "investalto">Alto</label>  
      </p>
      <p>
      <label>Qual a sua idade?</label><br>
      <input
           type = "radio"
        name = "radidade"
        id = "idade1"
        value = "idade1"
        checked = "checked">
        <label for = "idade1"> Até 20 anos </label>
      
      <input
           type = "radio"
        name = "radidade"
        id = "idade2"
        value = "idade2">
        <label for = "idade2"> Até 40 anos </label>
      
      <input
           type = "radio"
        name = "radidade"
        id = "idade3"
        value = "idade3">
        <label for = "idade3"> Até 60 anos </label>
       
      <input
       type = "radio"
       name = "radidade"
       id = "idade4"
       value = "idade4">
       <label for = "idade4">Indiferente</label>
       
      </p>
      <p>
      <label>Fale um pouco de você, seu jeito de ser é:</label><br>
      <input
       type = "radio"
       name = "radjeito"
       id = "jeito1"
       value = "Timido"
       checked = "checked"/>
      <label for "jeito1">Tímido</label>
       
      <input
       type = "radio"
       name = "radjeito"
       id = "jeito2"
       value = "Extrovertido"/>
      <label for "jeito2">Extrovertido</label>   

      <input
       type = "radio"
       name = "radjeito"
       id = "jeito3"
       value = "Depende"/>
      <label for "jeito1">Depende</label>

      <p>
       <label>Qual o tipo de <b>Atividade</b> que você gosta mais? Escolha 3 (três):</label><br><br>
       <input
         type = "checkbox"
         name = "chkatividade"
         id = "atividade1"
         value = "explosiva" />
       <label for "atividade1">Explosivas</label><br>
      
       <input
         type = "checkbox"
         name = "chkatividade"
         id = "atividade2"
         value = "concentracao" />
       <label for "atividade1">de Concentração</label> <br>

       <input
         type = "checkbox"
         name = "chkatividade"
         id = "atividade3"
         value = "forca" />
       <label for "atividade3">de Força</label><br>

       <input
         type = "checkbox"
         name = "chkatividade"
         id = "atividade4"
         value = "descontraida" />
       <label for "atividade1">Descontraida e Recreativa</label><br>

       <input
         type = "checkbox"
         name = "chkatividade"
         id = "atividade5"
         value = "corpo" />
       <label for "atividade1">com Uso Apenas do Corpo</label> <br>   

       <input
         type = "checkbox"
         name = "chkatividade"
         id = "atividade6"
         value = "equipamento" />
       <label for "atividade6">com Uso de Equipamento (Bola, Disco, Fita, etc.)</label><br>
       
       <input
         type = "checkbox"
         name = "chkatividade"
         id = "atividade7"
         value = "concentracao" />
       <label for "atividade7">Coordenação Motora</label><br>  

       <input
         type = "checkbox"
         name = "chkatividade"
         id = "atividade8"
         value = "concentracao" />
       <label for "atividade8">Competitiva</label> <br>

       <input
         type = "checkbox"
         name = "chkatividade"
         id = "atividade9"
         value = "diferente" />
       <label for "atividade9">que Possuam Estilo de Vida e Vestimenta</label><br>    

       <input
         type = "checkbox"
         name = "chkatividade"
         id = "atividade10"
         value = "conceitual" />
       <label for "atividade10">que Possuam Conceitos Bem Definidos (Fair Play, Filosofia, Cultura, etc)</label><br>
       
       <input
         type = "checkbox"
         name = "chkatividade"
         id = "atividade11"
         value = "globalizadas" />
       <label for "atividade11">que sejam Globalizadas</label><br>

       <input
         type = "checkbox"
         name = "chkatividade"
         id = "atividade12"
         value = "viajar" />
       <label for "atividade12">que Permitam Competir e Viajar</label> <br>
      </p>
      <input type="button" onclick="funcao1()" value="Exibir Alert" />
      <br><br>
          </fieldset>    
        </form>
      </body>
    </html>

    o  mais interessante e que se eu executar o código:

    <!DOCTYPE html>

    <html>
     <head>
      <title>Tutorial de Alert em Javascript - Linha de Código</title>
      <script>
       function funcao1()
       {
        alert("Eu sou um alert!");
       }
      </script>
     </head>
     <body>
      <input type="button" onclick="funcao1()" value="Exibir Alert" />
     </body>
    </html>

    funciona perfeitamente.... então não sei se é algo no meu código.

    Novamente obrigada!

    Starshine.

    ---------------------------------------------------------------------------------

    A água sempre vence.


    • Editado Star Shine quinta-feira, 30 de julho de 2015 23:48
    quinta-feira, 30 de julho de 2015 21:04
  • Amigo, achei o erro... Function é com "f" minúsculo... a única diferença...

    Obrigada de qualquer forma....

    Starshine.


    A água sempre vence.


    • Editado Star Shine sexta-feira, 31 de julho de 2015 00:52
    • Marcado como Resposta Star Shine sexta-feira, 31 de julho de 2015 00:52
    sexta-feira, 31 de julho de 2015 00:51