Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]automatyczna poprawa zawartości formularza
Forum PHP.pl > Forum > Przedszkole
agata
Cześć
z góry proszę o wyrozumiałość w jevascript to moje pierwsze kroki.

Interesuje mnie napisanie funkcji za pomocą której mogłabym zmieniać w formularzu dane wprowadzone przez użytkownika.
Mam przykładowy formularz:

  1. form class="formularz" id="form" name="form1" action="../validator/index.php" method="post">
  2. <input type="button" name="check" value="popraw" OnClick="return check()">
  3. <input type="text" name="title" value="jakiś tytuł">
  4. <textarea name="opis" cols="80" rows="10" id="opis" class="width500height400">Jakiś opis czegoś tam</textarea>
  5. <input type="submit" name="zapisz" value="zapisz"/>
  6. </form>


Po naciśnięciu przycisku popraw ma zostać wywołana funkcja:

  1. function check (){
  2.  
  3. var tytul = document.form1.title.value;
  4. ...
  5. ...
  6. }


która pobierze wartości i automatycznie je poprawi tzn.
tytuł - coś na zasadzie jak ucfirst w php (pierwsza litera ciągu duża)
strtolower (textarea) - poprawienie na małe litery jeśli ktoś wpisze całość np z CapsLockiem

Proszę o pomoc jak to zrobić lub jakiś link gdzie znaleźć materiały do zrobienia tego.
Znajduję tylko validatory które informują o błędnych danych ale nie poprawiają ich.
W php robie to w 10 min ale javascriptu się uczę dopiero.
piotrooo89
tylko że to tak z usability troszkę na bakier. zobacz na to z poziomy zwykłego usera. ma wpisać tytuł, jakiś tam tekst kliknąć popraw później dopiero wyślij. średnio fajne to jest. a co do Twojego problemu to te funkcje: http://www.w3schools.com/jsref/jsref_obj_string.asp.
agata
funkcję popraw ma osoba która jest odpowiedzialna za poprawność i estetyczność treści.

czyli wygląda to tak:

treść usera z 1 formularza -> treść poprawiana przez kogoś innego -> poprawiona treść wyświetlana na stronie

Skrypt ma na celu zaoszczędzenie pracy moderatorowi (przynajmniej w jakiejś części).



mam jeszcze jedno pytanko w tym temacie.

Jaka jest funkcja do poprawiania Pierwszej litery zdania na dużą (w php ucfirst) ale w javascript mi ucfirst nie działa.
zamiast tego mam coś takiego co działa poprawnie:

  1. function check (){
  2.  
  3. var tytul = document.rfpChangeForm.title.value;
  4. var opis = document.rfpChangeForm.idObject.value;
  5.  
  6. document.rfpChangeForm.idObject.value = opis.toLowerCase();
  7.  
  8.  
  9. // split string
  10. firstChar = tytul.substring(0,1);
  11. remainChar = tytul.substring(1);
  12.  
  13. // convert case
  14. firstChar = firstChar.toUpperCase();
  15. remainChar = remainChar.toLowerCase();
  16. document.rfpChangeForm.title.value = firstChar + remainChar;


fajnie zmienia mi literę w tytule:) ew jeśli nie ucfirst to jak zastosować to co mam napisane do tytulu żeby odnosiło się do większej liczby pól (tytul, imie, naza itp)
bez potrzeby klepania tego samego kodu z inną nazwą pola.
z góry dzięki za pomoc
piotrooo89
możesz na przykład robić to tak:

  1. <input type="text" name="test1" onKeyUp="check(this.value);" />
  2. <input type="text" name="test2" onKeyUp="check(this.value);" />
  3. itd...


no albo zainteresować się jakimś frameworkiem, polecam jQuery i on już naprawdę ma wyczesane funkcje do iteracji po całym drzewie DOM.
agata
Cześć mam jeszcze jeden problemik.
Napisałam całą funkcje która działa:

  1. function check (){
  2. //alert ('jakaś wiadomość');
  3. var tytul = document.rfpChangeForm.title.value;
  4. var waznosc = document.rfpChangeForm.expDate.value;
  5. var city = document.rfpChangeForm.rfp_locationCity.value;
  6. var dostawa = document.rfpChangeForm.arf_delivery.value;
  7. var wymagania = document.rfpChangeForm.rfp_additionalRequirements.value;
  8. var imie = document.rfpChangeForm.rfp_firstName.value;
  9. var nazwisko = document.rfpChangeForm.rfp_lastName.value;
  10. var info = document.rfpChangeForm.rfp_additionalInfo.value;
  11. var opis = document.rfpChangeForm.idObject.value;
  12. var opis1 = opis.toLowerCase();
  13.  
  14. var tablica = new Array (tytul, opis1, city, dostawa, wymagania, imie, nazwisko, info);
  15.  
  16.  
  17. for(i=0; i<tablica.length; i++)
  18. {
  19. var pole = tablica[i];
  20.  
  21. // split string
  22. firstChar = pole.substring(0,1);
  23. remainChar = pole.substring(1);
  24.  
  25. // convert case
  26. firstChar = firstChar.toUpperCase();
  27. remainChar = remainChar.toLowerCase();
  28. pole = firstChar + remainChar;
  29.  
  30. alert(pole)
  31. //document.rfpChangeForm..value = pole;
  32. }
  33. document.rfpChangeForm.idObject.value = opis1;
  34.  
  35.  
  36. }


