Jump to content
VCastilho

Capturar ação de um botão

Recommended Posts

Bom Dia


Desenvolvi um filtro HTML e estou com dificuldades em criar o JavaScript para o funcionamento do mesmo, poderiam em ajudar a criar esse JS?
Segue o código:
 

<div id = "filtro">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style disabled>
    

    #filtro {
    border-style:double;
}

#button1 {
    width: 120px;
    position: inherit;
    right: 10px;
    background-color: #e00505;
    font-size: 12px;
    FLOAT: right
}

h4 {
    font-size: 18px;
    border-style: inset;
}

select {
    border: 1px solid #000;
    box-sizing: border-box;
    width: 124px;
    border-radius: 5px;
    height: 25px;
    padding: 3px;
}

section label {
    width: calc(100% / 4);
    color: red;
    text-align: center;
}

section {
    display: flex;
    flex-wrap: wrap;
}
h4/ {
    border-style:double;
}


@media screen and (max-width:768px) {
    section label {
        margin-bottom: 20px;
        width: 100%;
    }
}
</style>
<h4 style="text-align: center;">Personalize o seu Kit de Segurança</h4><br><br>

<form action="#" id="form">

    <section>
        <label>
            <b> Tipo do seu Kit </b><br>
            <select name="speed" id="speed" style=" ">
                <option desable>Selecione</option>
                <option>Residencial</option>
                <option>Comercial</option>
            </select>
        </label>
        <label>
            <b>Qualidade de Seu Kit</b><br>
            <select name="files" id="files" style=" ">
                <option desable> Selecione </option>
                <option value="HD">HD</option>
                <option value="Full HD">Full HD</option>
                <option value="Analógica">Analógica</option>

            </select>
        </label>
        <label>
            <b> Quantidade de Câmeras </b><br>
            <select name="number" id="number" style=" ">
                <option desable> Selecione </option>
                <option>1 Câmera</option>
                <option>2 Câmeras</option>
                <option>3 Câmeras</option>
                <option>4 Câmeras</option>
                <option>5 Câmeras</option>
                <option>6 Câmeras</option>
                <option>7 Câmeras</option>
                <option>8 Câmeras</option>
                <option>9 Câmeras</option>
                <option>10 Câmeras</option>
                <option>11 Câmeras</option>
                <option>12 Câmeras</option>
                <option>13 Câmeras</option>
                <option>14 Câmeras</option>
                <option>15 Câmeras</option>
                <option>16 Câmeras</option>
            </select>
        </label>
        <label>
            <b> Selecione a Marca </b><br>
            <select name="salutation" id="salutation">
                <option desable selected>Selecione</option>
                <option>Intelbras</option>
                <option>Hikvision</option>
                <option>Outras</option>
            </select>
        </label>
    </section>
  
<BR>
    <BR>
   
 
</form>
 
</div>
<br>
<br>
 <button class="kd-filter-button" id="button1">Ver resultados</button>

