[RESOLVED] Submit via drop-down box?

JerryStephen

I have a page that currently works just fine -- but what I would like to do is improve the 'ease of use' factor...

The page (TEAM_Request_Select.php) consists of the following sections:
- filters -- form with several drop-down boxes and "submit" button

<form method="POST" name="TEAM_RequestFilters" action="TEAM_Request_Select.php" target="_self">

Clicking on the "Refresh Filters" (submit) button basically refreshes the page with the $_POST variables reflecting the current options selected.

selection -- form with filtered list and "submit" button

The idea is that the user selects via the drop-down boxes what to display in the selection section's list, ie:
"Type" options are "All", "Individual", "Organization";
"Status" options are "All", "Open", "Closed - Case", "Closed - Denied" etc.

The user selects Type of "Individual" and Status of "Open" and clicks the submit button ("Refresh Filters") and the lower "selection" section shows only open individual records...

My question is this:
Is there a way to trigger the "submit" functionality using ONLY the drop-down box? I would like the user to change the "Status" to "Open" and immediately see only the open records without having to click the submit button.

I've tried experimenting with the "onchange" and "onclick" options, but I cannot seem to get anything to work since the lower display relies on the values in the various $_POST values...

There is no real code being processed in the "filters" section, it only passes via $_POST the current values of the drop-down boxes to the "selection" section.

I'd appreciate any help and thanks in advance.
Jerry

Krik

I just want to first be clear of how you are using onchange. I assume you are using it to run javascript that submits the form. And what you want is something where the user doesn't see the page reload.

For that you will want to use AJAX. Now some panic here thinking they need to learn a new programing language, but, AJAX is just a javascript technique that can send a http request that is not seen by the user. It then can take the reply form that request and use it to change what is displayed in the page.

JerryStephen

OK., AJAX...

I don't have a clue what that means, but it gives me a place to search for more information.

(And yes, just want to reload the page with the new filter applied).

Thank you for your time!

Jerry

johanafm

ajax is nothing but a (now way old) buzz word acronym launched by some marketing dude. It stands for Asynchronous Javascript and XML, and on the client side directly translates to "XmlHttpRequest".

Server side you deal with it as any regular http get/post request, although you might want to server content using json encoding. Just don't use content-type application/json for it (read: IE sucks - again). Use text/plain, and also make sure you add x-content-type-options header with a value of "nosniff" (read IE sucks - again - again).

cretaceous

Depending how fast you expect "Immediate" to be, you don't have to use AJAX - as long as you don't mind the page redrawing - if I understand what you want

this method will cause screeen flicker/redraw

make sure your drop down submit is in its own form with a javascript 'onChange' action
then add the other variables that you need re-submitted as hidden fields :

JerryStephen

cretaceous -- Thank you for taking the time to respond. Actually, I don't care about the page being visibly redrawn since it IS going to be redrawn with NEW data displayed based on the value of the drop down boxes, so it is obviously being refreshed.

Thank you, also, to Johanafm and Krik for taking the time to respond.

johanafm

The nice thing with ajax is that it allows you to send a request to the web server and use the response to update the current page without a (visible) page reload. Unless the request takes a long time to fullfull, the update will seem instantaneous to the user; i.e. give them the same feel that a regular desktop application would.
But, a simple page reload could look like

<form ...>
	<div>
		<select onchange="this.parentNode.parentNode.submit();">
			<option value="0">Please select...</option>
			<option ...>...</option>
		</select>
	</div>
</form>

this refers to the element where the event originates, in this case the select element. parentNode is the containing element, in this case div (no inline elements are allowed as direct children of form), and its parent node is the form element.

But you may want to wrap your code in a function and change onclick="someFunction(this)", so that you can check that the selected option isn't "Please select..."
Still, you should always perform validation on input data server side as well.

JerryStephen

johanafm:

Thank you! That did the trick!

The thing that frustrates me at times (( and this is one of them )) is that once someone gives me the solution, it looks SO EASY I can't understand why I didn't find it myself!

Much appreciated!
Jerry