dinamicko pojavljivanje slijedeceg textfielda

[ cronewbie @ 05.05.2007. 08:28 ] @

Pozdrav,

Imam zadatak napraviti registracijsku formu ali ne u konvencionalnom obliku predefinirah xy polja nego malo drugaciju. Ideja je da user koji popunjava registracijski form ima neke textfieldove unaprijed prezentirane i koje mora popuniti (tipa ime, prezime, adresa i slicno), ali poslije toga dolazim do jednog zanimljivog slucaja, a taj je da bi trebao naznaciti cime se njegova firma bavi. E sad, tu se javlja moj problem radi toga sto se neka firma ne mora baviti iskljucivo jednom djelatnoscu nego s njih vise. Ja bih zelio napraviti to u stilu da mu se prikaze nesto tipa:

Upisite svoju djelatnost:_______________ i pokraj toga nesto tipa "dodaj još jednu", nakoj cega bi se klikom na taj link "dodaj jos jednu" jednostavno pojavio ispod prve jos jedan textfield za upis nove djelatnosti. Limitirao bih sve to na nekih max. 15 "dodaj jos jednu" textfieldova. Kako bi mi bilo najbolje da to napravim? Da li je moguce da se to radi preko ugnjezdjenih <div>-ova? Nesto tipa:
<div1>
<div2>
<div3>
....
</div15>
</div14>
...
</div1>?

Postoji li neki elegantniji nacin? Bolji, prakticniji?

[ 1r0nM4n @ 05.05.2007. 08:36 ] @

To ti je čist javascript..

[ cronewbie @ 05.05.2007. 08:47 ] @

A da li mogu mozda dobiti negdje primjer takvog javascripta?

[ sale83 @ 05.05.2007. 08:53 ] @

Evo na brzinu:

Code:

<script type="text/javascript">
    var i = 1;
function addInput()
{
    var input = document.getElementById("txt");
    input.innerHTML += "txtBox : " + i + " <input type=\"text\" name=\"txtBox\" value=\"\"/><br>";
    i++;
}
</script>

txtBox : 0 <input type="text" name="txtBox" id="txtBox" value=""/><br>
<div id="txt"></div>
<a href="#" onClick="addInput(); return false;">Dodaj</a>

Limitaciju odradi sam :)

Poz
sale

[ cronewbie @ 05.05.2007. 09:40 ] @

Da, to je princip koji sam tražio. Ali nisam neki javascripter, a ovo tvoje rješenje radi, ali kada upisujem novi input u svako slijedece polje, text ostaje samo za prvi textfield, dok kod ostalih nestaje dodavanjem svakog slijedeceg fielda?

[ Miroslav Ćurčić @ 05.05.2007. 10:53 ] @

A da ti njemu staviš textarea-u pa da delatnosti budu razdvojene po redovima ?

[ sale83 @ 05.05.2007. 11:56 ] @

A verovatno koristis Firefox pa ti se gube podaci :)

Ok
Evo drugu resenje sa gde cuvas vrednosti u nizu:

Code:

<script type="text/javascript">

var arrValue = new Array(0);

function addInput() {
   arrValue.push("");
   document.getElementById('txt').innerHTML="";

  for (i=0;i<arrValue.length;i++)
     {
var input="<input type='text' id='txtBox "+ i +"' onChange='javascript:saveValue("+ i +",this.value)' value='"+ arrValue[i] +"'><br>";

    document.getElementById('txt').innerHTML+=input;
    }

}

function saveValue(id,value) {
  arrValue[id]=value;
}

</script>

<input type="text" name="txtBox" id="txtBox" value=""/><br>
<div id="txt"></div>
<a href="javascript:addInput()">Dodaj</a><br>

Poz
sale

PS- Pa ovo treba da se prebaci u JS lol :)

[ Pavleg @ 05.09.2007. 01:20 ] @

Meni baš ova skripta treba a nisam vešt sa Javaskriptom. Skripta radi OK sa text inputima.
Ali meni treba da se klikom na 'dodaj još' pojave 'textarea' i 'input file' zajedno. Prepravkama gornje
skripte sam to i omogućio ali nisam uspeo da nateram da se čuvaju vredosti prethodnih polja kada se pojave nove.
Kako bi se to moglo izvesti?

