Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Dynamiczne dodawanie pól formularza

Tworzenie dynamicznych stron internetowych z zastosowaniem JavaScript, jQuery, Ajax. Dowiedz się jak to zrobić, znajdź rozwiązania swoich problemów.

Dynamiczne dodawanie pól formularza

Post 19.06.2007, 22:57:58

Witam,
Otóż napisałem skrypt, który po wypełnieniu pól< input type=file> miał dodawać następne. Działa on na Operze i Firefoxie natomiast nie w IE. Proszę o pomoc... :P
Kod: Zaznacz cały
var LastInput=0, EmptyInput=0;

function AddFile()
{
    var tmp, tmp2, files, new_input;
    if(this.name.indexOf("file_")==0) { inputid = this.name.replace("file_", ""); tmp = this; }
    else { inputid = 0; tmp = document.getElementsByName("file_0")[0]; }
    if(tmp && tmp.value=='' && inputid!=EmptyInput)
    {
        tmp2 = document.getElementsByName("file_"+EmptyInput)[0];
        files = document.getElementById("files");
        //alert(tmp2);
        if(files && tmp2) { files.replaceChild(tmp, tmp2); }
        if(LastInput!=EmptyInput)
       {
           tmp2 = document.getElementsByName("file_"+LastInput)[0];
           if(tmp2)
           {
                   tmp2.setAttribute("name", "file_"+EmptyInput);
                   if(LastInput==inputid) inputid = EmptyInput;
           }
        }
        EmptyInput = inputid;
        --LastInput;
    }
    else if(tmp && tmp.value!='' && inputid==EmptyInput)
    {
        ++LastInput;
        EmptyInput = LastInput;
        new_input = document.createElement("input");
       new_input.setAttribute("type", "file");
       new_input.setAttribute("name", "file_"+LastInput);
       new_input.className = "textbox";
       new_input.onchange = AddFile;
       new_input.style.width = "400";
       new_input.style.margin = "2px";
       new_input.style.display = "block";
       files = document.getElementById("files");
       if(files) files.appendChild(new_input);
    }
}


Problem tkwi jak widze w tym, że przeglądarka nie znajduje pustego pola ("file_"+EmptyInput) w lini 10.
Pozdrowienia i proszę o szybką odpowiedź...

P.S.
Kod formularza:
Kod: Zaznacz cały
<form method="post" enctype="multipart/form-data" onsubmit="document.getElementById('uploading').style.display='';">
<input type="hidden" name="action" value="upload">
<input type="hidden" name="dir" value="">
<div id="files">
<input type="file" name="file_0" class="textbox" onchange="AddFile();" style="width:400;margin:2px;display:block;">
</div>
<input type="submit" value="Załaduj" class="button"> <input type="button" value="Zamknij" class="button" onClick="window.close();">
</form>
rafalh
Posty: 10
Dołączył(a): 19.06.2007
Lokalizacja: Warszawa

Re: Dynamiczne dodawanie pól formularza

Post 19.06.2007, 23:49:26

niezagłębiając się w kod zbytnio [bo czasu mam mało] może gotowiec innego typu Ci pomoże [nie wiem czy o to chodzi]:

formularz:
Kod: Zaznacz cały
<form method="post" enctype="multipart/form-data" onsubmit="document.getElementById('uploading').style.display='';">
<input type="hidden" name="action" value="upload">
<input type="hidden" name="dir" value="">
<div id="files">
<input type="file" name="file_0" class="textbox" style="width:400;margin:2px;display:block;">
</div>
<input type="submit" value="Załaduj" class="button"> <input type="button" value="Zamknij" class="button" onClick="window.close();"> <input type="button" value="dodaj +" onclick="addInput('files')">
</form>

JS:
Kod: Zaznacz cały
i=1;
function addInput(warstwa) {
   document.getElementById(warstwa).innerHTML += '<input type="file" name="file_'+i+'" class="textbox" style="width:400;margin:2px;display:block;">';
   i++;
}
Avatar użytkownikabimas
Maciej Bimek

Posty: 5974
Dołączył(a): 22.01.2005
Lokalizacja: Poznań

Post 20.06.2007, 13:59:31

Opcja z przyciskiem "Dodaj" mnie nie satysfakcjonuje. :P:P:P
Pozdro
rafalh
Posty: 10
Dołączył(a): 19.06.2007
Lokalizacja: Warszawa

Post 20.06.2007, 19:39:02

rafalh napisał(a):Opcja z przyciskiem "Dodaj" mnie nie satysfakcjonuje. :P:P:P
Pozdro
to zmień na inną opcję... funkcję masz... umieść ją tam gdzie chcesz...

Pozdrawiam
Avatar użytkownikabimas
Maciej Bimek

Posty: 5974
Dołączył(a): 22.01.2005
Lokalizacja: Poznań

Post 20.06.2007, 20:27:48

Ten kod zanlazłem już wcześniej ale wolałem żeby skrypt dodawał pola jak je wypełnisz... Pozatym chciałbym rozwiązać ten problem aby się czegoś nauczyć i nie popełniać wiecej takich błędów w przyszłości... Więc nie dawaj mi gotowców, które działają nie tak jakbym chciał :P
Pozdro
rafalh
Posty: 10
Dołączył(a): 19.06.2007
Lokalizacja: Warszawa

Post 20.06.2007, 20:41:12

rafalh napisał(a):Ten kod zanlazłem już wcześniej ale wolałem żeby skrypt dodawał pola jak je wypełnisz...
to po prostu zamień swoją funkcję na moją w inpucie...
Pozatym chciałbym rozwiązać ten problem aby się czegoś nauczyć
proszę bradzo, nie bronię, ale IMO lepszym rozwiązaniem byłoby uzyskanie mniejszego kodu [znacznie mniejszego]
i nie popełniać wiecej takich błędów w przyszłości...
pierwszym IMO błędem jest przerost treści nad funkcjonalnością.. to tak jak byś pisal tabelki + CSS zagnieżdzony w HTMLu.. efekt osiąnięty... ale jakim kosztem...
Więc nie dawaj mi gotowców, które działają nie tak jakbym chciał :P
nie trudno pozmieniać.. wystarczy zmienić miejsce wywołania funkcji

Pozdrawiam
Avatar użytkownikabimas
Maciej Bimek

Posty: 5974
Dołączył(a): 22.01.2005
Lokalizacja: Poznań

Post 20.06.2007, 21:53:24

Tylko że ten kod nie tylko dodaje nowe pola gdy wypełnisz poprzednie ale i usuwa jak usuniesz treść. Pozatym czy ktoś na tym forum mi powie czemu to działa na Operze i FF a na IE nie?
Pozdro
rafalh
Posty: 10
Dołączył(a): 19.06.2007
Lokalizacja: Warszawa


Powrót do JavaScript


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 6 gości

Hosting, Domeny, SSL

Subskrypcja

Mamy 50698 zarejestrowanych użytkowników.
Najnowszy użytkownik: m1kie


Nasi użytkownicy napisali:

  • 936098 wiadomości
  • w 246727 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)