ugrás a tartalomhoz

Form dinamikus bővítése

csomi · 2006. Jan. 16. (H), 00.30
Sziasztok!

Nem bírok a köv. problémával megbirkózni.
Van egy formom, alapban 1 db text mezővel, mellette egy button "+", amelyet ha megnyom a user, akkor a button onclick-je meghív egy js fgv-t, amely létrehoz egy újabb text mezőt, és így tovább. Szóval annyi input mező kell neki, ahány adatot fel akar vinni. Ja, meg jó lenne egy "-" button is, ha egyel több text mezőt kreált a user :)


itt a html kód:

<form name=f1 action=comp_create.php method=post>
<input type=text name=megnevezes1>
<input type=text name=ertek1>
<input type=button value= + name=onemore onclick="onemore_text()">
<input type=submit>
Szóval a onemore_text() scriptet hogy írom meg? A megnevezes1 és az ertek1 mezőnevekből is megnevezes2, 3, ... kellene az új textboxoknál

Remélem érthetően írtam le a problémát.
Ezzel próbálkoztam, de nem akarja az igazságot, mert hülye vagyok a JS-hez.:

function onemore_text()

{
document.f1.write("<input type=text name=megnevezes2>");
document.f1.write("<input type=text name=ertek2>");

}
Köszönettel: csomi
‹ divek egymáson JS-ből nyitott ablakba title beírása nem megy ›
 ■
1

huhh

Anonymous · 2006. Jan. 16. (H), 01.04
Ezt a "document.f1.write" utasítást mire alapozod? Honnan van?
Csak azért kérdezem, mert ilyen nincs.

Nézz körül inkább a getElementByID, createElement és társai környékén.

Gyulus
2

DOM vagy innerHTML

Jano · 2006. Jan. 16. (H), 01.55
Vagy ahogy azt előttem is mondták DOM függvényekkel operálj, az a legtisztább, vagy a nem szabványos de szinte minden böngésző által támogatott innerHTML tulajdonsággal. Az innerHTML-lel mondjuk hozzáadni nagyon egyszerű.

var inputNum = 2;

function oneMoreText() {
 var form = document.getElementsByName("f1")[0];
 inputNum++;
 var newLine = ""; 
 newLine += "<input type=\"text\" name=\"megnevezes"+inputNum+"\">";
 newLine += "<input type=\"text\" name=\"ertek"+inputNum+"\">";
 form.innerHTML += newLine;
}

function removeLast() {
 var node = document.getElementsByName("megnevezes"+inputNum)[0];
 node.parentNode.removeChild(node);
 node = document.getElementsByName("ertek"+inputNum)[0];
 node.parentNode.removeChild(node);
 inputNum--;
}
Nem teszteltem, de valami ilyesmi.
3

megoldva :)

csomi · 2006. Jan. 16. (H), 23.06
Köszönöm a tippeket.
Jano a Te megoldásod működik, csak üres sorokat hagy törlés után, amikkel nem tudok mit kezdeni.
Végül is találtam egy megoldást. Más mint a fentebb vázoltak, selectes, de nekem tökéletes így is. Fent hülyeséget írtam, de hát a JS nekem a szükséges rossz - a kódot nagyjából megértem, de magamtól nehezen boldogulok.
Még egyszer köszi! :)

<html>
<head>
<script type="text/javascript">

function init()
{
menu = document.forms[0].menu
for (x70; x<menu.options.length; x++)
menu.options[x].value = x+1
}

function ujelem()
{
sorszam=menu.options.length
elem= new Option(menu.form.szoveg.value, sorszam+1)
menu.options[sorszam]=elem
<!-- history.go(0)
}

function torol()
{
sorszam = menu.selectedIndex
menu.options[sorszam]=null
<!-- history.go(0)
}

function atnevez()
{
sorszam=menu.selectedIndex
menu.options[sorszam].text=menu.form.szoveg.value
}

</script>

</head>
<body onload="init()">
<center>
<form action=comp_create.php method=post>
Komponens neve: <Input type=text name=componens><br>
Értékei: <Input type=text name=szoveg>
<select name="menu">
<option>Listaelem1
<option>Listaelem2
<option>Listaelem3
</select>

<p>
<input type=button value="Komponens értékének átnevezése" onclick="atnevez()">
<p>
<input type=button value="Komponens értékének törlése" onclick="torol()">
<p>
<input type=button value="Új érték hozzáadása" onclick="ujelem()">
<p>
<input type=submit value=Elküld>
</form>
</center>
</body>
</html>