How to remove the question mark "?" at the end of the URL of a request?

Asked

Viewed 640 times

-2

I’m using a form to trigger a request GET to an endpoint of mine <button> instead of the tag <a> for links because the CSS style was only made for the tag <button>.

Behold:

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

However, whenever I click the button it triggers the URL and places a question mark "?" at the end of the URL, thus:

http://localhost:1234/troca?

Therefore, I would like to know how to remove this question mark from the URL leaving it so:

http://localhost:1234/troca
html url http-request button

  • But how are you submitting being that the button is not "Submit"?

  • 2

    Exchange the method for "post".

  • @Sam the post will access another endpoint the get eh p get the form.

  • But if it’s just a question mark at the end of the URL, it’s not sending anything.

  • @Wictorchaves standard behavior is already the Submit of a look at.

  • @Sam this msm, eh so to get a resource, but I’d like it to be without the question because I don’t pass any search parameters.

  • @cat, funny, in google Chrome had this behavior, but in firefox it did not work

  • 3

    I believe that there is a problem of semantics, because it is making a defaced link, not to simply put the button inside the tag <a>?

  • @Guilhermecostamilam thank I put the <button> in the <a> tag and the style also kept and removed the ?.

  • 1

    @cat, do not use the form. Use a direct link to the exchange page.

Show 5 more comments

1 answer

5


They commented, but no one answered.

You are using a form to create navigation between pages. When you submit a GET form, you are expected to send parameters to generate a query that will define the result. For example, a search field on the site will send the parameter ?q=Termo to search based on the term. Your form has no fields, so there are no parameters to send to the other page and therefore the query string will be empty, but there will be the presence of ? as it is a request generated from a form GET submission.

But as commented, you tried to create anchors between pages with a form. Anchors are created with... well, anchors. And in HTML, anchors are <a>. Most basic rule is: if it is navigation, use anchors; if it is an internal action of the page use buttons.

Ah, but I want it to look like a button...

Then set it in your CSS so that your anchor looks like a button. CSS is exactly for this.

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

CSS code taken from source file present in the official repository.

Browser other questions tagged html url http-request button

You are not signed in. Login or sign up in order to post.