Seria bom, se possível o botão funcionar fora da tag "form" pois para personalizar fica melhor

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By peterstefan
      Bom dia, estou fazendo uma cadastro via rest e estou utilizando o curl para cadastrar no webservice...
      Meu código está cadastrando tudo certinho, porem quando ele cadastra e mostra o retorno que foi cadastrado com sucesso ele fica o AGUARDE, CARREGANDO e não para.. não sei oque esta faltando pq já tentei varias coisas e não deu certo... 
       
       
       
      $Data = [ "nomeRazaoSocial" => $PostData['nomeRazaoSocial'], "identMF" => $PostData['identMF'], "email" => $PostData['email'], "telefone" => $PostData['telefone'], "senhaProvisoria" => $PostData['senhaProvisoria'] ]; $DataString = json_encode($Data); $curl = curl_init(WEBSERVICECADASTRO); curl_setopt($curl, CURLOPT_CUSTOMREQUEST, "POST"); curl_setopt($curl, CURLOPT_POSTFIELDS, $DataString); curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); curl_setopt($curl, CURLOPT_HTTPHEADER, array( 'Content-Type: application/json', 'Content-Length: ' . strlen($DataString)) ); $result = curl_exec($curl); if ($result) { $jSON['success'] = "<i class='icon-checkmark'></i>Pronto, cadastro foi realizado com sucesso!"; }else{ $jSON['error'] = "<i class='icon-warning'></i>Oops! Erro ao cadastrar! Por favor, tente novamente!"; }  

       

    • By peterstefan
      Bom dia, eu conseguiria fazer um controle das teclas F12 e Ctrl + shift + I com js? 
    • By ConteudoAnimal.com.br
      Olá Pessoal,

      Alguem pode me ajudar 

      Fiz um formulário em https://www.conteudoanimal.com.br/noticias/assessoria.php que manda os dados para https://www.conteudoanimal.com.br/noticias/adicionar_noticia.php
      E qualquer acentuação é trocada por ?

      Código das páginas:

      Assessoria.php
       
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
      <html>
      <head>
      <title>Assessoria de Imprensa - Inclusão de Notícias</title>
      <script type="text/javascript" src="../ckeditor/ckeditor.js"></script>
      <script src="sample.js" type="text/javascript"></script>
      <link href="sample.css" rel="stylesheet" type="text/css" />
      <link href="../css/estilos.css" rel="stylesheet" type="text/css" />
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
      <body>
      <div id="geral"><div id="regiao_1"><ul><li id="link_mail"><a href="https://www.conteudoanimal.com.br/faleconosco/inclusao.php">Fale Conosco</a></li><li id="link_faq"><a href="https://www.conteudoanimal.com.br/faq.php">FAQ </a></li><li id="link_indique"><a href="https://www.conteudoanimal.com.br/marketing/banner.php">Anuncie</a></li><li id="link_sitemap"><a href="https://www.conteudoanimal.com.br/marketing/website.php">Como Hospedar</a></li></ul>    </div>
      <div id="regiao_2"><div id="menu_principal"><ul><li id="top"><a href="https://www.conteudoanimal.com.br/default.php" title="P&aacute;gina Inicial">CONTEÚDO ANIMAL</a></li><li id="link_racas"><a href="https://www.conteudoanimal.com.br/info/info.php" title="Ra&ccedil;as &amp; Esp&eacute;cies">RA&Ccedil;AS &amp; ESP&Eacute;CIES</a></li><li id="link_shopping"><a href="https://www.conteudoanimal.com.br/anuncios.php" title="Anúncios" target="new" rel="nofollow">Anúncios</a></li><li id="link_colunas"><a href="https://www.conteudoanimal.com.br/colunas/colunas.php" title="Ver Colunas"> COLUNAS</a></li><li id="link_esportes"><a href="https://www.conteudoanimal.com.br/info/esportes.php" title="Esportes">ESPORTES</a></li><li id="link_noticias"><a href="https://www.conteudoanimal.com.br/noticias/todas.php" title="Not&iacute;cias">NOT&Iacute;CIAS</a></li><li id="bottom"></li></ul></div>
      <div id="box_banner_topo"></div><!-- Fim código do banner topo -->
      <div id="box_pesquisa">
      <!-- SiteSearch Google -->
      <p>Digite aqui a palavra-chave.</p><form action=" https://www.conteudoanimal.com.br/busca.php" id="Form1"><input type="hidden" name="domains" value="www.conteudoanimal.com"><input type="text" name="q" size="20" maxlength="255" id="campo_pesquisa" value=""><br/><input name="sitesearch" type="radio" class="radio" value="" />Web<input name="sitesearch" type="radio" class="radio" value="www.conteudoanimal.com" checked="checked">Conte&uacute;do Animal<input class="bt_pesquisa" type="submit" name="sa" value="Pesquisar">
      <!-- Campos hidden --><input type="hidden" name="cx" value="partner-pub-7589629526688718:vocfdf-73ai" /><input type="hidden" name="forid" value="1" /><input type="hidden" name="ie" value="ISO-8859-1" /><input type="hidden" name="oe" value="ISO-8859-1" /><input type="hidden" name="cof" value="FORID:11" /><input type="hidden" name="hl" value="pt" /></form>
      <script type="text/javascript" src="https://www.google.com.br/coop/cse/brand?form=cse-search-box&lang=pt"></script>
      <!-- SiteSearch Google --></div></div>
      <div id="regiao_7">    
      <!-- Banner do rodapé - 728x15 -->
      </div>
      <div id="regiao_8"> <div id="lado_esquerdo"><ul id="menu_racas"><li id="link_caes"><a href="https://www.conteudoanimal.com.br/info/caes/caes.php">C&atilde;es</a></li><li id="link_gatos"><a href="https://www.conteudoanimal.com.br/info/gatos/gatos.php">Gatos</a></li><li id="link_cavalos"><a href="https://www.conteudoanimal.com.br/info/cavalos/cavalos.php">Cavalos</a></li><li id="link_peixes"><a href="https://www.conteudoanimal.com.br/info/peixes/peixes.php">Peixes</a></li><li id="link_passaros"><a href="https://www.conteudoanimal.com.br/info/passaros/passaros.php">P&aacute;ssaros</a></li><li id="link_outros"><a href="https://www.conteudoanimal.com.br/info/outros/outros.php">Outros</a></li></ul>
      <span class="destaque"><p> </p></span>
      </div>
      <div id="lado_direito">     
      <a href="https://www.conteudoanimal.com.br/"> Home Page </a> &gt; <a href="https://www.conteudoanimal.com.br/noticias/todas.php">Notícias</a> &gt; <a href="#">Assessoria de Notícias</a></p>
      <!-- This <div> holds alert messages to be display in the sample page. -->
      <div id="alerts">
      <noscript>
      <p>
      <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
      support, like yours, you should still see the contents (HTML data) and you should
      be able to edit it normally, without a rich editor interface.
      </p>
      </noscript>
      </div>
      </p>
      <!-- Área para os textos - -->        
      <h1>Inclusão de Notícias</h1>
      <!-- Use sempre H5 para o título dos textos -->    
      <p><form action="https://www.conteudoanimal.com.br/noticias/adicionar_noticia.php" method="post">
      <table cellpadding="0" cellspacing="0" border="0" bgcolor="#BEBEBE" style="width: 405px">
      <tr bgcolor="#DEDEDE">
      <td align="right" bgcolor="#DEDEDE" class="style1"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Manchete: * </font></b></td>
      <td align="center" width="347"><input value="Título" type="text" id="manchete" name="manchete" size="30" style="font-family: Verdana; font-size: 8 pt; border-style: solid; border-width: 1; width: 246px;" />
      </td></tr>
      <tr bgcolor="#DEDEDE">
      <td align="right" bgcolor="#DEDEDE" class="style1"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Fonte:*</font></b></td>
      <td align="center" width="347"><input id="fonte" value="fonte da notícia" type="text" name="fonte" size="30" style="font-family: Verdana; font-size: 8 pt; border-style: solid; border-width: 1; width: 253px;" />
      </td></tr>
      <tr bgcolor="#DEDEDE">
      <td align="right" bgcolor="#DEDEDE" valign="top" class="style1"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Texto da Notícia* :</font></b></td>
      <td align="center" width="347">
      <textarea cols="80" id="noticia" name="noticia" rows="20" onclick="return Textarea1_onclick()">Copie o texto da notícia direto neste espaço.</textarea>
      <script>
           // This call can be placed at any point after the
           // <textarea>, or inside a <head><script> in a
           // window.onload event handler.
           // Replace the <textarea id="editor"> with an CKEditor
           // instance, using default configurations.
           CKEDITOR.replace('noticia', {
           filebrowserBrowseUrl: '/externo',
           filebrowserUploadUrl: '/externo',
           filebrowserImageBrowseUrl: '/externo',
           filebrowserImageUploadUrl: '/externo',
           filebrowserWindowWidth: 800,
           filebrowserWindowHeight: 800
      });
      function Textarea1_onclick() {
      }
      </script>
      </td>
      </tr>
      <tr bgcolor="#DEDEDE">
      <td align="center" bgcolor="#DEDEDE" colspan="2"><input type="submit" value="Enviar" name="B1" style="font-family: Verdana; font-size: 8 pt; font-weight: bold; background-color: #FFCC00; border-style: solid; border-width: 1" />
      </tr>
      </table>
      </form>
      </p>
      <p align="center">confiras as últimas 5 notícias publicadas<p>
      <?php
       include '/conexao.php';
       $query = "Select id, manchete from noticias order by id desc limit 0,5";
       $result = mysqli_query($connection,$query) or die ("Could not execute query");
       
       while($row = mysqli_fetch_array($result)) {
       extract($row);
       $rs .= '<h4><img src="/images/bullet.gif" alt="bullet"><a href="/noticias/ver.php?id='.$id.'">'.$manchete.'</a></h4>';
       }
       echo $rs;
      ?>
      <br><br>Você vai adicionar um texto pela primeira vez ? Se SIM . Então veja video tutorial abaixo <br> 
      <iframe width="560" height="315" src="//www.youtube.com/embed/TJ6NH4UGsCs" frameborder="0" allowfullscreen></iframe>
      <!-- FIM da área para os textos --> 
      </div>        
      </div>
      <?php include '/bottom.php'; ?>
      </div>
      </body>
      </html>
       
      Adicionarnoticia.php:

       
    • By maurohpg
      Olá, pesquisei uma forma de fazer um formulario desta forma, mas não achei nada, tenho um formulário de pedidos, que após às 17h eu tenho que desabilitar o botão de enviar e uma mensagem ficar visível, "nosso horário de atendimento é até às 17h", um exemplo apenas.

      Já vi algumas coisas parecidas mais exatamente isso não consegui nem um exemplo.
    • By Pablo Bernardo
      Gostaria de fazer um botão que levasse o usuário não pra uma página da web, e sim para um aplicativo de seu computador.
      No caso iniciasse o aplicativo do computador ai clicar no botão.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.