Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX] prototype.js funkcja aktywna cały czas
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
kowbojmov
Witam wszystkich forumowiczów.
Zrobiłem sobie walidację formularza, ale mam jeden problem.
Otóż aby button Dodaj był aktywny muszą być wypełnione wszystkie pola formularza.

Na razie mam tak:

Kod formularza:
  1. <form name="post" method="post" action="?start=comments&p=dodaj_now" id="post">
  2. <table border="0" cellspacing="3" cellpadding="0" align="center" width="650px">
  3. <tr>
  4. <td align="right" valign="middle">Nick: </td>
  5. <td valign="top"><input id="nick" name="nick" type="text" size="30" onkeyup="NickChange()"></td>
  6. <td id="ni">Musisz podać Nick</td>
  7. </tr>
  8.  
  9. <tr>
  10. <td align="right" valign="middle">E-mail: </td>
  11. <td valign="top"><input id="mail" name="mail" type="text" size="30" onkeyup="MailChange()"></td>
  12. <td id="mi">Musisz podać e-mail</td>
  13. </tr>
  14.  
  15. <tr>
  16. <td align="right" valign="middle">Treść: </td>
  17. <td valign="top"><textarea id="coment" name="text" rows="10" cols="45" onkeyup="TextChange()"></textarea></td>
  18. <td id="com">Musisz wpisać treść komentarza</td>
  19. </tr>
  20.  
  21.  
  22. <tr><td align="right"> </td>
  23. <td colspan="2">
  24. <div id="butt" style="float:left;"></div>
  25. <div style="float:left;"><input type="reset" name="reset" value="Usuń"></div>
  26. </td>
  27. </tr>
  28. </form>


plik valid.js:

  1. function NickChange(){
  2.  
  3.      var sels=document.getElementById('nick');
  4.      var sela=document.getElementById('ni');
  5.      
  6.      if(sels.value!=''){
  7.            sels.style.border="1px solid #00cc00";
  8.            sela.innerHTML='<img src="./images/mailok.gif" align="absmiddle">';
  9.            
  10.      }
  11.      else{
  12.            sels.style.border="1px solid #ff0000";
  13.            sela.innerHTML='Musisz podać Nick';
  14.            sela.className='valid_err';
  15.            
  16.      }
  17. }
  18.  
  19.  
  20. function MailChange(){
  21.  
  22.      var sels=document.getElementById('mail');
  23.      var sela=document.getElementById('mi');
  24.      
  25.      if(sels.value!=''){
  26.            sels.style.border="1px solid #00cc00";
  27.            sela.innerHTML='<img src="./images/mailok.gif" align="absmiddle">';
  28.            }
  29.      else{
  30.            sels.style.border="1px solid #ff0000";
  31.            sela.innerHTML='Musisz podać e-mail';
  32.            sela.className='valid_err';
  33.            }
  34. }
  35.  
  36. function TextChange(){
  37.  
  38.      var sels=document.getElementById('coment');
  39.      var sela=document.getElementById('com');
  40.      
  41.      if(sels.value!=''){
  42.            sels.style.border="1px solid #00cc00";
  43.            sela.innerHTML='<img src="./images/mailok.gif" align="absmiddle">';
  44.            }
  45.      else{
  46.            sels.style.border="1px solid #ff0000";
  47.            sela.innerHTML='Musisz wpisać treść komentarza';
  48.            sela.className='valid_err';
  49.            }
  50. }
  51.  
  52.  
  53. function button()
  54. {
  55. var nick=document.getElementById('nick');
  56. var mail=document.getElementById('mail');
  57. var coment=document.getElementById('coment');
  58. var butt=document.getElementById('butt');
  59.  
  60. if(nick.value!='' || mail.value!='' || coment.value!='')
  61. {
  62. butt.innerHTML='<input style="font-weight: bold;" type="submit" name="ok" value="Dodaj">';
  63. }else{
  64. butt.innerHTML='<input style="font-weight: bold;" type="submit" name="ok" value="Dodaj" disabled="disabled" />';
  65. }
  66.  
  67. }


i nie wiem jak wywołać funkcję button() aby ona cały czas sprawdzała jaki jest stan pól i wyświetlała odpowiednią wersję buttonu (aktywny/nie aktywy).

Z tego co znalazłem w sieci to powinienem użyć funkcji Event.observe tylko nie wiem w jaki sposób i w którym miejscu.

Liczę na szybką odpowiedź.
sticker
na js sie specjalnie nie znam ale wydaje mi się że możesz zarejestrować sobie event na status change który wywoła metodę walidującą formularz (tu jest chyba jakas gotowa klasa do ozarządzania eventami http://www.codehouse.com/javascript/script...register_event/ )
kowbojmov
Cytat(sticker @ 26.08.2007, 22:51:09 ) *
tu jest chyba jakas gotowa klasa do ozarządzania eventami

Po co mam używać kolejnej klasy, jak już znalazłem co jest moim rozwiązaniem Event.observe tylko nie umiem tego użyć.
gekon
Po pierwsze po co Ci prototype skoro i tak z niego nie korzystasz?
Ja bym próbował tak:
  1. Event.observe('inputy w formularzu', 'blur', 'button');
  2. //nie wiem jak w prototype wyłuskać inputy z danego formularza, bo nie używam, ale chyba poradzisz sobie
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.