ugrás a tartalomhoz

Új option felvitele

vargarichard · 2009. Jún. 14. (V), 04.29
Nos a kérdésem a következő:
Hogyan tudok új option hozzáadni a formhoz attól függően hogy az optionben mire kattint az illető?

Nos én így kezdtem el:

<script>
function mutat(mit)
{
for(i=1;i<2;i++)
    document.getElementById('v'+i).style.display='none'
if (mit!=0)
document.getElementById('v'+mit).style.display=''
}

</script>

<select size="1" name="data" onchange="mutat(this.value)">
<option value="1">válassz</option>
<option value="1">Igen</option>
<option value="2">Nem</option>
</select>
</td>
</tr>
<tr id="v1" style="display:none">
<td><font size="2pt" font color="gray" font="Verdana">Alkalmak száma:</td>
<td>



<script>
function mutat2(mit)
{
for(i=1;i<4;i++)
    document.getElementById('x'+i).style.display='none'
if (mit!=0)
document.getElementById('x'+mit).style.display=''
}
</script>

<SELECT size="1" name="alkalmaksz" onchange="mutat2(this.value)">
<OPTION>1-4</OPTION>
<OPTION>5-9</OPTION>
<OPTION>10-14</OPTION>
<OPTION>15+</OPTION>
</SELECT>
<tr id="x1" style="display:none">
<td>Kártyaszám:</td>
<td><input type="text" name="barmi"></td>
<tr id="x2" style="display:none">
<td>Kártyaszám:</td>
<td><input type="text" name="barmi"></td>
<tr id="x3" style="display:none">
<td>Kártyaszám:</td>
<td><input type="text" name="barmi"></td>
<tr id="x4" style="display:none">
Nos az első optionben ha az igenre kattint a felhasználó, előjön egy új option. Ehhez is csináltam egy ugyanolyan function-t, más névvel (mutat2(mit)), de nem jeleníti meg a text típusu mezőt nekem.
Miért?
‹ Datepicker control használata Szöveg és kép elhelyezése CSS-sel és divekkel ›
 ■
1

A mutat függvényed logikáját

Török Gábor · 2009. Jún. 14. (V), 09.12
A mutat függvényed logikáját ahhoz kötötted, hogy milyen értékű a kiválasztott lista elem. Ha nem 1, akkor megjeleníted a vi azonosítójú elemet. A mutat2 függvényedben is ezt a logikát követed, viszont a második select listában már nem adtál értékeket az opcióknak, így a megjelenített címkéjüket kapod vissza (pl. "1-14"), olyan azonosítójú elemed viszont nincsen, hogy x1-14. Tehát vagy nevezd el másképp az elemeket, vagy adj explicit értéket az opcióknak.

JavaScript alapú feljesztéshez javaslom a Firebug kiterjesztést Firefoxhoz, amely egyből kiszúrta volna neked ezt a hibát.

document.getElementById("x" + mit) is null
[Break on this error] document.getElementById('x'+mit).style.display=''


Más. A data listádban a legelső „Válassz” opciónak szerintem 0-s értéket szerettél volna adni, mert így most arra is felbukkan a rejtett mező.

Még más. Ne használj oldal elrendezéshez táblázatokat. A táblázat HTML elemek adattáblázat megjelenítésére valók. Elrendezéshez, oldalkialakításhoz a CSS-t tudod használni. Ld. rdd CSS lépésről-lépésre: táblázatnélküli oldalfelépítés c. cikkét.

A font és hasonló elavult HTML elemeket sem célszerű használni formázáshoz, helyettük szintén a CSS nyújt korszerű megoldást. Ld. a hétrészes CSS alapjai[/code] cikksorozatot Bártházi András tollából. A sok style="display:none" helyett is érdemesebb CSS osztályokat használnod, amelyekkel egy elemcsoport számára tudsz stílust megadni. Bővebben ugyanebben itt tudsz erről olvasni.

Próbáld meg továbbá, hogy egységesen vagy csupa nagybetűvel vagy csupa kisbetűvel írod valamennyi HTML elemed nevét. Ha XHTML-t használsz, akkor a kisbetűs írásmód követelmény.