login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Knop klikbaar bij selectie

Offline michielvsb - 16/06/2006 16:58
Avatar van michielvsbHTML interesse Ik zou een formulier willen maken, met een knop, dat standaard niet klikbaar is. Als er iets geselecteerd wordt in de keuzelijst, moet de knop klikbaar worden. Weet iemand hoe het moet, heeft iemand er een javascript scriptje voor? Ik ben nog een beginner qua javascript. Alvast bedankt.

16 antwoorden

Gesponsorde links
Offline lemoinet - 16/06/2006 17:24
Avatar van lemoinet PHP gevorderde
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <form name="form1">
  2. <select onchange="javascript:document.form1.knop.disabled=false">
  3. <option></option>
  4. <option>1</option>
  5. <option>2</option>
  6. <option>3</option>
  7. </select>
  8. <input id="knop" name="knop" type="button" value="Submit" disabled="disabled" />
  9. </form>


ik heb snel iets ineengestoken, hopelijk bedoel je dit
Offline michielvsb - 16/06/2006 17:29
Avatar van michielvsb HTML interesse Heel erg bedankt hoor, heb je ook nog iets om de focus op de knop te laten vallen, zodat de gebruiker ook enter kan doen?
Offline Gerard - 16/06/2006 17:50
Avatar van Gerard Ouwe rakker
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <form name="form1" method="get" action="">
  2. <select onchange="document.getElementById('knop').disabled = false; document.getElementById('knop').focus();">
  3. <option></option>
  4. <option>1</option>
  5. <option>2</option>
  6. <option>3</option>
  7. </select>
  8. <input id="knop" name="knop" type="submit" value="Submit" disabled="disabled" />
  9. </form>
Offline svm - 16/06/2006 18:00
Avatar van svm PHP ver gevorderde Als je dit script gebruikt:
Je zet hem op een getal, en daarna zet je hem weer op het lege vakje, nu kun je nog steeds op de knop klikken.
Niet goed beveiligd dus.
Offline michielvsb - 16/06/2006 18:41 (laatste wijziging 16/06/2006 18:56)
Avatar van michielvsb HTML interesse Dan zou je dus eigenlijk telkens moeten controleren of het leeg is?

Edit: ik heb een scriptje geschreven dat niet helemaal werkt. Het zou telkens moeten controleren of er de juiste waarde is ingevuld. (let er op: ik ben nog een beginner)
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="javascript">
  2. function control()
  3. {
  4.   knop = document.getElementById('choose').value;
  5.   if (knop != "kies")
  6.   {
  7.     document.getElementById('knop').disabled = false; 
  8. 	document.getElementById('knop').focus();
  9.   }
  10.   else
  11.   {
  12.     document.getElementById('knop').disabled = true;     
  13.   }
  14. }
  15. </script>

Bij de onchange heb ik javascript:control(); geschreven.

Oja: het form.

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <form name="form1" method="get" action="">
  2. Selecteer een optie: <select name="choose" style="font-family: Verdana; font-size: 10" onchange="javascript:control()">
  3. <option name="kies">Kies uw album</option>
  4. <option>- -</option>
  5. <option>- -</option>
  6. <option>- -</option>
  7. </select>
  8. <input style="font-family: Verdana; font-size: 10" id="knop" name="knop" type="submit" value="Submit" disabled="disabled" />
  9. </form>
Offline BramBo - 17/06/2006 11:06
Avatar van BramBo JS gevorderde Helaas werkt een Select net weer iets anders dan een gewoon input veld. Je kunt de waarde van deze als volgt oproepen :

php code - Bekijk de code zonder highlighting - Klap code in 
  1. var choose = document.forms[0].navi;
  2. var ch_val  = choose.options[choose.selectedIndex].value


Verder gebruik je getElementById dit kan je alleen gebruiken waneer het element een id bevat. dus <div id='la'> kan je opvangen via getElementById('la').
Name='' is NIET het zelfde als id. 
Offline michielvsb - 17/06/2006 19:46
Avatar van michielvsb HTML interesse Euhh... Heel erg bedankt, dat tweede zinnetje doet een lichtje branden, maar wat bedoel je met navi? Is dit de naam ofzo?
Offline BramBo - 18/06/2006 14:11
Avatar van BramBo JS gevorderde yup .navi is de naam dus in jou geval document.forms[0].choose 
Offline michielvsb - 18/06/2006 21:08
Avatar van michielvsb HTML interesse Noppes,

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="javascript">
  2. function control()
  3. {
  4.   var cho = document.forms[0].choose;
  5.   var ch_val  = cho.options[choose.selectedIndex].value;
  6.   if (ch_val != "kies")
  7.   {
  8.     document.getElementById('knop').disabled = false; 
  9. 	document.getElementById('knop').focus();
  10.   }
  11.   else
  12.   {
  13.     document.getElementById('knop').disabled = true;    
  14.   }
  15. }
  16. </script>
  17. <form name="form1" method="get" action="">
  18. Selecteer een optie: <select name="choose" style="font-family: Verdana; font-size: 10" onchange="javascript:control()">
  19. <option name="kies">Kies uw album</option>
  20. <option name="keulen">Phantasialand</option>
  21. <option name="ieper">Bellewaarde</option>
  22. <option name="stavelot">Telecoo</option>
  23. </select>
  24. <input style="font-family: Verdana; font-size: 10" id="knop" id="knop" type="submit" value="Submit" disabled="disabled" />
  25. </form>

