HTML form action : url format-CodePudding

I have a form that sends the input

diff=easy&know=high&lang=francais (example)

When I set form action to <form action="https://adressedetest.tumblr.com/tagged/">

The forms successfully sends you to the address https://adressedetest.tumblr.com/tagged/?diff=easy&know=high&lang=francais

How do I format the output of the code so that the output diff=easy&know=high&lang=francais becomes the output easy_high_francais ? I know oninput="diff.value_know.value_lang.value" formats it that way but it doesn't make the form send you on https://adressedetest.tumblr.com/tagged/?easy_high_francais, it's still the previous adress.

How do I make the code send you to https://adressedetest.tumblr.com/tagged/easy_high_francais instead of https://adressedetest.tumblr.com/tagged&easy_high_francais (nor https://adressedetest.tumblr.com/tagged/&easy_high_francais) ? I can't use the '&' like that because tumblr always then sends me 404.

Here is a version of the code I wrote, without its distracting visual formatting :

<!DOCTYPE html>
<html>
<body>
<div>
  <form action="https://adressedetest.tumblr.com/tagged/" oninput="diff.value_know.value_lang.value">
    <label for="diff">Difficulty</label>
    <select id="diff" name="diff">
      <option value="none">None</option>
      <option value="easy">Easy</option>
      <option value="medium">Medium</option>
      <option value="hard">Hard</option>
    </select>

    <label for="know">Knowledge</label>
    <select id="know" name="know">
      <option value="none">None</option>
      <option value="low">Low</option>
      <option value="medium">Medium</option>
      <option value="high">High</option>
    </select>

    
    <label for="lang">Language</label>
    <select id="lang" name="lang">
      <option value="francais">Français</option>
      <option value="english">English</option>
      <option value="russian">Русский</option>
    </select>
  
    <input type="submit" value="Submit">
  </form>
</div>

</body>
</html>

CodePudding user response：

You can do that using a bit of javascript.

What I do is extract the parameters values, join them with your desired _ character, and then re-construct a URL.

Hope it helps, otherwise get back to me in the comments.

// Somehow obtain a ref to the form. In this case it's the
// first and only one.
// (If you don't know what I'm talking about, you probably want
// to give the form an id and use `document.getElementById`)
const form = document.getElementsByTagName("form")[0];

form.addEventListener("submit", submitted);

function submitted(e) {
  // Prevent the default request
  e.preventDefault();
  
  const data = new FormData(form);

  const custom_path = Array.from(data)
    // You might want to sort the values here first
    .map(([_, value]) => value)
    .join("_");
  
  const url = new URL(`https://adressedetest.tumblr.com/tagged/${custom_path}`);
  
  // Send your custom request here
  console.log(String(url));
}

<!DOCTYPE html>
<html>

<body>
  <div>
    <form action="">
      <label for="diff">Difficulty</label>
      <select id="diff" name="diff">
        <option value="none">None</option>
        <option value="easy">Easy</option>
        <option value="medium">Medium</option>
        <option value="hard">Hard</option>
      </select>

      <label for="know">Knowledge</label>
      <select id="know" name="know">
        <option value="none">None</option>
        <option value="low">Low</option>
        <option value="medium">Medium</option>
        <option value="high">High</option>
      </select>


      <label for="lang">Language</label>
      <select id="lang" name="lang">
        <option value="francais">Français</option>
        <option value="english">English</option>
        <option value="russian">Русский</option>
      </select>

      <input type="submit" value="Submit">
    </form>
  </div>

</body>

</html>

CodePudding user response：

First of all, why would you want to get rid of the "?" character ?

Maybe you should read about this : https://www.semrush.com/blog/url-parameters/

" ? " character identify url portion that contains the parameter, which are separated by " & " character. So this is just normal behaviour.