Forum PHP.pl

Chce zrobic dynamiczne pole formularza. Ogolnie wiem jak to zrobic i juz mi sie udalo jednak tworzac kolejne pola i klikajac dodaj nastepne, chailbym aby każde kolejne mi się podpisywalo pole1 pole2 pole3 itp
Aby wykonac tę czynnosc dodalem do mojego skryptu taki kod:

[PHP] pobierz, plaintext 
   i++;  
    var tekst = document.createTextNode('pole '+i+': ');
[PHP] pobierz, plaintext 

jednak przez to caly kod przestal dzialac? o co tu chodzi? gdy to kasuje dziala normalnie? Wydaje mi sie iz powinno inkrementowac i wyswietlac kolejne nazyw dlaczego to sie nie dzieje?


Skrypt formularza i js:

[PHP] pobierz, plaintext 
	  <div class="form-group">
        <label class="col-sm-3 control-label" for="cvv">Składniki(oddziel przecinkami):</label> 
        <div id="pliki" class="col-sm-9">
          <textarea class="form-control skladniki"  name="plik[]" placeholder="Message" rows="5"></textarea>
 
        </div>
      </div>  
	   <div class="form-group">
	    <input type="button" value="Załšcz kolejny plik" onclick="dodaj_element('pliki');" />
	    </div> 
[PHP] pobierz, plaintext 

[PHP] pobierz, plaintext 
<script type="text/javascript">
<!--
function dodaj_element(kontener){
    i++;  
    var tekst = document.createTextNode('pole '+i+': ');
	var znacznik = document.createElement('textarea');
	znacznik.setAttribute('type', 'text');
	znacznik.setAttribute('name', 'plik[]');
	znacznik.className = 'skladniki';
	var kontener = document.getElementById(kontener);
	kontener.appendChild(znacznik);
}
//-->
</script>
[PHP] pobierz, plaintext 

1. nie masz zadeklarowanej wartości i
2. i jest "zadejkarowane lokalnie w funkcji więc kolejne wywołania nie zwiększają i globalnie.

Zadeklaruj 'i' w przestrzeni globalnej (poza funkcją) i powinno zadziałać.

Poza tym sprawdzaj konsolę przeglądarki jaki błąd wywala.

-nie bardzo zmiana zmiennej na globalna nic nie zmienia
-ustalenie drugiej globalnej za wiele nie zmienia..
-konsola..hmm duzo bledow tam ale zwizaznych chyba nie tylko z tym a nie wszystkie umiem czytac

Poprawienie w ten sposob:

[PHP] pobierz, plaintext 
<script type="text/javascript">
<!--
 
function dodaj_element(kontener){
    var i;
	i++;  
    var tekst = document.createTextNode('pole '+i+': ');
	document.body.appendChild(tekst);
	var znacznik = document.createElement('textarea');
	znacznik.setAttribute('type', 'text');
	znacznik.setAttribute('name', 'plik[]');
	znacznik.className = 'skladniki';
	var kontener = document.getElementById(kontener);
	kontener.appendChild(znacznik);
 
}
//-->
</script>
[PHP] pobierz, plaintext 

Teraz problem w tym ze pola sie dodaja , wyswietla sie pole Nan Pole Nan .. pod calym kodem strony a nie obok kolejnego stworzonego pola(fizycznie ze tak powiem) da sie to zmienic?

No ok, dodawanie mi działa. Próbowałem zrobić jeszcze usuwanie tworzonych pol i tez jest problem. Prawdopodobnie dlatego ze
"$(document).ready(function() {" w żaden spsob nie odnosi sie do zawartosci funkcji wiec elementy takie jak znacznik,kontener,pliki sa niewidoczne poza nia? Prosil bym o wskazowke jak zrobic usuwanie pol formularza

Do kazdego pola jest robiony $('<a href="#" class="delfield">usuń</a>').insertBefore(znacznik); jakby przycisk? chodz nie wiem czy to dobra metoda..

To wstawianie pomimo ze dziala tez moglby ktos ocenic czy jest ok?

[PHP] pobierz, plaintext 
<script type="text/javascript">
<!--
var i = 1;
 
function dodaj_element(kontener){
 i++;    
    var tekst = document.createTextNode(' Nr. '+i+' ');
	var znacznik = document.createElement('textarea');	
 
	znacznik.setAttribute('type', 'text');
	znacznik.setAttribute('name', 'plik[]');
	znacznik.setAttribute('placeholder', 'Wpisz nazwe składnika oraz jego wymaganą ilość... ');
 
	znacznik.className = 'skladniki';
	var kontener = document.getElementById(kontener);
	kontener.appendChild(znacznik);
	$(tekst).insertBefore(znacznik);
	$('<a href="#" class="delfield">usuń</a>').insertBefore(znacznik);  	
}
 
 
$(document).ready(function() {
	$('a.delfield').live('click', function(){
                   pliki.removeChild(znacznik);
            });
}
//-->
</script>
[PHP] pobierz, plaintext 

Ten post edytował viamarimar 9.06.2015, 11:33:36

Usunąć można element znajdujący się za linkiem (nextElementSibling AFAIR)

Mam jeszcze jeden mały problem nie umiem naprawić inkrementacji po usunięciu dynamicznego pola, mógłby mi ktoś z tym pomoc?

Na 100% problem lezy tutaj:

[PHP] pobierz, plaintext 
function usun_element(x){
 
 var x = document.getElementById("xxx").nextElementSibling.remove(); 
 var x = document.getElementById("xxx").remove(); 
 i--;
}
[PHP] pobierz, plaintext 

i chyba trzeba zrobic cos w ten desen:

[PHP] pobierz, plaintext 
x.parentNode.removeChild(document.getElementById('xxx'+(i--)));
[PHP] pobierz, plaintext 

ale powyzszy kod nie dziala ;/ jak to zmodyfikowac?

[PHP] pobierz, plaintext 
<script type="text/javascript">
<!--
var i = 1;
 
function dodaj_element(){
 i++;    
 
	var child = document.createElement('input')	;	
	var parent = document.getElementById('skladniki');
 
	child.setAttribute('type', 'text');
	child.setAttribute('name', 'skladniki[]');
	child.setAttribute('id', 'xxx');
	child.setAttribute('placeholder', 'Wpisz nazwe składnika, podaj ilość i jednostkę miary.. ');	
	child.className = 'form-control';
 
 
	parent.appendChild(child);
$('<p class="marg2" >Składnik '+i+'</p>').insertBefore(child);
 
 
}	
 
function usun_element(x){
 
 var x = document.getElementById("xxx").nextElementSibling.remove(); 
 var x = document.getElementById("xxx").remove(); 
 i--;
}
 
//-->
</script>
	  <div class="form-group" id="s"> 
        <label class="col-sm-3 control-label">Składniki</label> 
 
        <div id="skladniki" class="col-sm-9"><p>Składnik 1</p>
           <input id="xxx" class="form-control" name="skladniki[]" placeholder="Wpisz nazwe składnika, podaj ilość i jednostkę miary.. " type="text"> 
        </div>
 
		<div class="col-sm-12 ">
	<!--   <input type="button" name="insertfield" value="dodaj" /> -->
		<button type="button" class="btn btn-primary btn-xs pull-right marg2 pad" onclick="dodaj_element();" /> Dodaj składnik </button>
		<button type="button" class="btn btn-danger btn-xs pull-right marg2 pad " onclick="usun_element(this);" /> Usuń składnik </button>
		 </div>
      </div> 
 
 
[PHP] pobierz, plaintext 

Ten post edytował viamarimar 9.06.2015, 22:27:16