Remove query string “?” in HTML form method GET

问题

I have a simple search form of Google Images that open in a new window. When I want to change the form parameters to Unsplash (that don't use query strings on their URL search) the form continue sending query string ;(

HTML

<input type="radio" id="google" name="image" onclick="googleImages();" checked/>
<label for="google">Google Images</label>

<input type="radio" id="unsplash" name="image" onclick="unsplash();"/>
<label for="unsplash">Unsplash</label>

<form id="form" method="GET" action="https://www.google.com/search?q=">
    <input id="input" type="text" name="q" value="" required>
    <input type="submit" value="Search" onclick="this.form.target='_blank';">
    <input id="helper" type="hidden" name="tbm" value="isch">
</form>

var
  form = document.getElementById("form"),
  input = document.getElementById("input"),
  helper = document.getElementById("helper");

function googleImages() {
  form.action="https://www.google.com/search?q=";
  input.name="q";
  helper.name="tbm";
  helper.value="isch";
}
function unsplash() {
  form.action="https://unsplash.com/search/photos/";
  input.name="";
  helper.name="";
  helper.value="";
}

How create a function that remove query string from output URL? (and set again parameters when a radio option need them)

See code working here: http://jsbin.com/qitadepoxu/1/edit?html,js,output

回答1:

So if you are not sending any parameters to unsplash.com don't use form submit. Instead use javascript redirect inside unsplash() function.

window.location.href = "https://unsplash.com/search/photos/";

回答2:

You've clarified in a comment that when calling Unsplash, you need to pass the search string as part of the URL rather than as a query string parameter, like this: https://unsplash.com/search/photos/lion

To do that with your current setup, you'll need to do two things:

Add the string to the URL, and
Disable the form fields. Disabled form fields aren't sent with the form at all; link to spec. (Alternately, of course, you could remove them, but if you change your form at some point so that it has target="_blank" or similar, removing them would complicate allowing an Unsplash search followed by a Google Images search.)

So something like this:

function unsplash() {
  // #1
  form.action="https://unsplash.com/search/photos/" + encodeURIComponent(input.value);
  // #2
  input.disabled = true;
  helper.disabled = true;
  helper.disabled = true;
}

Note the use of encodeURIComponent.

And of course, if you did update the page so that it opened a new window instead of replacing the current window, you'd update your googleImages function to set disabled to false on those inputs (since it will be left true by the unsplash function). You don't have to do that if you're replacing the page, though.

来源：https://stackoverflow.com/questions/51003560/remove-query-string-in-html-form-method-get

标签

javascript

forms

query-string