-2

Estou utilizando um form para disparar uma requisição GET para uma endpoint meu sendo que tenho que usar um <button> ao invés da tag <a> para links porquê o estilo CSS foi feito apenas para a tag <button>.

Veja:

<form action="/troca" method="get">
 <button class="v-btn v-bg-dark">NOVA TROCA</button>
</form>

No entanto, sempre que clico no botão ele dispara a URL e coloca um ponto de interrogação "?" no final da URL, assim:

http://localhost:1234/troca?

Portanto, eu gostaria de saber como remover este ponto de interrogação da URL deixando ela assim:

http://localhost:1234/troca
10
  • Mas como você esta submetendo sendo que o botão não é "submit"? Commented 20/01/2019 às 20:36
  • 2
    Troca o method por "post".
    – Sam
    Commented 20/01/2019 às 20:37
  • @Sam o post vai acessar outro endpoint o get eh p obter o formulário.
    – gato
    Commented 20/01/2019 às 20:38
  • 3
    Acredito que há um problema de semântica, pois está fazendo um link desfarçado, não da pra simplesmente colocar o botão dentro da tag <a>?
    – Costamilam
    Commented 20/01/2019 às 21:04
  • 1
    @gato, não use o formulário. Use um link direto para a página de troca. Commented 20/01/2019 às 22:27

1 Resposta 1

5

Comentaram, mas ninguém respondeu.

Você está utilizando um formulário para criar a navegação entre páginas. Quando você submete um formulário GET, espera-se que você envie parâmetros para gerar uma consulta que definirá o resultado. Por exemplo, um campo de busca no site enviará o parâmetro ?q=Termo para fazer a pesquisa com base no termo. Seu formulário não possui campos, então não há parâmetros para enviar à outra página e, portanto, a query string ficará vazia, mas haverá a presença do ? pois é uma requisição gerada a partir de uma submissão GET de um formulário.

Mas como comentado, você tentou criar âncoras entre páginas com um formulário. Âncoras são criadas com... bom, âncoras. E no HTML, âncoras são <a>. Regra mais básica é: se é navegação, utilize âncoras; se é uma ação interna da página utilize botões.

Ah, mas eu quero que tenha a aparência de um botão...

Então defina no seu CSS para que sua âncora se pareça com um botão. CSS é exatamente para isso.

.v-btn {
  background-color: #f8f9fa;
  display: inline-block;
  padding: 8px 17px;
  text-align: center;
  font-size: 10pt;
  letter-spacing: .1rem;
  text-decoration: none;
  cursor: pointer;
  vertical-align: middle;
  white-space: nowrap;
  outline: none;
  border: none;
  height: auto !important;
  -webkit-transition: .3s color, .3s background-color;
  -o-transition: .3s color, .3s background-color;
  transition: .3s color, .3s background-color;
  position: relative;
  z-index: 10; }

.v-btn:hover, .v-btn:focus, .v-btn.v-active {
  position: relative;
  z-index: 11; }

.v-btn:disabled {
  cursor: default;
  opacity: .4; }

.v-btn, .v-btn-group {
  -webkit-border-radius: 4px;
          border-radius: 4px;
  color: #bbb; }
  
/* Hover */
.v-btn.v-bg-primary:hover,
.v-btn.v-bg-primary:focus,
.v-btn.v-bg-primary.v-active,
.v-btn-group.v-bg-primary > .v-btn:hover,
.v-btn-group.v-bg-primary > .v-btn:focus,
.v-btn-group.v-bg-primary > .v-btn.v-active {
  background-color: #025ab9; }
  
.v-bg-primary {
  background-color: #007bff;
  color: #fff; }
<link href="https://raw.githubusercontent.com/brcontainer/victory.css/master/dist/victory.min.css" rel="stylesheet"/>

<a class="v-btn v-bg-primary">Pressione-me!</a>

Código CSS retirado do arquivo fonte presente no repositório oficial.

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 .