Question

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

Answer 1

used the following trick:

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