ugrás a tartalomhoz

Dinamikus input mező hozzáadása JavaScripttel

Cooty13 · 2009. Dec. 14. (H), 16.45
Szaisztok!
Egy olyan kis JS függvényt szeretnék írni, ami egy formhoz dinamikusan hozzáad egy újabb szövegbeviteli mezőt. Addig el is jutottam, hogy createElement-tel appenChild-dal hozzáadom az elemet, de azt is megszeretném oldalni, hogy a mező id-jéhez és name-jéhez mindig hozzáadjon egy számot hogy majd PHP-s feldolgozásnál is felismerhetők legyenek az újonnan hozzáadott form elemek.
Sajnos nem tudok sehogy se rájönni, hogy hogyan növeljem eggyel az attribútum értéke mögé írt számot. Már sok verziót kipróbáltam, de nem akar összejönni, biztos hogy valami irtózatos aprósággal van a baj.
Hálás lennék a segítségért, előre is köszi! :)


Itt a kód:
<html>
<head>
<title>&Uacute;j input mező hozz&aacute;ad&aacute;sa formhoz dinamikusan JS-el</title>
<style type="text/css">
input{display: block;
margin: 5px 0;
}
</style>
<script type="text/javascript" charset="utf-8">

function addField(fieldset){
var fields = fieldset;

for (i=1; i<=1; i++){
var x=1;
x++;
var newField = document.createElement('input');
newField.setAttribute('type', 'text');
newField.setAttribute('name', 'myinput'+x);
newField.setAttribute('id', 'my_input_'+x);
fields.appendChild(newField);
}
}

</script>
</head>
<body>
<form id="myform" action="" method="POST">
<fieldset id="myfieldset">
<input type="text" name="myinput" id="my_input">
</fieldset>
<a href="javascript: void(0);" title="m&eacute;g egy mező hozz&aacute;ad&aacute;sa" onclick="addField(document.getElementById('myfieldset') )"><small>Hozz&aacute;ad&aacute;s</small></a>

<input type="submit" name="mysubmit" id="my_submit" value="Mehet a mandula">
</form>
</body>
</html>


ui. Pontosan az a probléma, hogy az új input hozzáadásánál kap ugyan számot, de ez csak 2-ig növekszik (ami végül is logikus is, mert most úgy állítottam be a for ciklust, de nem tudom hova rakjam a ciklust hogy ténylegesen a setAttribute-ba írt "x" változó értékét növelje a függvény minden egyes meghívásakor.
‹ input file tallózás indítása js-ből JavaScript paraméterek nélküli függvény ›
 ■
1

hiba

ironwill · 2009. Dec. 14. (H), 17.57
Szia!
for (i=1; i<=1; i++){
var x=1;
x++;
var newField = document.createElement('input');
newField.setAttribute('type', 'text');
newField.setAttribute('name', 'myinput'+x);
newField.setAttribute('id', 'my_input_'+x);
fields.appendChild(newField);
}
}
Ez a ciklus egyről indul és egyig fut.. és belül az x-et minden ciklus kezdetekor egyre állítod és közvetlenül utánna növeled egyel.. tehát minden ciklusban maximum 2-ig növekedhet, bárhányszor is futna le a ciklus.

Az x-et a cikluson kívül kellene definiálnod..

Amúgy szerencsésebb a dinamikus formot dinamukusan kezelni:
Értsd: ha sok meződ van és mindnek ugyan azt a nevet állítod be, akkor a request-ből egy tömbként tudod kiszedni őket.

Java-ban pl.: request.getParameterValues()-al
Php-ban nem tudom ez pontosan milyen paranccsal oldható meg, ennek utánna kellene nézned.

üdv, Gábor
2

ez tetszett :D

leone92s · 2009. Dec. 14. (H), 22.01

for (i=1; i<=1; i++){
   var x=1;
   x++;
   var newField = document.createElement('input');
   newField.setAttribute('type', 'text');
   newField.setAttribute('name', 'myinput'+x);
   newField.setAttribute('id', 'my_input_'+x);
   fields.appendChild(newField);
}
Ez egy rendkívül jó script :D végülis kicsit túlbonyolítottad a "szekvencia" fogalmát :D

mindegy, akkor már ha jót derültem rajta akkor segítek:

var x=1;
for (i=1; i<=1; i++){
   var newField = document.createElement('input');
   newField.setAttribute('type', 'text');
   newField.setAttribute('name', 'myinput'+x);
   newField.setAttribute('id', 'my_input_'+x);
   fields.appendChild(newField);
   x++;
}
De ez csak az egyik lehetőség, szerintem ez mégjobb:

