Using dropdown to add/remove search boxes

Using dropdown to add/remove search boxes

I've got a drop down that will have 3 categories in it. I would like to to
have so that when the user chooses a category, the correct number of
search boxes for that category will appear. I then want the text that is
inputted into the search boxes to be saved as a variable in the URL. Here
is what I got
http://jsfiddle.net/2yWzc/1/
HTML:
<form class="list" action="table.php" method="get">
<table>
<tbody>
<tr class="name">
<td>First Name:</td>
<td><input type="text" class="searchBox" name="q1" /></td>
</tr>
<tr class="name">
<td>Last Name:</td>
<td><input type="text" class="searchBox" name="q2" /></td>
</tr>
<tr class="owner">
<td>Owner:</td>
<td><input type="text" class="searchBox" name="q1" /></td>
</tr>
<tr class="dlp">
<td>Text 1:</td>
<td><input type="text" class="searchBox" name="q1" /></td>
</tr>
<tr class="dlp">
<td>Text 2:</td>
<td><input type="text" class="searchBox" name="q2" /></td>
</tr>
<tr class="dlp">
<td>Text 3:</td>
<td><input type="text" class="searchBox" name="q3" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="SEARCH" /></td>
</tr>
</tbody>
</table>
<br>
<select id="options">
<option value="name">Option 1</option>
<option value="owner">Option 2</option>
<option value="dlp">Option 3</option>
</select>
</form>
JS:
$('#options').change(function() {
if ($(this).val() == 'name') {
$('.name').show();
$('.owner').hide();
$('.dlp').hide();
} else if ($(this).val() == 'owner') {
$('.name').hide();
$('.owner').show();
$('.dlp').hide();
} else if ($(this).val() == 'dlp') {
$('.name').hide();
$('.owner').hide();
$('.dlp').show();
}
});
$(function(){
$('form').bind('change', function () {
var url = $(this).val();
if (url) {
window.location = url;
}
return false;
});
});
This shows the correct number of searchboxes, but it doesn't save the text
in the search boxes in the variables. It also seems like it isn't a good
way to do it (If you know of the proper way, point me in the right
direction. This was the only thing I could do that would work). Before
this, I had 1 search box per category, so my JS code was this
(function($) {
$(function(){
$('form').bind('change', function () {
var url = $(this).val(); // get selected value
if (url) { // require a URL
window.location = url; // redirect
}
return false;
});
});
})(jQuery)&#8203;;
However, I have no idea how to get it to work for multiple search boxes. I
only want variables for the search boxes that are shown to be passed via
URL (again, so maybe this isn't the proper way?).
Can anyone help me out? Thanks