dinamicko pojavljivanje slijedeceg textfielda

dinamicko pojavljivanje slijedeceg textfielda 05.05.2007. u 08:28 · pre 237 meseci #1

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?

Re: dinamicko pojavljivanje slijedeceg textfielda 05.05.2007. u 08:36 · pre 237 meseci #2

To ti je čist javascript..

Re: dinamicko pojavljivanje slijedeceg textfielda 05.05.2007. u 08:47 · pre 237 meseci #3

A da li mogu mozda dobiti negdje primjer takvog javascripta?

Re: dinamicko pojavljivanje slijedeceg textfielda 05.05.2007. u 08:53 · pre 237 meseci #4

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

Potpis

Sto mozes danas ne ostavljaj za sutra!

Re: dinamicko pojavljivanje slijedeceg textfielda 05.05.2007. u 09:40 · pre 237 meseci #5

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?

Re: dinamicko pojavljivanje slijedeceg textfielda 05.05.2007. u 10:53 · pre 237 meseci #6

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

Potpis

_{"The quieter you become, the more you are able to hear."}
Blog | PowerCMS

Re: dinamicko pojavljivanje slijedeceg textfielda 05.05.2007. u 11:56 · pre 237 meseci #7

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 :)

Potpis

Sto mozes danas ne ostavljaj za sutra!

Re: dinamicko pojavljivanje slijedeceg textfielda 05.09.2007. u 01:20 · pre 232 meseci #8

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?

Re: dinamicko pojavljivanje slijedeceg textfielda 05.09.2007. u 09:22 · pre 232 meseci #9

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>

Potpis

BoxUp
interesantna logička igra
Monty Hall paradoks - interaktivni demo

Re: dinamicko pojavljivanje slijedeceg textfielda 05.09.2007. u 11:39 · pre 232 meseci #10

To je to

Veliko hvala!

Re: dinamicko pojavljivanje slijedeceg textfielda 12.02.2008. u 08:16 · pre 227 meseci #11

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?

Re: dinamicko pojavljivanje slijedeceg textfielda 19.02.2008. u 09:38 · pre 227 meseci #12

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.

Potpis

BoxUp
interesantna logička igra
Monty Hall paradoks - interaktivni demo

Re: dinamicko pojavljivanje slijedeceg textfielda 19.02.2008. u 23:30 · pre 227 meseci #13

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

Potpis

rafforum.rs - Forum Računarskog Fakulteta

Re: dinamicko pojavljivanje slijedeceg textfielda 20.02.2008. u 09:23 · pre 227 meseci #14

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...

Re: dinamicko pojavljivanje slijedeceg textfielda 20.02.2008. u 20:22 · pre 227 meseci #15

pa daj kod pa cemo da vidimo gde je problem

Potpis

rafforum.rs - Forum Računarskog Fakulteta

Re: dinamicko pojavljivanje slijedeceg textfielda 25.02.2008. u 20:22 · pre 227 meseci #16

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?

Srodne teme