Build URL with form data

[soycharliente]

Well old friends. We meet again. It's been over 2 years since my last post. Things look a little different around here... in a good way. Life has really crazy with work, school, home, etc. and I've finally gotten some time to work on a silly project in my free time. And of course I can't remember for the life of me how to write PHP code. Ha!

 

I have an HTML table of (tabular) data displaying very well on a page. I would like to add some filters so that you can filter out data based on whatever criteria I decide is worth filtering on. I would like to apply the filters via URL parameters so I can hot-link to pre-filtered tables instead of forcing them to load the entire table and then filter every time.

 

I'm having a bit of trouble making the leap from building the form with all the options (three <select multiple> elements each with a various number of options) to getting the choices into the URL.

 

The only thing I've figured so far is to POST the data to a form handler page and then redirect back to the table page with some URL parameters. I would build the URL on the form handler page and run the query that generates the table based on what I can GET from the URL. I wasn't sure if this was the best way to go about it or not.

 

Thanks for any tips/advice.

[requinix]

Why not just change the form to use method=get?

[soycharliente]

I started out trying to do that, but when I click submit the URL comes back like this: index.php?Apply=Apply. "Apply" is the name and value of my submit button. Maybe that means my form is malformed. I took out all the options so it wasn't as long, but here's my form if you think it might help:

<form class="form-horizontal" action="index.php" method="get">
	<div class="container-fluid">
		<div class="row">
			<div class="col-xs-12 col-md-3">
				<div class="form-group">
					<label for="selectDivision" class="control-label sr-only">Division</label>
					<select id="selectDivision" class="form-control" multiple>
						<option value="25-29">25-29</option>
						<option value="30-34">30-34</option>
						<option value="35-39">35-39</option>
					</select>
				</div>
			</div>
			<div class="col-xs-12 col-md-3">
				<div class="form-group">
					<label for="selectGender" class="control-label sr-only">Gender</label>
					<select id="selectGender" class="form-control" multiple>
						<option value="M">M</option>
						<option value="F">F</option>
					</select>
				</div>
			</div>
			<div class="col-xs-12 col-md-3">
				<div class="form-group">
					<label for="selectCountry" class="control-label sr-only">Country</label>
					<select id="selectCountry" class="form-control" multiple>
						<option value="CAN">CAN</option>
						<option value="USA">USA</option>
					</select>
				</div>
			</div>
			<div class="col-xs-12 col-md-3">
				<div class="form-group">
					<input type="submit" class="btn btn-default btn-block" name="Apply" value="Apply"/>
				</div>
			</div>
		</div>
	</div>
</form>

Edited March 16, 2015 by charlieholder

[Barand]

You need to provide names for the form <selects> eg

 

<select id="selectCountry" name="selectCountry" class="form-control" multiple>

[soycharliente]

Grrrrrr...

 

And what's the best method for consolidating something like

selectDivision=18-24&selectDivision=25-29&selectDivision=30-34

into something like

selectDivision=18-24,25-29,30-34

?

[mac_gyver]

for your multiple attribute to be able to send the multiple selections, the name needs to be an array - name ='selectDivision[]'

[soycharliente]

for your multiple attribute to be able to send the multiple selections, the name needs to be an array - name ='selectDivision[]'

 

That color-coding is clutch. I've never thought about highlighting the needed addition in that way. Thanks!