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 manoaj
      Boa noite pessoal!
      Alguém ai entente dos checkouts do Mercado Pago pra me explicar como eu obtenho os dados da preferência criada através da url disponível na API
      https://api.mercadopago.com/checkout/preferences/:id?access_token=ACCESS_TOKEN_ENV  
    • By Richard.Ribeiro
      Boa tarde a todos, Uma ajuda Por favor, alguém pode me explicar porque sempre que eu digito no" input name=vsat" e clico em buscar a DIV do " select id=rightValues" SOME
      alguem poderia ajudar? o erro está no  PHP ou JS
      desde já agradeço a atenção.
      <style media="screen">
      SELECT, INPUT[type="text"] {
        width:500px;
        box-sizing: border-box;
      }
      SELECT, INPUT[type="button"] {
        font-size: 20px;
      }
      SECTION {
        padding: 8px;
        background-color: #f0f0f0;
        overflow: auto;
      }
      SECTION > DIV {
        float: left;
        padding: 30px;
      }
      SECTION > DIV + DIV {
        width: 200px;
        text-align: center;
      }
      </style>
      <section class="container">
      <form  method="post">
        <?php
        if (isset($_POST['buscar'])) {
            $id_gmm = $_POST['gmm'];
          }elseif (isset($_POST['buscar2'])){
                $vsat = $_POST['vsat'];
            }
            ?>
      <h2><i class="fa fa-link"></i> Vincular Componentes a VSAT</h2>
      <h4><i class="fa fa-arrow-down"></i> Itens da GMM</h4>
          <div>
            <input type="text" name="gmm"  placeholder="Digite o N° da GMM">
            <input type="submit" name="buscar" value="buscar"><br>
              <select id="leftValues" size="5" multiple>
                <?php
                $consultaGmm = ConexaoBD::conectar()->prepare("SELECT tipo_material_id FROM itens_fornecidos WHERE gmm_id = $id_gmm ");
                $consultaGmm->execute();
                $consultaGmm = $consultaGmm->fetchAll();
                foreach ($consultaGmm as $key => $value) {
               ?>
              <option value="<?php echo  $value['tipo_material_id'];?>">
               <?php echo $value['tipo_material_id']; ?>
               </option>
            <?php }?>
            </select>
          </div>
          <div>
              <input type="button" id="btnLeft" value="&lt;&lt;" />
              <br>  <br>
              <input type="button" id="btnRight" value="&gt;&gt;" />
          </div>
          <div>
            <label for="">VSAT</label>
            <input type="text" name="vsat"  placeholder="Digite o ID/IDE da VSAT">
            <input type="submit" name="buscar2" value="buscar"><br>
              <select id="rightValues" size="4" multiple>
                <?php
                $consultaVsat = ConexaoBD::conectar()->prepare("SELECT estoque_material_id FROM componentes_instalados WHERE estoque_material_id = $vsat ");
                $consultaVsat->execute();
                $consultaVsat = $consultaVsat->fetchAll();
                foreach ($consultaVsat as $key => $valueVsat) {
               ?>
               <option value="<?php echo $valueVsat['estoque_material_id'];?>">
                 <?php echo $valueVsat['estoque_material_id']; ?>
               </option>
             <?php } ?>
              </select>
          </div>
      </form>
      </section>
      <script  src="<?php echo INCLUDE_PATH_PAINEL ?>js/jquery-3.4.1.min.js"></script>
      <script src="<?php echo INCLUDE_PATH_PAINEL ?>js/main.js"></script>
      <script type="text/javascript">
      $("#btnLeft").click(function () {
          var selectedItem = $("#rightValues option:selected");
          $("#leftValues").append(selectedItem);
      });
      $("#btnRight").click(function () {
          var selectedItem = $("#leftValues option:selected");
          $("#rightValues").append(selectedItem);
      });
       
      </script>
      <?php die(); ?>
       
       
    • By sronze
      Ola estou com um problema em JavaScript
      O objetivo e digitar um ID/Nome em um input e ele buscar em um arquivo XML fazendo autocomplete e preencher outros dois inputs com os atributos associado ao ID/Nome da base XML.
       
      GIF de exemplo, obs(exatamente oque pretendo fazer): http://blog-media.chromaticsites.com.s3.amazonaws.com/google-places-autocomplete-3/autocomplete-error.gif
       
      Link do XML: https://www.w3schools.com/js/cd_catalog.xm
       
      Segue meu código:
      <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> Nome:<input id="idInput"> UF:<input id="idInput02"> Ano:<input id="idInput03"> <script> var ValorXML1 = []; $(document).on('keyup' , '#idInput' ,function(){ var keyvalue = $("#idInput").val(); var xhttp; xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { ValorXML1 = []; CaregarXML(this , keyvalue); } }; xhttp.open("GET", "https://www.w3schools.com/js/cd_catalog.xml", true); xhttp.send(); }); function CaregarXML(xml , key) { var x, i, xmlDoc , key; xmlDoc = xml.responseXML; x = xmlDoc.getElementsByTagName("TITLE"); var cont = 0; for (i = 0; i < x.length; i++) { var valor = x[i].childNodes[0].nodeValue.trim(); var pattern = valor.substring(0 , key.length); if(key.toUpperCase() == pattern.toUpperCase() && cont < 5){ ValorXML1.push(valor); cont++; } } $("#idInput").autocomplete({ source: ValorXML1 }); } $( function() { $( "#idInput" ).autocomplete({ source:ValorXML1 }); }); </script>  
    • By kamaii
      Oi, sou novo nisso de programação e sabe criei um servidor ftp para guardar meus arquivos html, php e js
      mas quando executo php n vai só aparece o codigo e comandos que estão no arquivo 
      e tipo n sei se precisa instalar algo como uma linguagem ou biblioteca no pc
    • By thgsousa312
      uma função que recebe uma frase e uma palavra antiga e uma palavra nova. A função deve retornar uma string contendo a frase original, mas com a última ocorrência da palavra antiga substituída pela palavra nova. A entrada e saída de dados deve ser feita no programa principal. Exemplo:  
      Frase: “Quem parte e reparte fica com a maior parte”
      Palavra antiga: “parte”  Palavra nova: “parcela”
      Resultado a ser impresso no programa principal: “Quem parte e reparte fica com a maior parcela”
       
      function trocarNome(){
              
          var frase = document.getElementById("frase").value;
          var strAntiga = document.getElementById("strAntiga").value;
          var strNova = document.getElementById("strNova").value;
          //frase = frase.split(" ");
          var a = frase.lastIndexOf(strAntiga);
          var fras2 = frase.lastIndexOf(strAntiga).replace(strAntiga,strNova);
          document.getElementById("demo").innerHTML = "Certo";
      }
×

Important Information

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