for (i=1; i<=1; i++){
   var newField = document.createElement('input');
   newField.setAttribute('type', 'text');
   newField.setAttribute('name', 'myinput'+i);
   newField.setAttribute('id', 'my_input_'+i);
   fields.appendChild(newField);
}
ugyanazt éred el mind a kettővel, de szerintem a for ciklusból azt a i<=1-et légyszives módosítsd, mert ezekkel a feltételekkel azt éred el mintha csak simán 

var newField = document.createElement('input');
newField.setAttribute('type', 'text');
newField.setAttribute('name', 'myinput1');
newField.setAttribute('id', 'my_input_1');
fields.appendChild(newField);
}
sort írnál!

bb sl
3

köszi a segítséget - kicsit másképp

Cooty13 · 2009. Dec. 17. (Cs), 18.17
Elsőként köszi a segítséget!
Igazság az eredeti koncepció az lett volna, hogy minden egyes input hozzáadásánál eggyel növekszik a name, illetve id attribútumokhoz írt szám.

Rájöttem, hogy hiába írok bármit a for ciklusba, mivel a ciklusváltozó be van égetve és a ciklus minden függvényhíváskor - jelen esetben a "még egy mező hozzáadása feliratú" linkre történő kattintáskor - lefut, a for is mindig egytől indul és x-ig tart.
Ráadásul jó lenne, ha valahogy lekorlátozhatnám, hogy hány mezőt adhat hozzá a user (vicces is lenne valaki rajta felejti az egeret és belenyom 200 új inputot :D ).

Szóval a következőt találtam ki:
<script type="text/javascript" charset="utf-8">

function addField(fieldset, changer){
	var fields = fieldset;
	var x = changer.value;

		for (i=1; i<=x; i++){
		var newField = document.createElement('input');
		newField.setAttribute('type', 'text');
		newField.setAttribute('name', 'myinput'+i);
		newField.setAttribute('id', 'my_input_'+i);
		fields.appendChild(newField);
		}
}

</script>
</head>
<body>
<form id="myform" action="" method="POST">
<fieldset id="myfieldset">
<input type="text" name="myinput" id="my_input">
</fieldset>
<label for="increment">Ennyi mez&#337;t adjunk hozz&aacute;:</label>
<select id="increment" onchange="addField(document.getElementById('myfieldset'),this)">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
	<option value="10">10</option>
</select>
<input type="submit" name="mysubmit" id="my_submit" value="Mehet a mandula">
</form>
Persze ez sem tökéletes, mert ha újra kiválasztunk egy számot a szelekt-ben akkor megint elölről kezdi el hozzáadni a dolgokat - de lehetne mondjuk azt csinálni hogy meghívás után elrejtem a selectet, vagy a függvény meghívásakor kitörlöm a létező plussz mezőket (gondolom van erre is DOM függvény JS-ben?!) és újraindítom az egészet.

Mellesleg ez csak demó, amit amolyan, "na vajon tudok-e ilyet csinálni?" illetve "egyszer majd csak jó lesz még valamire" alapon indítottam, szóval nem kell tökéletesnek lennie :)

Mellesleg ironwill-nek igaza lehet, abban hogy szerveroldali feldolgozáskor nem feltétlenül kell minden inputnak egyedi azonosító.

Mindenesetre még egyszer kösz!
4

display: none

leone92s · 2009. Dec. 17. (Cs), 18.45
Szia!

így tudod megoldani:

<div id="mezohozzaado">
<label for="increment">Ennyi mez&#337;t adjunk hozz&aacute;:</label> 
<select id="increment" onchange="addField(document.getElementById('myfieldset'),this)">  
    <option value="1">1</option>  
    <option value="2">2</option>  
    <option value="3">3</option>  
    <option value="4">4</option>  
    <option value="5">5</option>  
    <option value="6">6</option>  
    <option value="7">7</option>  
    <option value="8">8</option>  
    <option value="9">9</option>  
    <option value="10">10</option>  
</select>
</div>
és a javascript:

function addField(fieldset, changer){  
    var fields = fieldset;  
    var x = changer.value;  
  
        for (i=1; i<=x; i++){  
        var newField = document.createElement('input');  
        newField.setAttribute('type', 'text');  
        newField.setAttribute('name', 'myinput'+i);  
        newField.setAttribute('id', 'my_input_'+i);  
        fields.appendChild(newField);  
        }
    document.getElementById('mezohozzaado').style.display='none'; 
}
Ennyi lenne.

