0

Boa Tarde Fiz um filtro normal, porém para eu conseguir formatar o filtro de uma forma mais efetiva, quero tirar o Botão da Div, porém quando faço isso o botão para de funcionar por não estar junto com o formulario

Como faço para que o botão continue funcionando? Segue os codigos

 <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>

Aproveitando a pergunta, se puderem me indicar a melhor forma de eu fazer o chamado dos dados que preciso, qual a formula posso usar nos option?

8
  • O que é que deixa de funcionar? O seu script? Se for o script, edite sua pergunta e inclua também o seu JS
    – hugocsl
    Commented 15/03/2019 às 18:55
  • No caso eu não deixei o formulário totalmente funcional, pois preciso pegar as informações junto a plataforma que utilizo (tray) de quais comandos preciso utilizar para chamar os dados certos.... assim que tiver as informações vou colocar as chamadas certas... Por enquanto estou fazendo a "carcaça" do formulário, e no caso preciso que o botão funciona sem estar dentro do formulário, portanto no momento não possui o JS e nem precisa pois a plataforma faz esse trabalho e só preciso das chamadas Commented 15/03/2019 às 19:31
  • Mas funcione fazendo o que? O que não está funcionando?
    – hugocsl
    Commented 15/03/2019 às 19:35
  • Funcione filtrando com as opções selecionadas, 1 ou mais seleções Commented 15/03/2019 às 19:38
  • Ou preciso de um JS para fazer essa função? Commented 15/03/2019 às 20:24

1 Resposta 1

0

Olá, o problema é que o HTML está mal formatado de forma geral. Tente seguir padrões não misturando HTML com CSS e metatags sempre na head.

O botão precisa, sempre, estar contido no ; ele não funcionava pois estava fora. Abaixo seu código com o botão dentro do formulário, permitindo o evento de submit.

Espero que ajude

<html>
<head>
<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>
</head>
<body>
<form action="#" id="form">
<div id = "filtro">
<h4 style="text-align: center;">Personalize o seu Kit de Segurança</h4><br><br>
<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>
</div>

 <button class="kd-filter-button" id="button1">Ver resultados</button>
 </form>
 </body>
 </html>

1
  • 1
    A sim, sei que ele não estava funcionando por estar fora, mas precisaria que ele funcionasse fora mesmo, pois quero personalizar o formulário de uma forma que o Botão acaba atrapalhando... Entende? Se não me engano é possível fazer com a tag <script> mas não entendo dela o bastante para conseguir desenvolver E esta misturado com CSS porque como trabalho com a Tray depois de terminar tudo eu vou dividir em arquivos e fazer as chamadas... mas no momento o importante é ser funcional Commented 15/03/2019 às 19:28

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 .