Problem mam taki że nie wiem jak zwrócić poprawione wartości w pętli do formularza, zamiast alert(pole), powinno być polecenie
wpisujące poprawioną wartość w określone pole w formularzu - tak jak robi to dwa wiersze niżej opis1. Niestety nie wiem jak mam to zrobić proszę o pomoc.
thek
To popatrz jak robi się w opis to winksmiley.jpg Ogólnie rozwiązuje się to przez odwołanie do określonego obiektu formularza po jego id (najczęściej) lub poprzez tablicę forms.
agata
wiem jak w ogólny sposób wstawić do formularz np tak jak w opis.
Chodzi mi o konkretne odwołanie w tej pętli
w przypadku jak jest alert on wyświetla po kolei każdą poprawioną treść i nie wiem jak zrobić
żeby ta pętla przechodziła też przez kolejne pola w celu wstawienia poprawionej wartości.

  1. #
  2. function check (){
  3. //alert ('jakaś wiadomość');
  4. var tytul = document.rfpChangeForm.title.value;
  5. var waznosc = document.rfpChangeForm.expDate.value;
  6. var city = document.rfpChangeForm.rfp_locationCity.value;
  7. var dostawa = document.rfpChangeForm.arf_delivery.value;
  8. var wymagania = document.rfpChangeForm.rfp_additionalRequirements.value;
  9. var imie = document.rfpChangeForm.rfp_firstName.value;
  10. var nazwisko = document.rfpChangeForm.rfp_lastName.value;
  11. var info = document.rfpChangeForm.rfp_additionalInfo.value;
  12. var opis = document.rfpChangeForm.idObject.value;
  13. var opis1 = opis.toLowerCase();
  14. var tablica = new Array (tytul, opis1, city, dostawa, wymagania, imie, nazwisko, info);
  15.  
  16.  
  17. for(i=0; i<tablica.length; i++)
  18. {
  19. var pole = tablica[i];
  20.  
  21.  
  22. // split string
  23. firstChar = pole.substring(0,1);
  24. remainChar = pole.substring(1);
  25.  
  26. // convert case
  27. firstChar = firstChar.toUpperCase();
  28. remainChar = remainChar.toLowerCase();
  29. pole = firstChar + remainChar;
  30.  
  31. //alert(pole)
  32. tablica[i] = pole; // taki zapis mi nie działa, a przecież każdy element tablicy to -> document.rfpChangeForm.idpola.value (różnią się tylko idpola)
  33.  
  34. }
  35.  
  36. document.rfpChangeForm.idObject.value = opis1;
  37.  
  38. }


Proszę o pomoc jak przechodzić przez wszystkie pola w pętli w celu wpisania w nie poprawionej wartości.

Ok udało mi się to w końcu zrobić, rozwiązanie poniżej.
Należało najpierw pobierać tylko pola z formularza a ich wartości przypisać dopiero w pętli:


  1. function check (){
  2. //alert ('jakaś wiadomość');
  3. var tytul = document.rfpChangeForm.title;
  4. var waznosc = document.rfpChangeForm.expDate;
  5. var city = document.rfpChangeForm.rfp_locationCity;
  6. var dostawa = document.rfpChangeForm.arf_delivery;
  7. var wymagania = document.rfpChangeForm.rfp_additionalRequirements;
  8. var imie = document.rfpChangeForm.rfp_firstName;
  9. var nazwisko = document.rfpChangeForm.rfp_lastName;
  10. var info = document.rfpChangeForm.rfp_additionalInfo;
  11. var opis = document.rfpChangeForm.idObject;
  12.  
  13.  
  14. var tablica = new Array (tytul, opis, city, dostawa, wymagania, imie, nazwisko, info);
  15.  
  16. for(i=0; i<tablica.length; i++)
  17. {
  18. var pole = tablica[i];
  19. var wartosc = tablica[i].value;
  20. // split string
  21. firstChar = wartosc.substring(0,1);
  22. remainChar = wartosc.substring(1);
  23.  
  24. // convert case
  25. firstChar = firstChar.toUpperCase();
  26. remainChar = remainChar.toLowerCase();
  27. poprawa = firstChar + remainChar;
  28.  
  29. //alert(poprawa)
  30. tablica[i].value = poprawa;
  31.  
  32. }
  33. }
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.