Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [js] Dynamicznie tworzony formularz
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
windman
19.06.2008, 20:03:52
Witam,

Tworzę formularz dynamicznie:

Kod
   //formularz
   var objLetKnowForm = document.createElement("form");
   objLetKnowForm.setAttribute('name','letknowform');
   objLetKnowForm.setAttribute('method','get');
   objLetKnowForm.onsubmit = function(){return false;}
   objLetKnow.appendChild(objLetKnowForm);  
  
   //Input nadawca
   var objLetKnowNadawca = document.createElement("input");
   objLetKnowNadawca.setAttribute('type','text');
   objLetKnowNadawca.setAttribute('name','nadawca');
   objLetKnowNadawca.setAttribute('value','Twój e-mail');
   objLetKnowNadawca.onfocus = function () {if(this.value=='Twój e-mail') this.value=''}
   objLetKnowForm.appendChild(objLetKnowNadawca);
  
   //Input button
   var objLetKnowButton = document.createElement("input");
   objLetKnowButton.setAttribute('type','submit');
   objLetKnowButton.setAttribute('name','letknowbutton');
   objLetKnowButton.setAttribute('value','Powiadom');
   objLetKnowButton.onclick = function(){alert(document.letknowform.nadawca.value); return false;}
   objLetKnowForm.appendChild(objLetKnowButton);


Pod FF i Operą alert zwraca zawartośc pola nadawca, natomiast IE wyświetla błąd: document.letknowform.nadawca jest pusty lub nie jest obiektem.

Ktoś ma pomysł dlaczego?
Pozdrawiam
nevt
19.06.2008, 21:07:32
a gdzie wstawiasz objLetKnow do document questionmark.gif
windman
19.06.2008, 21:18:15
Cytat(nevt @ 19.06.2008, 22:07:32 ) *
a gdzie wstawiasz objLetKnow do document questionmark.gif

objLetKnow jest tworzony w ten sam sposób, jest to div

Kod
var objLetKnow = document.createElement("div");
objLetKnow.setAttribute('id','letknow');
objLetKnow.style.display = 'none';
objBody.insertBefore(objLetKnow, objBody.firstChild);



Dodam, że dodałem do pola input nadawca atrybut id. I teraz działa: alert(document.getElementById('id_pola_nadawca').value);

ale to rozwiązanie awaryjne, powinno przecież też działać z this.form.nadawca.value
nevt
20.06.2008, 07:38:06
nie zrozumiałeś mnie... nie pytałem się JAK wstawiasz objLetKnow tylko GDZIE
a konkretnie, PRZED czy PO linijce: objLetKnowButton.onclick = function(){alert(document.letknowform.nadawca.value); return false;}
questionmark.gif
windman
20.06.2008, 12:16:10
Cytat(nevt @ 20.06.2008, 08:38:06 ) *
nie zrozumiałeś mnie... nie pytałem się JAK wstawiasz objLetKnow tylko GDZIE
a konkretnie, PRZED czy PO linijce: objLetKnowButton.onclick = function(){alert(document.letknowform.nadawca.value); return false;}
questionmark.gif

Przed. Skrypt najpierw tworzy opakowanie div o id="letknow", następnie tworzony jest formularz i wstawiane do niego pola input. Linijka o którą pytasz jest ostatnia (w zasadzie przedostatnia) z całego skryptu.

Poniżej cała funkcją tworząca formularz:
Kod
function letKnowCreate(){
var objBody = document.getElementsByTagName("body").item(0);

//Opakowanie
var objLetKnow = document.createElement('div');
objLetKnow.setAttribute('id','letknow');
objLetKnow.style.display = 'none';
objBody.appendChild(objLetKnow);

//Close button
var objLetKnowClose = document.createElement('a');
objLetKnowClose.setAttribute('href','#');
objLetKnowClose.setAttribute('id','close');
objLetKnowClose.onclick = function () {letKnowClose(); return false;}
objLetKnowClose.setAttribute('title','zamknij');
objLetKnowClose.innerHTML = "x";
objLetKnow.appendChild(objLetKnowClose);

//formularz
var objLetKnowForm = document.createElement('form');
objLetKnowForm.setAttribute('name','letknowform');
objLetKnowForm.setAttribute('method','get');
objLetKnowForm.onsubmit = function(){return false;}
objLetKnow.appendChild(objLetKnowForm);

//Input nadawca
var objLetKnowNadawca = document.createElement('input');
objLetKnowNadawca.setAttribute('type','text');
objLetKnowNadawca.setAttribute('name','nadawca');
objLetKnowNadawca.setAttribute('id','letknow1'); //ROZWIAZANIE ZASTĘPCZE
objLetKnowNadawca.setAttribute('value','Twój e-mail');
objLetKnowNadawca.onfocus = function () {if(this.value=='Twój e-mail' || this.value=='Nieprawidłowy e-mail!') this.value=''}
objLetKnowForm.appendChild(objLetKnowNadawca);

//Input adresat
var objLetKnowAdresat = document.createElement('input');
objLetKnowAdresat.setAttribute('type','text');
objLetKnowAdresat.setAttribute('name','adresat');
objLetKnowAdresat.setAttribute('id','letknow2'); //ROZWIAZANIE ZASTĘPCZE
objLetKnowAdresat.setAttribute('value','E-mail znajomego');
objLetKnowAdresat.onfocus = function () {if(this.value=='E-mail znajomego' || this.value=='Nieprawidłowy e-mail!') this.value=''}
objLetKnowForm.appendChild(objLetKnowAdresat);

//Input button
var objLetKnowButton = document.createElement('input');
objLetKnowButton.setAttribute('type','submit');
objLetKnowButton.setAttribute('name','letknowbutton');
objLetKnowButton.setAttribute('value','Powiadom');
objLetKnowButton.setAttribute('id','letknow3'); //ROZWIAZANIE ZASTĘPCZE
objLetKnowButton.onclick = function(){sendLetKnow(document.getElementById('letknow1').value,document.getElementById('letknow2').value); return false;} //LINIJKA ZMIENIONA, DOSTOSOWANA DO ROZWIĄZANIA ZASTĘPCZEGO
objLetKnowForm.appendChild(objLetKnowButton);
}


Jak widać zmieniłem skrypt, teraz korzysta z ID pól input, a nie z atrybutów NAME.
paziek
23.07.2008, 14:49:23
Nie nadużywaj tak setAttribute
Często są do tego właściwości obiektów/elementów.

Np.
el.setAttribute('type','submit'); => el.type='submit';
el.setAttribute('name','letknowbutton'); => el.name='letknowbutton';
el.setAttribute('value','Powiadom'); => el.value='Powiadom';
el.setAttribute('id','letknow3'); => el.id='letknow3';
to samo z title, href, method itp. itd.

Oczywiście nie każdy element ma wszystkie te własności, np. <span> nie będzie miał .value czy .href, a input nie będzie miał .method
Reszte obadaj sam.


Gdyby nadal nie działało pod IE, to zamień
var objBody = document.getElementsByTagName("body").item(0);
na
var objBody = document.getElementsByTagName("body")[0];
bo możliwe, że IE ma zbugowane HTMLCollection, jak wiele innych rzeczy.
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.