bb sl
5

még jobb

Cooty13 · 2009. Dec. 17. (Cs), 18.54
Igen, én is erre gondoltam eredetileg (csak már lusta voltam azt az egy sort beleírni).
Azonban most megtaláltam megoldást mégpedig úgy, ahogy eredetileg akartam, olvassátok el érdekes, és pofon egyszerű:
Add and Remove HTML elements dynamically with Javascript
6

én

herdsman · 2009. Dec. 17. (Cs), 21.51
a minap kellett nekem is egy hasonlót problémát megoldanom. Én így csináltam

itt a form:

<form id="addphoneform" method="post">
	
	<div class="cf">
		<div class="divlabel">
			<label for="subsciber">Név:</label>
		</div>
		<div class="divinputfield">
			<input type="text" id="subscriber" name="subscriber">
		</div>
	</div>
	
	
	
	<div class="telnumfields cf" id="telnumfield1">
		<div class="divlabel">
			<label for="phonenumber">Telefonszám:</label>
		</div>
		<div class="divinputfield">
			<input type="text" id="phonenumber" name="phonenumber[]">
			<input type="radio" name="telnumbertype0" value="1" checked="checked" >mobil
			<input type="radio" name="telnumbertype0" value="2">vezetékes
			<input type="radio" name="telnumbertype0" value="3">fax 
		</div>
	</div>
	
	<br>
	<div>
		Akarsz még ehhez a névhez további telefonszámot megadni?
		<input type="button" id="addmorenumber" name="addmorenumber"  onclick="addmorenum();" value="igen">
	</div>
	<br>
	<input type="hidden"  name="act" value="doaddnewitem">
	<input type="submit" id="addthemtodatabase" name="addthemtodatabase" value="Hozzáadom a telefonkönyvhöz">
	
</form>
és itt a "dinam" mező hozzáadás és a törlése is

function addmorenum()
{
	//hány telefonszám mező van már a formon  
	var phoneFieldsAlready= $$('.telnumfields').length;
	
	var clonedTelNumField= $('telnumfield1').cloneNode(true);
	clonedTelNumField.id= ("telnumfield"+ (phoneFieldsAlready+1)); 
	
	
	//kitöröljük az új telefonszám mezőt
	clonedTelNumField.firstDescendant().next().down().clear();

	//új nevet kapnak a radio -k 
	clonedTelNumField.firstDescendant().next().down().next().setAttribute('name','telnumbertype' + phoneFieldsAlready );
	clonedTelNumField.firstDescendant().next().down().next().next().setAttribute('name','telnumbertype' + phoneFieldsAlready );
	clonedTelNumField.firstDescendant().next().down().next().next().next().setAttribute('name','telnumbertype' + phoneFieldsAlready );
	//az első legyen default	
	clonedTelNumField.firstDescendant().next().down().next().checked = true;
	clonedTelNumField.firstDescendant().next().down().next().next().checked = false;
	clonedTelNumField.firstDescendant().next().down().next().next().next().checked = false;
	
	//a beviteli sor törlése gomb
	
	//először is töröljük, ha már van
	if (phoneFieldsAlready >1)
	{
		$("butt_deleteThisLine").remove();
	}
	
	
	try{
		var butt_deleteThisLine = document.createElement('<input id ="butt_deleteThisLine" class="butt_deleteThisLine" type="button"  title="Ez a telefonszám nem kell" onclick="deleteThisRow(this)" >'   );
		
	}catch(Error){
		var butt_deleteThisLine = document.createElement('input');
		butt_deleteThisLine.writeAttribute('id', 'butt_deleteThisLine');
		butt_deleteThisLine.writeAttribute('class', 'butt_deleteThisLine');
		butt_deleteThisLine.writeAttribute('type', 'button');
		butt_deleteThisLine.writeAttribute('title', 'Jááááj, nem kell ennyi sor!');
		butt_deleteThisLine.writeAttribute('onclick','deleteThisRow(this)')
	}
	
	
	
	clonedTelNumField.appendChild(butt_deleteThisLine);
	
	//beszúrjuk a végére
	$('telnumfield'+phoneFieldsAlready).insert({  after: clonedTelNumField});
	
}

function deleteThisRow (deleteButton){
	
	//"There can be only one" - Highlander	
	
	if ($$('.telnumfields').length > 2) {
		$(deleteButton.id).up().previous().appendChild(deleteButton);
		$(deleteButton.id).up().next().remove();
	}
	else{
		$(deleteButton.id).up().remove();
	}
	
}
persze prototype-os fgv-k vannak benne