Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Blokowanie przycisku submit
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
romseb
20.03.2012, 17:25:05
Witam,

Tak jak pisałem wcześniej, zrobiłem walidację formularza przez javascript. Ładnie zaznacza kolorkami gdzie jest błąd. Chciałem również, żeby w przypadku gdy któreś pole nie zaliczy walidacji następowała blokada przycisku submit. W funkcji która koloruje pole (wywoływana na onchange) dopisałem po prostu odwołanie do pola submit w postaci document.getElementById('wyslij').disabled = false;

Jednak status przycisku submit się nie zmienia.

Co robię nie tak? Czuję, że to kwestia drobiazgu

Pozdrawiam

romseb
Niktoś
20.03.2012, 17:27:59
a może to ma być tak?
document.getElementById('wyslij').disabled = true;
romseb
20.03.2012, 21:05:14
Witam.

Było i true. Nic się nie zmieniło, nie działa.

Czy w ogóle robił ktoś tak, że blokuje się submit w momencie któreś z pól jest niepoprawne?

Przypomniam że zmianę wartości pola disabled dopisałem do kolorowania pól w przypadku wystąpienia błędu..

Będę wdzięczny za dalszą pomoc

romseb
kamil4u
20.03.2012, 21:43:28
Przygotuj demo. Wszystko powinno działać, więc błąd pewnie jest gdzieś indziej: https://developer.mozilla.org/en/XUL/Attribute/disabled
celbarowicz
20.03.2012, 22:27:39 
[HTML] pobierz, plaintext 
  1. <html>
  2. <body>
  3. <script type="text/javascript" >
  4. var stan; 
  5.  
  6.    function w(){ stan=0;
  7.                 //ustawiłem stan=1 czyli błąd w walidacji,   walidację dopracuj samodzielnie.//zmieniaj stan.
  8. 				stan=1 ;
  9. 				if(stan===0){  document.getElementById('su1').disabled = false;     }
  10. 				                      else { document.getElementById("su1").disabled = true; } 
  11. 				}
  12.  
  13. function pisz(){
  14.                  alert("edek");
  15. 			}	
  16. </script>
  17. <form>
  18.  
  19.  
  20. <input type="text" name="nap1" id="nap1"  onClick="w();">
  21. <input type="text"  name="nap2" id="nap2"  onClick="w();">
  22. <input type="submit"  name="su1" id="su1"  onClick="pisz()">
  23.  
  24. </form>
  25. </body>
  26. </html>
  27.  
  28.  
  29.  
[HTML] pobierz, plaintext
romseb
20.03.2012, 23:04:00 
[JAVASCRIPT] pobierz, plaintext 
  1. function isValidMacAddress(macAdd) 
  2.  {
  3.   var RegExPattern = /^[0-9A-F-]+$/;
  4.  
  5.   if (!(macAdd.match(RegExPattern)) || macAdd.length != 17) 
  6.   {
  7.        document.getElementById("mac").style.background="#FF0000";
  8.        document.getElementById('wyslij').disabled = true;         
  9.   }
  10.   else
  11.   {
  12.       document.getElementById("mac").style.color="#009900";
  13.       document.getElementById("mac").style.background="#E0E0E0";   
  14.       document.getElementById('wyslij').disabled = false;
  15.   }
  16.  }
  17.  function isValidSocket(SckNum) 
  18.  {
  19.   var RegExPattern = /^[0-9]{1,1}-[0-9]{3,3}$/;
  20.  
  21.   if (!(SckNum.match(RegExPattern)) || SckNum.length != 5) 
  22.   {
  23.        document.getElementById("gniazdko").style.background="#FF0000";
  24.        document.getElementById('wyslij').disabled = true;         
  25.   }
  26.   else
  27.   {
  28.       document.getElementById("gniazdko").style.color="#009900";
  29.       document.getElementById("gniazdko").style.background="#E0E0E0";
  30.       document.getElementById('wyslij').disabled = false;
  31.   }
  32.  }
  33.  
  34. [/codebox]
  35.  
[JAVASCRIPT] pobierz, plaintext


Rzućcie proszę okiem na ten kod.

Dzięki
romseb
celbarowicz
21.03.2012, 07:41:45
Rezygnujesz ze swoich funkcji , następnie przez document.getElementById pobierasz: macAdd oraz...
To co było ciałem Twoich funkcji umieszczasz w ciele funkcji w(){ ....} W każdym Twoim starym fragmencie umieszczasz w odpowiednich miejscach stan=1.
To by było na tyle jak mawiał Profesor Stanisławski.
romseb
21.03.2012, 13:19:41
Witam

