[dropdown]Dropdownmenu zonder buttom
Ik heb weer eens een vraag die ik niet zelf vind op google. Ik wil dus een dropdown menu (keuzemenu van een standaard html formulier) hebben, maar met het verschil dat men niet eerst de keuze maakt en dan op een knop drukken. Maar dat die gelijk verwerkt in een GET naar de zelfde pagina.
Als dit zonder javascript zou gaan dan zou ik die optie willen hebben, maar naar wat ik weet is dat niet mogenlijk en moet het dus met javascript gebeuren. Een onclick-event?
Heeft iemand misschien toevallig ergens een voorbeeld of kan je er zelf een voorbeeld geven dan zou dat erg mooi zijn :). Kan ik weer verder met het echte programmeren :( :P (bedoel dan php, he ;) ).
Grtz DDragonz
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>
<form name="form" id="form">
<select name="jumpMenu" id="jumpMenu" onChange="MM_jumpMenu('parent',this,0)">
<option value="?pagina=get&id=4" selected>item1</option>
</select>
</form>
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>
<form name="form" id="form">
<select name="jumpMenu" id="jumpMenu" onChange="MM_jumpMenu('parent',this,0)">
<option value="?pagina=get&id=4" selected>item1</option>
</select>
</form>
Misschien is jQeury / Mootools wel wat, daar zit vast ook wel zoiets bij wat je bedoeld.
Helaas vind ik jou verhaal/vraag nogal onduidelijk en weet dus niet precies wat je bedoelt. Maar is dit niet iets dat je goed via AJAX kunt doen?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="mootools/mootools.js"></script>
<script type="text/javascript">
window.addEvent ('domready', function () {
$('myselect').addEvent ('change', function () {
this.getParent ().submit ();
});
});
</script>
</head>
<body>
<form id="myform" method="get" action="test.php">
<select id="myselect" name="myselect">
<option value="1">optie 01</option>
<option value="2">optie 02</option>
<option value="3">optie 03</option>
</select>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="mootools/mootools.js"></script>
<script type="text/javascript">
window.addEvent ('domready', function () {
$('myselect').addEvent ('change', function () {
this.getParent ().submit ();
});
});
</script>
</head>
<body>
<form id="myform" method="get" action="test.php">
<select id="myselect" name="myselect">
<option value="1">optie 01</option>
<option value="2">optie 02</option>
<option value="3">optie 03</option>
</select>
</form>
</body>
</html>
edit:
Ik ga nu dus de mootools manier doen, maar ik zou nog wel graag weten hoe het werkt met alleen javascript zonder andere hulpmiddelen.
Gewijzigd op 01/01/1970 01:00:00 door DDragonz
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<form id="myform" method="get" action="test.php">
<select id="myselect" name="myselect" onchange="document.getElementById('myform').submit()">
<option value="1">optie 01</option>
<option value="2">optie 02</option>
<option value="3">optie 03</option>
</select>
</form>
<select id="myselect" name="myselect" onchange="document.getElementById('myform').submit()">
<option value="1">optie 01</option>
<option value="2">optie 02</option>
<option value="3">optie 03</option>
</select>
</form>
Zonder framework.
Gewijzigd op 01/01/1970 01:00:00 door Douwe
Mooi, dat is ook een mooi voorbeeld :) zonder framework.
Nu weer een tweede vraag:
Nu wil ik ook een textinput veld zonder een submit. Ik wil dit voor een snel zoeken functie gebruiken. Ik wil dus dat nadat iemand iets heeft ingetikt en daarna volgt met een enter dat de invoer met een get naar de url gaat(dus de enter dient als de submit). Is dit mogenlijk?
Gewoon een <input> gebruiken en checken op if($_SERVER['REQUEST_METHOD'] == 'POST') (of GET).
Bedankt iedereen ... kan ik nu weer verder :) (zal nog een keer hier een previeuw geven van wat ik gemaakt hebt en wat dan beter kan enz)
DDragonz schreef op 28.09.2008 18:08:
@Douw M:
Mooi, dat is ook een mooi voorbeeld :) zonder framework.
Mooi, dat is ook een mooi voorbeeld :) zonder framework.
Maar dat is wel lelijk, je wilt eigenlijk geen javascript tussen je html :)
Waar je wel op moet letten is dat het ook moet werken zonder javascript.
Dus je kan in het geval van het dropdownmenu de submit button tussen noscript tags plaatsen.
Als javascript uit staat dan laat hij alsnog de button zien