Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][PHP]Powielanie inputa file + usuwanie
Forum PHP.pl > Forum > Przedszkole
miras
Witam, mam kod, który po naciśnięciu buttona dodaje mi nowy element <input type="file"/> - wszystko gra i jest ok, natomiast potrzebuję dodać do tego jeszcze opcję "usuń" chodzi mi o usuwanie tego dodanego inputa jeżeli ktoś doda go przez pomyłkę..


  1. <script type="text/javascript">
  2. function dodaj_element(kontener){
  3. var znacznik = document.createElement('input');
  4. znacznik.setAttribute('type', 'file');
  5. znacznik.setAttribute('name', 'file[]');
  6. znacznik.className = 'upload';
  7. var kontener = document.getElementById(kontener);
  8. kontener.appendChild(znacznik);
  9. }
  10. </script>
  11.  
  12. <input type="button" value="Załącz plik" onclick="dodaj_element('pliki');" />
  13.  
miras
  1. function domRemove(id) {
  2. var elem = document.getElementById(id);
  3. domPurge(elem);
  4. return elem.parentNode.removeChild(elem);
  5. }


rozumiem, że ta funkcja odpowiada za usuwanie niechcianych inputów, ale przecież przy każdym inpucie trzeba jeszcze jakoś generować przycisk, po naciśnięciu którego input zniknie, jakiś pomysł?
trueblue
Utwórz <div> w nim <input> i przycisk do usuwania. Cały <div> doklej za ostatni <div>. Dodaj przyciskowi zdarzenie, w którym pobierzesz rodzica przycisku (<div>) i usuniesz go.
miras
Czyli mam zrobić coś takiego: i powielać to?

  1. <div class="inputy">
  2. <input type="file" name="test"/>
  3. <button id="usun">Usuń</button>
  4. </div>


trochę nie łapie :/
trueblue
id musi być unikalne.
Tak, a na akcję kliknięcia <button> usuwasz jego rodzica, czyli <div.inputy>
miras
Ok, jeszcze pytanko z tym id unikalnym, <button id="usun[]">usun</button> coś takiego wypali?
trueblue
id nie może zawierać nawiasów, a nawet jakby, nadal nie byłoby unikalne.
Dodawaj tam po prostu usun+kolejny numer, a kolejny numer to będzie liczba dodanych już <div.inputy> +1.

EDIT: Po co Ci id w buttonie?
miras
żeby wiedzieć, który div mam usunąć..
trueblue
Zawsze rodzica <button>, id jest tu niepotrzebne.
http://jsfiddle.net/cf3pzoad/
miras
a mógłbyś mi jeszcze podpowiedzieć jak ten kod - poprawić, żeby tworzył, a nie powielał tą klasę input a w niej type="file" i button do usuwania?


  1. function dodaj_element(kontener){
  2. var znacznik = document.createElement('input');
  3. znacznik.setAttribute('type', 'file');
  4. znacznik.setAttribute('name', 'file[]');
  5. znacznik.className = 'upload';
  6. var kontener = document.getElementById(kontener);
  7. kontener.appendChild(znacznik);
  8. }
trueblue
Nie rozumiem.
Chcesz żeby tworzył <div.inputy> z elementami w środku?
miras
tak, wcześniejszy nasz zamysł był taki, żeby utworzyć

  1. <div class="inputy">
  2. <input type="file" name="test"/>
  3. <button>Usuń</button>
  4. </div>


a potem to powielać, a ja bym wolał, żeby tego nie powielać tylko tworzyć po prostu w js, nie wiem czy nie wymyślam za dużo, ale po prostu będę miał o wiele mniej roboty jak nie będzie trzeba robić powielania (nie pytajcie dlaczego smile.gif )
trueblue
Nie wiem dokładnie co masz na myśli.
http://jsfiddle.net/kr2yy968/
miras
Tak, dokładnie o to mi chodziło, tylko jest teraz problem z usuwaniem - nie usuwa rekordów a po kliknięciu "usuń" przeładowuje się strona..

  1.  
  2. $(document).ready(function(){
  3. $('div.inputy button').click(function(e){
  4. $(this).parent().remove();
  5. });
  6. });
  7. function dodaj_element(kontener) {
  8. var div = document.createElement('div');
  9. div.setAttribute('class', 'inputy');
  10. var znacznik = document.createElement('input');
  11. znacznik.setAttribute('type', 'file');
  12. znacznik.setAttribute('name', 'file[]');
  13. znacznik.className = 'upload';
  14. div.appendChild(znacznik);
  15. var znacznik = document.createElement('button');
  16. znacznik.innerHTML='usuń';
  17. div.appendChild(znacznik);
  18. var kontener = document.getElementById(kontener);
  19. kontener.appendChild(div);
  20. }
  21. document.getElementById('dodaj').addEventListener('click', function (e) {
  22. e.preventDefault();
  23. dodaj_element('kontener');
  24. });
  25.  
trueblue
Kod, który podałem dotyczy usuwania istniejących elementów, a nie dodawanych dynamicznie.

http://jsfiddle.net/kr2yy968/1/

P.S. Polecam Ci zapoznanie się z jQuery.
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.