Słuchajcie Państwo, ja już się troszkę zgubiłem. Przerobiłem swój skrypt, tak, że jedna funkcja sprawdza wyrażenie i zwraca true albo false, a druga funkcja przeprowadza odpowiedne operacje na wyglądzie zależnie od wyniku. Zmiany są zgodne z sugestią powyżej. W kodzie html wywołanie javascript odbywa sie na onchange. Wywołana jest funkcja validate. Zresztą rzućcie proszę okiem, czy to co poniżej ma prawo działać. Na codzień zajmuje się php, js zajmuję się tylko wtedy, gdy wiem, że dobrze nadaje się do moch celów. Tak czy inaczej, teraz nie działa nic

Będę wdzięczny za pomoc

romseb

CODE

[JAVASCRIPT] pobierz, plaintext 
  1. function isValidMacAddress(macAdd) 
  2.  {
  3.   var RegExPattern = /^[0-9A-F-]+$/;
  4.  
  5.   if (!(macAdd.match(RegExPattern)) || macAdd.length != 17) 
  6.   {
  7.        //document.getElementById("mac").style.background="#FF0000";
  8.        //document.getElementById('wyslij').disabled = true;      
  9.        return false;   
  10.   }
  11.   else
  12.   {
  13.       //document.getElementById("mac").style.color="#009900";
  14.       //document.getElementById("mac").style.background="#E0E0E0";   
  15.       //document.getElementById('wyslij').disabled = false;
  16.       return true;
  17.   }
  18.  }
  19.  function isValidSocket(SckNum) 
  20.  {
  21.   var RegExPattern = /^[0-9]{1,1}-[0-9]{3,3}$/;
  22.  
  23.   if (!(SckNum.match(RegExPattern)) || SckNum.length != 5) 
  24.   {
  25.        //document.getElementById("gniazdko").style.background="#FF0000";
  26.        //document.getElementById('wyslij').disabled = true;  
  27.        return false;       
  28.   }
  29.   else 
  30.   {
  31.       //document.getElementById("gniazdko").style.color="#009900";
  32.       //document.getElementById("gniazdko").style.background="#E0E0E0";
  33.       //document.getElementById('wyslij').disabled = false;
  34.       return true;
  35.   }
  36.  }
  37. function Validate()
  38. {
  39. 		var AcquiredMac = getElementById("mac").value;
  40. 		var AcquiredSck = getElementById("gniazdko").value;
  41.  
  42. 		if (isValidSocket(AcquiredSck)) && ((isValidMacAddress(AcquiredMac))
  43. 		{
  44. 		      document.getElementById("gniazdko").style.color="#009900";
  45.               document.getElementById("gniazdko").style.background="#E0E0E0";
  46.               document.getElementById('wyslij').disabled = false;
  47.               document.getElementById("mac").style.color="#009900";
  48.               document.getElementById("mac").style.background="#E0E0E0";   
  49.  
  50.  
  51. 		}
  52. 		else
  53. 		{
  54. 			document.getElementById("gniazdko").style.background="#FF0000";
  55. 			document.getElementById("mac").style.background="#FF0000";
  56.             document.getElementById('wyslij').disabled = true;  
  57. 	    }	
  58.  
  59. }	
  60.  
[JAVASCRIPT] pobierz, plaintext






kamil4u
21.03.2012, 14:28:31
http://jsfiddle.net/CcNXG/ - zrób na tej podstawie. Jak Ci się nie uda to swój kod( z HTML ) też umieść na tej stronie to łatwiej będzie mi się edytować
celbarowicz
21.03.2012, 18:12:48 
[HTML] pobierz, plaintext 
  1. <html>
  2. <body>
  3. <script type="text/javascript" >
  4. var stan;  var RegExPattern = /^[0-9A-F-]+$/; var macAdd; 
  5.  
  6.    function w(){stan=0;
  7.            //  część 1
  8.                      macAdd=document.getElementById("mac").value;
  9.  
  10.                 if (!(macAdd.match(RegExPattern)) || macAdd.length != 17)
  11.                   {
  12.                     document.getElementById("mac").style.background="#FF0000";
  13.  
  14. 					stan=1;
  15.                   }
  16.                 else
  17.                      {
  18.                        document.getElementById("mac").style.color="#009900";
  19.                        document.getElementById("mac").style.background="#E0E0E0";
  20.  
  21.                      }
  22. 	//	część 2			 
  23. 				//do samodzielnego wykonania
  24.  
  25. 				if(stan===0){  document.getElementById('su1').disabled = false;     }
  26. 				                      else { document.getElementById("su1").disabled = true; } 
  27. 				}
  28.  
  29. function pisz(){
  30.                  alert("edek");
  31. 			}	
  32. </script>
  33. <form> 
  34. <input type="text" name="mac" id="mac"  onkeyup="w();">
  35.  
  36. <input type="submit"  name="su1" id="su1"  onClick="pisz()">
  37.  
  38. </form>
  39. </body>
  40. </html>
  41.  
  42.  
  43.  
[HTML] pobierz, plaintext

Zamień onclick na onkeyup
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.