Vytvořte prvek výběru formuláře kompatibilního s NoScript pomocí události onChange

Neřekl bych, že jsem závislý na kontrole Google Analytics, ale své statistiky často kontroluji. Myslím, že doufám v obrovský nárůst provozu z nějakého neznámého zdroje. Každopádně mám v účtu nastaveno více stránek. Mezi weby lze přepínat výběrem webu z rozevíracího seznamu. Jakmile se rozbalovací seznam změní, stránka se automaticky znovu načte s požadovaným obsahem webu.

I když je událost onChange u prvku SELECT skvělá a šetří kliknutí, je důležité si uvědomit, že pokud uživatel nemá povolený JavaScript, funkce se úplně rozpadne. V takovém případě je důležité zobrazit tlačítko Odeslat. Zde je návod, jak udržet své základny zakryté.

XHTML a JavaScript

<form name="accounts_form" id="accounts_form" method="get" action="<?php echo $_SERVER['REQUEST_URI']; ?>">
	<label for="color">Which account do you want to view?</label>    
	<select name="color" id="color" onchange="document.forms['accounts_form'].submit();">
		<option value="">Select</option>
		<option value="Savings Account 1">Savings Account 1</option>
		<option value="Savings Account 2">Savings Account 2</option>
		<option value="Savings Account 3">Savings Account 3</option>
		<option value="Checking Account 1">Checking Account 1</option>
		<option value="Checking Account 2">Checking Account 2    </option>
	</select>
	<br /><br />
	<input type="submit" value="Go!" id="sub" class="button" />
</form>

<script type="text/javascript">
	//Going to hide the button now using JavaScript since I know the onChange above will work.
	document.getElementById('sub').style.display = 'none';
</script>

Všimněte si, že ve výchozím nastavení zobrazujeme tlačítko. Ke skrytí tlačítka používáme JavaScript – protože JavaScript běží, víme, že událost SELECT onChange bude fungovat. Klikněte sem a uvidíte to v akci!

Tipy od Googlu vám mohou dobře posloužit!