Autor Zpráva
kikinet
Profil
Zdravím,
cílem kódu níže má být zobrazení nového inputu po kliknutí na button. Bude to script pro odesílání fotek, a jelikož nevím kolik fotek bude chtít uživatel nahrát, chci tlačítko, které zobrazí pole pro vložení další fotky. JavaScript vidím dneska podruhé, něco jsem hledala, ale většinou to nefunguje a netuším proč.

<form method="POST" action="photo.php" enctype="multipart/form-data" id="form">
  <input name="photo" type="file" />
  <select name="group">
    <option value="1">Příroda</option>
    .........
  </select> 
  <input name="next" type="button" onclick="newinput()" value="next" />       
</form>

v hlavičce tohoto mám připojení script
function newinput(){
  document.getElementById("form").innerHTML = '<input name="photo" type="file"/>
                    <select name="group">
                     <option value="1">Příroda</option>
                      ......
                    </select>'
};

Napadá někoho co s tím?
Kubo2
Profil
kikinet:
Toto by malo fungovať spoľahlivo. V CSS som kvôli zalamovaniu riadkov nastavil
input[type=file], button {
  display: block;
}
kikinet
Profil
Kubo2:
Díky za odpověď, ale asi to moc nechápu. V podstatě asi jen jednu věc: co píšeš do action u formuláře? JS mám připojené externě
Kubo2
Profil
kikinet:
Do action by bolo zrejme vhodné napísať adresu (webovú adresu) nejakého serverového programu, ktorý má za úlohu nahrávať súbory resp. fotky na tvoj server.
1 rada: JS pripájaj až za resp. pod kódom formulára.

Ak ešte niečomu inému nerozumieš, v poriadku, len sa spýtaj, rád ti pomôžem.
kikinet
Profil
Kubo2:
No jasně, myslela jsem, že jsem nepochopila ten action, ale ve skutečnosti to bylo proto, že jsem se přepsala a napsala navíc 'tečku'. Už to funguje super :) Jen bych ještě potřebovala aby se zároveň s tím tlačítkem objevilo i to pole <option> ... </option>

Edit:
Ok, už jsem si s tím pohrála:
(function(){
  document.forms['photo-uploader'].elements['addmore'].onclick = function() {
    var newfile = document.createElement('input');
      newfile.type = 'file';
      newfile.name = 'photo[]';
      this.parentElement.insertBefore(newfile, this);
    var newfile = document.createElement('select');
      newfile.name = 'group[]';
      this.parentElement.insertBefore(newfile, this);
    var option = document.createElement('option');
      option.value = '1';
      option.text = 'Příroda';
      newfile.add(option);
    var option = document.createElement('option');
      option.value = '2';
      option.text = 'Lidé';
      newfile.add(option);
    var option = document.createElement('option');
      option.value = '3';
      option.text = 'Zvířata';
      newfile.add(option);
    var option = document.createElement('option');
      option.value = '4';
      option.text = 'Nezařazeno';
      newfile.add(option);
    return false;
  }
})()
1) Je i efektivnější způsob jak vložit option mezi select?
2) Pokud jsem to dobře pochopila, photo[] a group[] mi zajistí, že se tyto data budou posílat v array(). (asi?) Tím pádem při procházení souborů potom bude přiřazená hodnota optionu odpovídat nahrané fotce?
3) Už se mi nedaří hodit pod každý nově vložený input hodit čáru <hr /> pro lepší přehlednost
Kubo2
Profil
kikinet:
aby se zároveň s tím tlačítkem objevilo i to pole <option>
To je potom obdobné, akurát si naviac vytvoríš ešte aj element <select> (alebo ho naklonuješ). Stačí pridať niekoľko riadkov alebo kód skrátiť na tri riadky. Môže byť? ;-)
_es
Profil
kikinet:
Je i efektivnější způsob jak vložit option mezi select?
Je: Ajax přidání options do selectu nefunguje v IE

photo[] a group[] mi zajistí, že se tyto data budou posílat v array(). (asi?)
Vyžaduje to tak PHP - tie hranaté zátvorky, inak to je jedno.
Kubo2
Profil
kikinet:

Ad 1): Áno je, viď príspevok od _esa ([#7]).
Ad 2):
-- Ideš na to dobre, ale array si z toho vytvorí až interpret PHPka (ak, samozrejme, používaš PHPko).
-- K tej druhej otázke: približne tak to je, aj keď $_FILES (pole, ktoré si v PHPku drží informácie o súboroch poslaných na server) sa pri väčšom počte súborov prechádza trošku zložitejšie, vďaka extrémne úspornej štruktúre.
Ad 3): Stačí to <hr> pridať do toho prvého <label>u, ono sa to potom celé naklonuje -- viď moje riešenie (odkaz v [#6]).
kikinet
Profil
_es, Kubo2:
Skvělé, děkuji oběma. Tak teď ještě odzkoušet script na odesílání fotek a je to. Ještě jednou dík :)

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: