Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS] Dodawanie pol formularza
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Crozin
18.03.2007, 19:23:22
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 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 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: 
[HTML] pobierz, plaintext 
  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>
[HTML] pobierz, plaintext
nospor
18.03.2007, 20:31:14
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 smile.gif. Tak wiec nie = a +=

Tak na szybko, by ci pokazac mniej wiecej tok myslenia:
[HTML] pobierz, plaintext 
  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>
[HTML] pobierz, plaintext

Oczywiscie to powinno byc na DOMie i wogole ciut lepiej powinno wygladac, ale jak mowilem chce ci tylko pokazac mniej wiecej jak robic
Crozin
19.03.2007, 00:26:00
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 winksmiley.jpg

no ale dziekuje za pomoc, pieknie dziala smile.gif

wiem ze nie powinienem pisac posta pod postem, ale inaczej pewnie juz nikt tego nie odczyta biggrin.gif

o co chodzi tym razem? o usowanie elementów winksmiley.jpg
zrobilem cos takiego:
[HTML] pobierz, plaintext 
  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>
[HTML] pobierz, plaintext

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 tongue.gif

EDIT:
ahhh... automatyczne edytowanie postow 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 biggrin.gif
nospor
19.03.2007, 08:50:26
Cytat
ahhh... automatyczne edytowanie postow
bajer,nie? 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 smile.gif
nadajesz polom ID, potem pobierasz dane pole na podstawie ID: document.getElementById(), a potemo usuwasz przy pomocy removeChild. Zapraszam do dokumentacji 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 biggrin.gif
Crozin
19.03.2007, 16:48:41
juz wszystko jest prawie ok 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 biggrin.gif (poza js)
nospor
20.03.2007, 07:41:23
Kurka, to ja specjalnie to zrobilem, by tak bylo, a ten narzeka.... tongue.gif
No jak chcesz by ci sie dzieciak dodawal na samym koncu, to musisz uzyc appendChild() smile.gif

ps: ee, widze ze usuwanie juz zrobiles. punkt dla ciebie smile.gif
Crozin
20.03.2007, 16:53:56
Niestety musze jeszcze troche pomarudzic 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" 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 winksmiley.jpg

Chyba za bardzo Cię wykorzystuje... :s
(może niech napisze ktoś inny bo juz mi się zaczyna głupio robić tongue.gif)
nospor
21.03.2007, 09:23:41
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 tongue.gif
Chodzi ci oto, ze dynamicznie dodasz pola, a po submicie one znikaja? No a cos ty myslal? tongue.gif
Musisz po submicie je wygenerowac ponownie w php, by po zaladowaniu strony sie pojawily
Crozin
21.03.2007, 18:05:21
Cytat
juz nie wspomne o kiepskich danych do logowania
chodzi o to ze przez maila i haslo? nie moja decyzja 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 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
nospor
21.03.2007, 19:29:43
Cytat
chodzi o to ze przez maila i haslo? nie moja decyzja
Chodzi oto, ze nie moglem sie na te dane zalogowac 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 smile.gif
Crozin
21.03.2007, 20:58:17
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
nospor
21.03.2007, 21:07:00
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 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.
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.