[JavaScript] Dynamiczne tworzenie kolejnych pól formularza, po kliknięciu [+] dodaje się owe pole <input> Opcje

[Athlan]

Cześć, generalnie chodzi mi o to, aby po naciśnięciu linku + dodawało się kolejne pole formularza, np:

[HTML] pobierz, plaintext 
<input type="text" name="pole[]"><br />
[HTML] pobierz, plaintext 

po naciśnięciu plusa trzykrotnie dynamicznie stworzą się kolejne nowe pola jedno pod drugim:

[HTML] pobierz, plaintext 
<input type="text" name="pole[]"><br />
<input type="text" name="pole[]"><br />
<input type="text" name="pole[]"><br />
<input type="text" name="pole[]"><br />
[HTML] pobierz, plaintext 

macie namiary na jakieś gotowe skrypty lub (lepiej (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) ) jak napisać takie coś samemu (chodzi o generalną strukturę kodu i funkcje, których powinienem użyć, no i w jaki sposób mają się tworzyć nowe pola bo document.write() nie działa (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) )?

pozdrawiam (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

[babejsza]

Pod ręką mam coś takiego, po przeróbkach jak znalazł (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

[HTML] pobierz, plaintext 
<script type="text/javascript">
 
i=0;
function wstaw() {  
    i++;  
    var tekst = document.createTextNode('pole '+i+': ');  
    var input = document.createElement('input' );      
    input.setAttribute('type', 'text');      
    input.setAttribute('name', 'p[]');	
    input.setAttribute('size', '4');  
    var br    = document.createElement('br');  
    var div   = document.createElement('div');      
    div.appendChild(tekst);      
    div.appendChild(input);      
    div.appendChild(br);  
    document.getElementById('pola').appendChild(div);
}
 
 
function wstaw2() {  
    i++;  
    var tekst = document.createTextNode('pole '+i+': ');  
    var input = document.createElement('textarea');            
    input.setAttribute('name', 'p[]');  
    input.setAttribute('rows', '3');
    input.setAttribute('cols', '100'); 
    var br    = document.createElement('br');  
    var div   = document.createElement('div');      
    div.appendChild(tekst);      
    div.appendChild(input);      
    div.appendChild(br);  
    document.getElementById('pola').appendChild(div);
}
</script>
[HTML] pobierz, plaintext 

w body:

[HTML] pobierz, plaintext 
<form action="index.php" method="post">
<p>
  <input type="button" value="input" onclick="wstaw()" />
  <input type="button" value="textarea" onclick="wstaw2()" />
</p>  
 
<p>
  <input type="submit" value="wyślij pola" />
</p>
</form>
[HTML] pobierz, plaintext 

[Aure]

Można też krócej:

Kod

function addField() {
formFieldsDiv = document.getElementById('formFields');
formFieldsDiv.innerHTML =  formFieldsDiv.innerHTML+'<input type="text" name="pole[]"><br />';
}

<div id="formFields">
<input type="text" name="pole[]"><br />
</div>

Ten post edytował Aure 31.07.2006, 12:57:25

[Athlan]

dodajmy DIV'a o id pola i śmiga jak należy... dzięki (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

EDIT:

@Aure: skorzystam z Twojego spodobu... thx (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

EDIT2:

A można jakoś usunąć wcześniej dane pole?

Ten post edytował Athlan 31.07.2006, 13:04:14

[web.admin.pl]

Szefie... moglbys wyslac to co zrobiles? gotowy skrypt? bo wlasnie chccialbym to samo zrobic. i powzorował bym sie na tym (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
pozdrowienia
web.admin.pl (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

[-Gość-]

Ja to mam tak:
w head:

[HTML] pobierz, plaintext 
function _show( strValue )
{
if ( strValue == "inny" )
{
document.getElementById( 'jakies_id' ).style.display = 'block';
}
else
{
document.getElementById('jakies_id').innerHTML = '';
document.getElementById( 'jakies_id' ).style.display = 'none';
}
}
[HTML] pobierz, plaintext 

a w body:

[HTML] pobierz, plaintext 
<select>
   <option value="inny" onclick="_show( this.value );" style="font-weight: bold; "> Inny </option>
</select>
<input type="text" id="jakies_id" size ="30" maxlenght="30" name="jakis_name" style="display: none;" value="Wpisz nazwisko wykladowcy" />
[HTML] pobierz, plaintext 

Teraz jak w select'cie wybierzesz na inny to pojawi sie nowy input. Oczywiscie mozesz to przerobic po swojemu.

[Athlan]

hmmm no tak... ale jak dodam nowe pole to się wartości wszytskich poprzednich kasują... jak to rozwiązać?

EDIT...

użyłem ten dłuższej wersji i wszystko gra (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Ten post edytował Athlan 31.07.2006, 13:27:27

[web.admin.pl]

tu jest link do mojego posta. mam tu podobny temat. jak mozecie to spojzcie moze mi pomozecie :*


http://forum.php.pl/index.php?showtopic=50852

[Athlan]

hmmm mam jeszcze pytanie do posta #2

jak mam multiple input type="file" i kilka pól wypelnionych to mi ne chce wyslac formularza po naciśnięcie submite (jeżeli chodzi o oczywiście badzIEwie (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) ). Pytanie: dlaczego i jak to naprawić?

pozdrawiam (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Ten post edytował Athlan 31.07.2006, 14:04:43