CODEWITHSUNDEEP
formshttpurlcheckboxquery-string
user1125394
user1125394

Reputation:

html forms: checkboxes group for pretty url query

I have the following search form:
each field is a checkbox, so each group is multiselectable

<form action="search">

    <fieldset id="type">
        <legend>Offer type:</legend>
        <input type="checkbox" name="full" id="checkbox-01" /> <label for="checkbox-01">Full Time</label>
        <input type="checkbox" name="part" id="checkbox-02" /> <label for="checkbox-02">Part time</label>
        <input type="checkbox" name="internship" id="checkbox-03" /> <label for="checkbox-03">Internship</label>
        <input type="checkbox" name="other" id="checkbox-04" /> <label for="checkbox-04">Other</label>

    </fieldset>

    <fieldset id="jobs">
        <legend>Jobs:</legend>
        <input type="checkbox" name="plumber" id="checkbox-1" /> <label for="checkbox-1">Plumber</label>
        <input type="checkbox" name="baker" id="checkbox-2" /> <label for="checkbox-2">Baker</label>
        <input type="checkbox" name="tester" id="checkbox-3" /> <label for="checkbox-3">Tester</label>
        <input type="checkbox" name="engineer" id="checkbox-4" /> <label for="checkbox-4">Engineer</label>

    </fieldset>

    <input type="submit" value="Search" />
</form>

but instead of having

http://...../search?full=on&other=on&tester=on&engineer=on

as url query-string

I would like to have: 

http://...../search?type=full+other&jobs=tester+engineer

that's more readable and useful to parse server-side

Of course I can't put the same name attribute for checkboxes, is there a trick I could do, or the only solution is to do javascript at button click?

thx

Upvotes: 1

Views: 1736

Answers (2)

user1125394
user1125394

Reputation:

used the following trick:

<input type="checkbox" name="cat[]" />

Upvotes: 3

Clot
Clot

Reputation: 139

you could use a onSubmit() method parse the form properties and then change the location on the document.

But if you could, think in using post submit type to hide the query string instead of get, if is an aesthetic problem.

Upvotes: 2

Related Questions