[ noviKorisnik @ 05.09.2007. 09:22 ] @

Code:
<button id="dodavac" onclick="dodajPolja (); return false;">Dodaj Polja</button>
<script>
var poljaCount = 0;
var poljaMax = 5;
function dodajPolja () {
    if (poljaCount < poljaMax) {
        var novi = document.createElement ('div');
        var dod = document.getElementById ('dodavac');
        novi.innerHTML = "text <input type=\"text\" name=\"txt[]\" /><br />";
        novi.innerHTML += "area <textarea name=\"area[]\"></textarea><hr />";
        dod.parentNode.insertBefore (novi, dod);
        poljaCount++;
    } else alert ('Nema vise dodavanja, ispunjen limit : ' + poljaCount);
}
dodajPolja ();
</script>

[ Pavleg @ 05.09.2007. 11:39 ] @

To je to

Veliko hvala!

[ bigguy @ 12.02.2008. 08:16 ] @

da ne bih otvarao novu temu, ovde cu pokusati da dobijem odgovor. kao i korisnik koji je otvorio ovu temu nisam vest sa js ali mi treba nesto slicno ovome. naime, nesto sam prilagodio sebi, limitirao na 1 polje i izbacio text polje, i koristim sa radio dugmadima umesto sa obicnim dugmetom. sve radi ali meni treba da se novo polje pojavi ispod svih radio dugmadi, a ne odmah ispod ili iznad pritisnutog radio dugmeta, da li je to moguce? i jos nesto, posto je varijanta takva da ne treba biranjem svakog radio dugmeta da se pojavi novo polje kako obrisati polje koje je napravljeno nakon npr. pogresno izabranog radio dugmeta?

[ noviKorisnik @ 19.02.2008. 09:38 ] @

Neće ti biti teško što kasnim nedelju dana s odgovorom? Bio sam na višegodišnjem odmoru, sorry :-)

Čuj, svaki se jezik uči uz čitanje dokumentacije. Pretraži onda malo net za ključne reči insertBefore (to se koristilo u prethodnom primeru) i appendChild (to bi ti možda pomoglo prema opisu koji navodiš).

Aj poz.

[ Aleksandar Ružičić @ 19.02.2008. 23:30 ] @

ili koristi jQuery i append/prepend i slicne funkcije :)

[ bigguy @ 20.02.2008. 09:23 ] @

hvala, uspeo sam naci nesto na mrezi, pa sam iskombinovao, na osnovu ovog primera i toga sto sam nasao. trenutno mi nije kod pri ruci ali cim stignem cu ubaciti pa ocenite kako kombinujem

i jos nesto kada sam to sve probao u ie nije radilo bas kako treba dok u ff funkcionise onako kako sam zamislio...

[ Aleksandar Ružičić @ 20.02.2008. 20:22 ] @

pa daj kod pa cemo da vidimo gde je problem

[ bigguy @ 25.02.2008. 20:22 ] @

malo se oduzilo ali evo koda:

Code:

<script>
function addElement() {
  var ni = document.getElementById('myDiv');
  var newdiv = document.createElement('div');
  var divIdName = 'myDiv1';
  newdiv.setAttribute('id',divIdName);
  newdiv.innerHTML = '<span style=\'float: left; width: 250px; text-align: left; font: bold 12px verdana; color:#666; \'>textarea: <textarea cols="30" rows="5" name=\"text\"></textarea></span>';
  ni.appendChild(newdiv);
}
function removeElement(divNum) {
  var d = document.getElementById('myDiv');
  var olddiv = document.getElementById(divNum);
  d.removeChild(olddiv);
}
function add() {
    if (document.getElementById('myDiv1'))
    {
        removeElement('myDiv1');
    }
    addElement();
}
</script>

<span class='label'><input type="radio" name="odgovor" value="radio" onchange="add();"> Radio</span><br><br>
<span class='label'><input type="radio" name="odgovor" value="checkbox" onchange="add();"> Checkbox</span><br><br>
<span class='label'><input type="radio" name="odgovor" value="text" onchange="removeElement('myDiv1');"> Text</span><br><br>
<div id="myDiv"></div>

e sad zasto ie ne radi isto sto i ff?