onsubmit=return fals Problemas no Formulario ao aplicar onsubmit="return false"

[bruno SALVIATI 0]

Olá, eu criei uma barra de pesquisa no meu site, que ela tem 3 etapas  (Categorias| input para o texto | buscar ) 
todos estao dentro de um form com metodo post , e dentro dele tem outro form para o botao buscar, eles estao todos alinhados, o problema é que  quando eu clico com mouse ou o touch no categorias ele da refresh na pagina,  a categoria tem um dropdown que quando o mouse passa por cima ela mostra a lista, porem no touch precisa ser clicado entao eu vi aqui no forum que para resolver o submit de um botao se usa onsubmit="return false"  , porem quando adiciono isso no form obviamente todo o conteudo de dentro recebe esta condição , porem eu preciso que apenas o botao que abre a categoria nao de submit, mas o imput e o buscar tem que dar se nao, nao consigo dar  busca nos itens do site.

 

 

<div class="col-md-6">
                          <div class="list-group">
                            <div class="header-search">
                               <form method="POST" onsubmit="return false">
                                     <div class="dropdown">
                                          <button class="dropbtn"><i class="glyphicon glyphicon-list"></i>  Categorias</button>
                                          <div class="dropdown-content">
                                         <a href="{$PAG_PRODUTOS}">Todos</a> 
                                             
                                          {foreach from=$CATEGORIAS item=C}
                                           <a href=" {$C.cate_link}">{$C.cate_nome}</a> 
                                          {/foreach}
                                          
                                        

                                    </div>
                                   </div>
                                   <form method="POST">
                                  <input name="txt_buscar" class="input" placeholder="Digite para buscar">
                                  <button class="search-btn">Buscar</button>
                                  </form>
                                </form>

 

 

 

em vermelho é onde se encontra o codigo  adicionado para tirar o submit mas nao sei como fazer ele voltar ao normal no botao voltar,.

PS nao posso colocar o botao voltar fora do formulario pois seles ficam visualmente encaixados um no outro.
PS 2 nao funciona se eu tento adicionar este onsubimit direto no button somente no form.

[Omar~ 87]

9 horas atrás, bruno SALVIATI disse:

dentro de um form com metodo post , e dentro dele tem outro form

Primeiramente isso é um erro de estrutura html.

Formulários não devem abrigar outros formulários.

Ou seja a tag form não pode abrigar outra tag form em seu contexto.

 

 

Exemplo:

<form> <!-- A tag form é aberta -->
    <form> <!-- A form tag é aberta mão não é finalizada -->
    </form> <!-- Matei a abertura da primeita tag form -->
</form> <!-- Não existe a abertura da tag form para esse fechamento -->

https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/form

 

 

Agora ao post....

Qual a necessidade de utilizar 2 formulários, sendo que você busca dados somente em 1?

 

9 horas atrás, bruno SALVIATI disse:

PS nao posso colocar o botao voltar fora do formulario pois seles ficam visualmente encaixados um no outro.

Isso se resolve facilmente usando CSS

 

9 horas atrás, bruno SALVIATI disse:

PS 2 nao funciona se eu tento adicionar este onsubimit direto no button somente no form.

Provavelmente pelo fato de colocar uma tag form dentro de outra.

Mesmo que o browser "seja bonzinho" e não comprometa o restante da estrutura do html ele não sabe o que fazer nessas condições.

 

 

Se você mostrar uma print de como deseja os elementos seja mais fácil apresentar um exemplo.

Mas ao meu ver você tem uma lista que fica ao lado do form que poderia simplesmente alinhar-os com display ou float.

De qualquer forma mostre um exemplo para termos noção melhor da situação.

 

 

[israelpereira96 5]

a syntax HTML está incorreta.

Se você não definir o tipo do botão  dentro de um formulário o navegador interpreta como submit. 

 

<button type="button"></button>

 

<form action="javascript:void(0)" onsubmit="return event.preventDefault()"></form> 

[bruno SALVIATI 0]

eu mudei de form para select e funcionou obrigado desde já