Form options

[pcw]

Hey all,

Does anyone know how to get the value from a form option (dropdown list) and have it post the value without having a submit button?

So that when I choose a value in the option list the page is automatically reloaded with that value?

Cheers!

[php_daemon]

Not really sure if that's what you mean, but:

<form name="f1">
  <select onchange="document.f1.submit()">
    <option value="1">1</option>
    <option value="1">1</option>
  </select>
</form>

[Kravvitz]

What happens when JavaScript support isn't enabled in the user's browser?

I suggest you read these:
You cannot rely on JavaScript being available. Period.
Graded Browser Support
Progressive Enhancement and the Future of Web Design
Accessibility is seldom just up to the interface developer
XMLHttpRequest Usability Guidelines
"This is not another XMLHttpRequest article"

[pcw]

Is there a way to do it without javascript?

I can't get it to work the way I want it to work though.

I have this code:

<form name="categories" id="select-category" method="get" action="index.php">
   <div>
	<label for="category-list">Categories:</label>
	<select id="category-list" onchange="document.categories.submit()">
		<option name="category" value="all">All</option>
		<option name="category" value="1">Sports</option>
		<option name="category" value="2">Technology</option>
		<option name="category" value="3">Science</option>
		<option name="category" value="4">Entertainment</option>
		<option name="category" value="5">Gaming</option>
		<option name="category" value="6">World & Business</option>
	</select>
   </div>
</form>

And If I click on Sports the url will point to index.php?=1 ... not index.php?category=1

[AutisticCuckoo]

Add name="category" to your <select> tag.

[Kravvitz]

And remove the name attribute from the <option>s.

I suggest you add a submit button as well. You could put it in a <noscript> element if you didn't want to show it when JavaScript is available.

[AutisticCuckoo]

I suggest you add a submit button as well. You could put it in a <noscript> element if you didn't want to show it when JavaScript is available.

Actually, it's better to include it in the markup (no NOSCRIPT) and remove the button with JavaScript if that's the case. This takes care of certain special cases where the browser supports JavaScript but a company firewall strips JS code. (In this case the NOSCRIPT element will not be applied.)