Bij die GetElementById heb ik dus (bij die input) naam vervangen door id. Dus nu zou GetElementById moeten werken.
Offline Dark_Paul - 19/06/2006 12:26
Avatar van Dark_Paul PHP ver gevorderde waarom geef je je knop 2keer id="knop" mee?
Offline michielvsb - 19/06/2006 16:25
Avatar van michielvsb HTML interesse Bedankt, dit had ik nog niet gezien. Maar daar kan de fout niet aan liggen.
Offline Dark_Paul - 19/06/2006 17:29 (laatste wijziging 19/06/2006 17:38)
Avatar van Dark_Paul PHP ver gevorderde ik heb 't zelf ff getest, en dit werkt bij mij:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
  2. function Submit ()
  3. 	{
  4. 		var field 		= document.input.veld;
  5. 		var field_val = document.input.veld.value;
  6.  
  7. 		if (field_val == "kies")
  8. 			{
  9. 				document.input.submit.disabled = false;
  10. 				document.input.submit.focus();
  11. 			}
  12. 		else
  13. 			{
  14. 				document.input.submit.disabled = true;
  15. 			}
  16. 	}
  17. </SCRIPT>
  18. </HEAD>
  19.  
  20. <BODY>
  21. <FORM NAME="input" METHOD="post" ACTION="">
  22. <input type="text" name="veld" size="5" onchange="javascript:Submit()">
  23. <input type="submit" name="submit" value="test" disabled="disabled">
  24. </FORM>

ik ga 't nog ff proberen met een select-field, als dat werkt hoor je 't!
edit: vreemd.. met option[veld.selectedIndex].value werkt 't niet, maar als ik gewoon field.value doe wel. hieronder zoals 't bij mij werkt in FF en IE:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
  2. function Submit ()
  3. 	{
  4. 		var field 		= document.input.veld;
  5. 		var field_val = field.value;
  6.  
  7. 		if (field_val == "kies")
  8. 			{
  9. 				document.input.submit.disabled = false;
  10. 				document.input.submit.focus();
  11. 			}
  12. 		else
  13. 			{
  14. 				document.input.submit.disabled = true;
  15. 			}
  16. 	}
  17. </SCRIPT>
  18. </HEAD>
  19.  
  20. <BODY>
  21. <FORM NAME="input" METHOD="post" ACTION="">
  22. <select name="veld" onchange="javascript:Submit()">
  23. <option value="kies">Kies</option>
  24. <option value="iets">Iets anders</option>
  25. </select>
  26. <input type="submit" name="submit" value="test" disabled="disabled">
  27. </FORM>
Offline michielvsb - 19/06/2006 17:51
Avatar van michielvsb HTML interesse Heel erg bedankt. Maar nu heb ik weeral een probleem  Ik heb dit dus ook geprobeert op een text-field (wel met een eerder zelf gemaakt script) en hierbij moet je eerste buiten het text-field klikken eer dat hij gaat controleren. Kan je het niet op één of andere manier maken dat hij bij iedere letter/cijfer dat je invoert controleert?
Offline Dark_Paul - 19/06/2006 17:54 (laatste wijziging 19/06/2006 18:05)
Avatar van Dark_Paul PHP ver gevorderde met een onkeydown functie misschien?
ik zal ff wat proberen voor je 
edit: het werkt door onchange="" te vervangen door onkeydown="javascript:Submit()" . alleen een klein probleempje dan omdat je de focus hebt, kan je niet verandere. zodra je een knop indruk, controleert ie, en focussed ie. je kan dus niets veranderen. dus moet je met 2 functies werken. ik zal 't even oplossen voor je.
edit 2:
dit werkt bij mij, 't is wel wat omslachtig, maar ik zou zo niet weten hoe je 't in kan korten.
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
  2. function Check ()
  3. 	{
  4. 		var field 		= document.input.veld;
  5. 		var field_val = field.value;
  6.  
  7. 		if (field_val == "kies")
  8. 			{
  9. 				document.input.submit.disabled = false;
  10. 				document.input.submit.focus();
  11. 			}
  12. 		else
  13. 			{
  14. 				document.input.submit.disabled = true;
  15. 			}
  16. 	}
  17.  
  18. function Invoer ()
  19. 	{
  20. 		var field 		= document.input.veld;
  21. 		var field_val = field.value;
  22.  
  23. 		if (field_val == "kies")
  24. 			{
  25. 				document.input.submit.disabled = false;
  26. 			}
  27. 		else
  28. 			{
  29. 				document.input.submit.disabled = true;
  30. 			}
  31. 	}
  32. </SCRIPT>
  33. </HEAD>
  34.  
  35. <BODY>
  36. <FORM NAME="input" METHOD="post" ACTION="">
  37. <input type="text" name="veld" onkeydown="javascript:Invoer()" onkeyup="javascript:Invoer()" onchange="javascript:Check()">
  38. <input type="submit" name="submit" value="test" disabled="disabled">
  39. </FORM>
Offline michielvsb - 19/06/2006 18:43
Avatar van michielvsb HTML interesse Bedankt dat je al deze moeite voor me gedaan hebt. Het is een redelijk lang script voor een korte oplossing, maar het werkt, en dat is het belangrijkste. Moest ik nog een probleempje hebben, dat zal ik dat wel in dit topic zetten. Nog eens merci he. :D 
Offline Dark_Paul - 19/06/2006 19:18
Avatar van Dark_Paul PHP ver gevorderde zoals ik al zei, het zal vast korter kunnen, maar dit is zo de eerste oplossing die ik kan bedenken. nu loop ik zelf trouwens vast, ik probeer dit ook te implanteren in mijn eigen site, maar hij werkt nog niet >< ff zoeken waar ik de fout in ga..
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.264s