htmlformshyperlinktumblr

HTML form action : url format


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>


Solution

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