Archief - locatie aanpassen aan de hand van select change event

BjoJn · 29 jan 2011

Ik ben op zoek naar het volgende formulier:
Je hebt een keuzelijst waarin leeftijden staan > als men er een kiest (vb 8j) en op 'Ga naar pagina' duwt, dat er dan geforward wordt naar de betreffende pagina op de website.

Ik heb al geprobeerd in jquery, maar helaas... het werkt niet.

HTML:

<form method="post" action=""><fieldset>
<label>Kies een leeftijd</label> 
<select name="leeftijd">
<option label="Kies een leeftijd" value="0">Kies een filiaal</option>
<option label="8j" value="8j">8 Jaar</option>
<option label="9j" value="9j">9 Jaar</option>
<option label="10j" value="10j">10 Jaar</option>
</select>
</fieldset>
<button type="submit" name="leeftijd" >Ga naar pagina</button>
</form>

Code:

<script type="text/javascript">
		var leeftijdUrl	= "mijn site url/";
		$(document).ready(function() {				
			$("select[name=leeftijd]").each(function(){
				$(this).change(function(){
					if($(this).val() != 0){
					window.location = leeftijdUrl + $(this).val();
					}
				});
</script>

Zero Grav · 29 jan 2011

Ge weet dat ge in JQuery bezig zijt, ge hebt HTML en geen letter PHP en toch kiest ge de prefix PHP. Let hier in het vervolg wat beter op. Na de tweede overtreding levert dit normaal infractionpunten op.

Code:

<!DOCTYPE html>
<html>
<head>
    <title>JQuery, not PHP</title>
    <meta charset="utf-8" />
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <script type="text/javascript">
        $(document).ready(function() {                
        
            var leeftijdUrl    = "mijn site url/";
            
            $("#ageSubmit").hide();
            
            $("select[name=leeftijd]").bind('change', function(e) {
                                                        var $selected = $('select[name=leeftijd] option:selected').val();
                                            
                                                        window.location = leeftijdUrl + $selected;
                                                                    
                                                       }
                                       );
            }
        );
    </script>
</head>

<body>

<form method="post" action="paginaInPhpDieDeValueOokUitLeestVoorHetGevalJavascriptAfStaat.php">
    <fieldset>
        <label>Kies een leeftijd</label> 
            <select name="leeftijd">
                <optgroup label="Kies een filiaal">
                    <option label="8j" value="8">8 Jaar</option>
                    <option label="9j" value="9">9 Jaar</option>
                    <option label="10j" value="10">10 Jaar</option>
                </optgroup>
            </select>
            
            <input type="submit" value="ga verder naar de site" id="ageSubmit" />
    </fieldset>
</form>


</body>
</html>

Hou rekening met die actie, doet ge geen backup in PHP dan gaan gebruikers die geen Javascript geactiveerd hebben niet kunnen inloggen op uw site.

En als ge met Javascript/JQuery werkt is het ook wel handig om Firebug/Error Console aan te zetten, dan valt het wel op dat de helft van de code ontbreekt.

Ge sloot namelijk nergens uw document ready handler af, en dan zal het niet snel werken natuurlijk.

BjoJn · 29 jan 2011

Oke bedankt! ik zal hier even op verder gaan.

Ik koos PHP tag omdat ik van plan ben dit te bekomen in php, want in jquery werkte het niet.

Archief - locatie aanpassen aan de hand van select change event

BjoJn

Legacy Member

Zero Grav

Legacy Member

BjoJn

Legacy Member