Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JS] Dodawanie pol formularza
Crozin
post
Post #1





Grupa: Zarejestrowani
Postów: 6 476
Pomógł: 1306
Dołączył: 6.08.2006
Skąd: Kraków

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


Na początek: JS - nie znam (wszystko co wiem jest jedynie z widzenia i domyslow)
Co chcę osiągnąć: Chcę dodac jedno pole formularza do div'a o id X po klieknieciu w link. Max ilość dodanych pol: 9.
Co udało mi się osiągnać: nic (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
Kod
:
...
<html>
<head>
<script type="text/javascript">
function OneMoreField(Group)
{
  var MaxFields = 9;
  var Counter.Group = 0;
  
  if(Counter.Group < MaxFields)
  {
   document.getElementById(Group).innerHTML='<input type="text" name="'+Group+'[]" />';
   Counter.Gropu += 1;
  }
}
</script>



Powyższy kod na 100% jest zły (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) Ale co ma z założenia robic?
Najpierw zostala określona max. ilość możliwych do dadania pól. Poźniej jest zmienna "licznki". Nastepnie jezeli zmienna Counter.Group (Gropu to zmienna przekazana w 1arg - pewnie zle ja "wstawilem") ma wartosc miejsa od 9 to do odpowiedniego div'a ma zostac dodany kod i wartosc Counter ma zostac zwiekszona.

Do tego jest jeszcze html:
  1. :
  2. <label for="Requirements">Requirements:</label>
  3. <div id="Requirements">
  4. <input type="text" name="Requirements[]" /><a href="java script:OneMoreFiled('Requirements')">one more field</a>
  5. </div>
  6.  
  7. <label for="Responsibilities">Responsibilities:</label>
  8. <div id="Responsibilities">
  9. <input type="text" name="Responsibilities[]" /><a href="java script: OneMoreFiled('Responsibilities')">one more field</a>
  10. </div>
  11.  
  12. <label for="Proffer">Proffer:</label>
  13. <div id="Proffer">
  14. <input type="text" name="Proffer[]" /><a href="java script:OneMoreFiled('Proffer')">one more field</a>
  15. </div>
Go to the top of the page
+Quote Post
nospor
post
Post #2





Grupa: Moderatorzy
Postów: 36 558
Pomógł: 6315
Dołączył: 27.12.2004




Cytat
Na początek: JS - nie znam

A więc drogi Kszysztofie, nawet osoba, ktora niezna js, a zna inne jezyki (a wiem ze znasz inne ), powinna wiedziec, ze cos takiego:
Kod
.innerHTML='....';

Nie dopisze, a nadpisze (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) . Tak wiec nie = a +=

Tak na szybko, by ci pokazac mniej wiecej tok myslenia:
  1. <script type="text/javascript">
  2. var countRec = 1;
  3. var countRes = 1;
  4. var countProf = 1;
  5. function OneMoreField(idGroup, count)
  6. {
  7. var MaxFields = 9;
  8. if (count > MaxFields)
  9. return ;
  10. document.getElementById(idGroup).innerHTML+='<input type="text" name="'+idGroup+'[]" />';
  11. }
  12. </script>
  13.  
  14. <label for="Requirements">Requirements:</label>
  15. <div id="Requirements">
  16. <input type="text" name="Requirements[]" /><a href="java script:OneMoreField('Requirements', ++countRec);">one more field</a>
  17. </div>
  18.  
  19. <label for="Responsibilities">Responsibilities:</label>
  20. <div id="Responsibilities">
  21. <input type="text" name="Responsibilities[]" /><a href="java script:OneMoreField('Responsibilities',++countRes);">one more field</a>
  22. </div>
  23.  
  24. <label for="Proffer">Proffer:</label>
  25. <div id="Proffer">
  26. <input type="text" name="Proffer[]" /><a href="java script:OneMoreField('Proffer',++countProf);">one more field</a>
  27. </div>

Oczywiscie to powinno byc na DOMie i wogole ciut lepiej powinno wygladac, ale jak mowilem chce ci tylko pokazac mniej wiecej jak robic
Go to the top of the page
+Quote Post
Crozin
post
Post #3





Grupa: Zarejestrowani
Postów: 6 476
Pomógł: 1306
Dołączył: 6.08.2006
Skąd: Kraków

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


Cytat
Nie dopisze, a nadpisze . Tak wiec nie = a +=

to juz jest tzw. "pierdolka" - jakby mi sie udalo 1 dodac to bym sie pewnie zoorientowal (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

no ale dziekuje za pomoc, pieknie dziala (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

wiem ze nie powinienem pisac posta pod postem, ale inaczej pewnie juz nikt tego nie odczyta (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif)

o co chodzi tym razem? o usowanie elementów (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)
zrobilem cos takiego:
  1. var countRec = 1;
  2. var countRes = 1;
  3. var countProf = 1;
  4.  
  5. ... tutaj f-cja ktora dodaje ....
  6.  
  7. function OneLessField(idGroup, Count)
  8. {
  9. var MinFields = 1;
  10.  
  11. if(Count <= MinFields)
  12. return ;
  13.  
  14. }
  15. <a href="java script:OneLessField('Proffer', --countProf);">-1</a>

no i chyba widac gdzie sie "zacialem" :S przegladnalem Dokumentacja języka JavaScript 1.5 oraz Przewodnik po języku JavaScript 1.5 z http://developer.mozilla.org/pl/docs/JavaScript ale nie znalazlem tam przeciwienstwa innerHTML czyli czegos czym moglbym obciac czesc string'a (czyli cos na ksztalt substr z php)

ps. obiecuje ze jak tylko skoncze pewnien projekt wezme sie za JS (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)

EDIT:
ahhh... automatyczne edytowanie postow (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif)

EDIT:
czy da sie cos zrobic aby w przypadku gdy mam np. 5 pol - wypelnie je i zapragne dodac szoste wartosci 5 wczesniejszych nie wymazaly sie?
...ale ja truje (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif)

Ten post edytował Crozin 19.03.2007, 00:41:20
Go to the top of the page
+Quote Post
nospor
post
Post #4





Grupa: Moderatorzy
Postów: 36 558
Pomógł: 6315
Dołączył: 27.12.2004




Cytat
ahhh... automatyczne edytowanie postow
bajer,nie? (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif)

Cytat
czy da sie cos zrobic aby w przypadku gdy mam np. 5 pol - wypelnie je i zapragne dodac szoste wartosci 5 wczesniejszych nie wymazaly sie?
hehe, faktycznie, wymazuja sie. I wlasnie dlatego jestem przeciwnikiem innerHTML. Tutaj jak nic nalezy uzyc DOMa.

Cytat
ale nie znalazlem tam przeciwienstwa innerHTML czyli czegos czym moglbym obciac czesc string'a
I znowu DOM (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
nadajesz polom ID, potem pobierasz dane pole na podstawie ID: document.getElementById(), a potemo usuwasz przy pomocy removeChild. Zapraszam do dokumentacji (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
Jak nic nie zdzialasz to moze bede mial chwilke by cos wiecej dopisac

edit:
a masz, przerobka na DOM, nie usuwa wpisanych wartosci:
Kod
<script type="text/javascript">
var countRec = 1;
var countRes = 1;
var countProf = 1;
function OneMoreField(idGroup, count, objHref)
{
    var MaxFields = 9;
    if (count > MaxFields)
        return;
    objDiv = document.getElementById(idGroup);//.innerHTML+='<input type="text" name="'+idGroup+'[]" />';
    element=document.createElement('input');
    element.name=idGroup+'[]';
    objDiv.insertBefore(element, objHref);
}
</script>

<label for="Requirements">Requirements:</label>
   <div id="Requirements">
    <input type="text" name="Requirements[]"/><a href="#" onclick="OneMoreField('Requirements', ++countRec, this);">one more field</a>
   </div>

   <label for="Responsibilities">Responsibilities:</label>
   <div id="Responsibilities">
    <input type="text" name="Responsibilities[]" /><a href="#" onclick="OneMoreField('Responsibilities',++countRes,this);">one more field</a>
   </div>
    
   <label for="Proffer">Proffer:</label>
   <div id="Proffer">
    <input type="text" name="Proffer[]" /><a href="#" onclick="OneMoreField('Proffer',++countProf, this);">one more field</a>
   </div>

Usuwanie pozostawiam Tobie (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif)
Go to the top of the page
+Quote Post
Crozin
post
Post #5





Grupa: Zarejestrowani
Postów: 6 476
Pomógł: 1306
Dołączył: 6.08.2006
Skąd: Kraków

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


juz wszystko jest prawie ok (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) zostala tylko 1 rzecz do poprawy: http://www.crozin.pl/form.html jak widac po dodaniu kolejnych elementow ikonki "+" "-" znajduja sie przy ostatnim elemencie...
domyslam sie ze jest to spowodowane ta f-cja: insertBefore, niestety w dokumentacji nie znalazlem niczego w stylu innserAfter :E istenieje cos takiego?

ps. w kod tego "czegos" (bo strona bym tego nie nazwa) nawet nie patrz (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif) (poza js)
Go to the top of the page
+Quote Post
nospor
post
Post #6





Grupa: Moderatorzy
Postów: 36 558
Pomógł: 6315
Dołączył: 27.12.2004




Kurka, to ja specjalnie to zrobilem, by tak bylo, a ten narzeka.... (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)
No jak chcesz by ci sie dzieciak dodawal na samym koncu, to musisz uzyc appendChild() (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

ps: ee, widze ze usuwanie juz zrobiles. punkt dla ciebie (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
Crozin
post
Post #7





Grupa: Zarejestrowani
Postów: 6 476
Pomógł: 1306
Dołączył: 6.08.2006
Skąd: Kraków

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


Niestety musze jeszcze troche pomarudzic (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif)
Są jeszcze dwie sprawy:
1 - prosta)
przy dodawaniu nowego/usuwaniu juz istniejacego pola "przenosc" nas na górę okna przegladarki. Rozwiązaniem jest wywalenie href="#" - jednak to jest sprzeczne ze standardami... jest jakies proste rozwiazanie aby uniknąć efektu "skakania"? (jeżeli oznacza to jakiś skomplikowany kod to wolę być "niestandardowy" (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

2 - trudniejsza)
chodzi o BackUp. Aby lepiej zoobrazować co mam na myśli:
www.crozin.pl/mg/ -> log in -> mail@emplyer.com | password -> add new -> wypelnic form przykladowymi danymi (pamietając o pozostawieniu jednego z wymaganych pól pustym).
Kod którym próbowałem coś zdziałać można zobaczyć w żródle (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

Chyba za bardzo Cię wykorzystuje... :s
(może niech napisze ktoś inny bo juz mi się zaczyna głupio robić (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif) )
Go to the top of the page
+Quote Post
nospor
post
Post #8





Grupa: Moderatorzy
Postów: 36 558
Pomógł: 6315
Dołączył: 27.12.2004




ad1)
mniej wiecej cos takiego:
Kod
document.body.scrollTop = 0;

Ale nie gwarantuje ze dziala wszedzie.

ad2)
Cos ta Twoja stronka nie dziala, ze juz nie wspomne o kiepskich danych do logowania (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)
Chodzi ci oto, ze dynamicznie dodasz pola, a po submicie one znikaja? No a cos ty myslal? (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)
Musisz po submicie je wygenerowac ponownie w php, by po zaladowaniu strony sie pojawily
Go to the top of the page
+Quote Post
Crozin
post
Post #9





Grupa: Zarejestrowani
Postów: 6 476
Pomógł: 1306
Dołączył: 6.08.2006
Skąd: Kraków

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


Cytat
juz nie wspomne o kiepskich danych do logowania
chodzi o to ze przez maila i haslo? nie moja decyzja (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif)

Cytat
Chodzi ci oto, ze dynamicznie dodasz pola, a po submicie one znikaja? No a cos ty myslal?
Musisz po submicie je wygenerowac ponownie w php, by po zaladowaniu strony sie pojawily

z tym ze musze je generowac w js aby mozna je bylo usowac (ikonka minusika (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif) )
doszedlem do wniosku ze najlatwiej bedzie zapisac wartosci pol do zmiennych (tabic) - to jest dzialka php. nastepnie w body dodac onLoad="jakas_fcja();" i jakas_fcja przy uzyciu czegos na ksztalt foreach z php doda kilka pol z odpowiednia wartoscia value:
Kod
objDiv = document.getElementById('Proffer');
element=document.createElement('input');
element.name='Proffer[]';
element.id='Proffer'+index;
element.value=element;
objDiv.appendChild(element, objHref);

wydaje mi sie ze ten kod wystarczy wrzucic w odpowiednia(e) petle

Ten post edytował Crozin 21.03.2007, 18:07:02
Go to the top of the page
+Quote Post
nospor
post
Post #10





Grupa: Moderatorzy
Postów: 36 558
Pomógł: 6315
Dołączył: 27.12.2004




Cytat
chodzi o to ze przez maila i haslo? nie moja decyzja
Chodzi oto, ze nie moglem sie na te dane zalogowac (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
Cytat
Ten e-mail nie jest zarejestrowany.


Cytat
z tym ze musze je generowac w js aby mozna je bylo usowac
czemu? Rownie dobrze po submicie mozesz w php utworzyc te pola i tak samo bedziesz mogl usuwac potem w js. No chyba ze ja jednak nie rozumiem co chcesz zrobic (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
Crozin
post
Post #11





Grupa: Zarejestrowani
Postów: 6 476
Pomógł: 1306
Dołączył: 6.08.2006
Skąd: Kraków

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


mail: mail@employer.com
pass: password

a dodajac w php pola (tuz pod "glownymi") wg schematu:
<input type="text" name="JadnoZTrzechPol[]" value="Wartosc" /> nie mozna go potem usunac usunac :S
Go to the top of the page
+Quote Post
nospor
post
Post #12





Grupa: Moderatorzy
Postów: 36 558
Pomógł: 6315
Dołączył: 27.12.2004




Cytat
mail: mail@employer.com
pass: password

z jakis powodow zaczelo dzialac

Cytat
a dodajac w php pola (tuz pod "glownymi") wg schematu:
<input type="text" name="JadnoZTrzechPol[]" value="Wartosc" /> nie mozna go potem usunac usunac :S

Pamietasz jak pare postow wczesniej miales u mnie plusa? Wlasnie go straciles (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)
A jak tworzysz nowego inputa w js? No przeciez dodajesz mu jeszcze id, w sklad ktorego whodzi licznik, ktory jest zwiekszany. No to podobnie musi byc panie kolego i w php. musisz generowac inputy o takich samych id co w js i musisz te zmienna count ustawic na taka, ile tych inputow bedziesz mial. No to chyba logiczne.
Go to the top of the page
+Quote Post

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

 



RSS Aktualny czas: 23.09.2025 - 09:59