take HTML inputs and build a query string

Question

I need to build a form takes the user inputs and builds a query string, and then loads that URL

For example

<form id="form1" name="form1" method="post" action="">
  <p>
    <label>INPUT1
      <input type="text" name="INPUT1" id="INPUT1" />
    </label>
  </p>
  <p>
    <label>INPUT2
      <input type="text" name="INPUT2" id="INPUT2" />
    </label>    
  </p>
  <p>
    <label>
      <input type="submit" name="loadURL" id="loadURL" value="Submit" />
    </label>
    <br />
  </p>
</form>

http://website.com&model=<INPUT1>&cathegory=<INPUT2>

Is there a way to do this using just HTML, or does this need javascript? Any pointers on the easiest way to do this is appreciated.

Answer 1

Just set the action="/some/form/processor" and the method="get" (instead of post) and the fields in the form will be sent as the query string.

To get your example of http://website.com&model=<INPUT1>&cathegory=<INPUT2> you would have

<form id="form1" name="form1" method="get" action="http://website.com">
<!-- or, more simply, since the website _is_ website.com -->
<form id="form1" name="form1" method="get" action="/">

The input names are used as the parameters, so your complete form would be

<form id="form1" name="form1" method="get" action="/">
  <p>
    <label>INPUT1
      <input type="text" name="model" id="INPUT1" />
    </label>
  </p>
  <p>
    <label>INPUT2
      <input type="text" name="cathegory" id="INPUT2" />
    </label>    
  </p>
  <p>
    <label>
      <input type="submit" name="loadURL" id="loadURL" value="Submit" />
    </label>
    <br />
  </p>
</form>