Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [AJAX] prototype.js funkcja aktywna cały czas
kowbojmov
post
Post #1





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 6.06.2007

Ostrzeżenie: (0%)
-----


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ź.
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi (1 - 3)
sticker
post
Post #2





Grupa: Zarejestrowani
Postów: 611
Pomógł: 19
Dołączył: 28.02.2005
Skąd: Wrocław

Ostrzeżenie: (0%)
-----


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/ )


--------------------
Go to the top of the page
+Quote Post
kowbojmov
post
Post #3





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 6.06.2007

Ostrzeżenie: (0%)
-----


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ć.
Go to the top of the page
+Quote Post
gekon
post
Post #4





Grupa: Zarejestrowani
Postów: 614
Pomógł: 7
Dołączył: 10.11.2003
Skąd: Rzeszów/Kraków

Ostrzeżenie: (0%)
-----


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


--------------------
Pokaż kod = Pokaż CAŁY kod, najlepiej działający na jakimś serwerze.
Fanatycy | glazar.info | semantyka | HTML i XHTML FAQ
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 21.08.2025 - 05:35