ugrás a tartalomhoz

JS dinamikus űrlap kialakítás

tiku I tikaszvince · 2005. Már. 25. (P), 15.02
Sziasztok!
Általában ha van valami problémám gyorsan megtalálom a megoldást (vagy elnéztem valami, vagy gondolkodni kell egy kicsit még rajta), de mivel a JavaScript-hez őszintén szólva egyáltalán nem értek, ezért fordulok hozzátok.

Szóval: van nekem egy űrlapom, amiben egy select-ből a felhasználónak választhat egy mezőt. De mivel fenn áll annak a lehetősége, hogy az ő választása, még nincs benne a listában, engedni szeretném, hogy megadhasson új elemet is, ami a feldolgozás után természetesen, majd bekerül a selectbe.
(Lényegében egy olyanra lenne szükségem minta gmail regsztrációnál volt a biztonsági kérdés megadása. Voltak előre megadott kérdések plusz egy "megadom a saját kérdésemet", amit ha kiválasztottam, akkor megjelent egy input amibe begépelhettem a sajátom)

Namost én találtam itt egy scriptet, ami már majdnem (!) lefedi azt amit én szeretnék, csak hát ugye nem select-el, hanem radio-val oldja meg.

eddig én itt járok

<form name="fm" action"valami" method="post">
<select name="sorozatok">
  <option selected="selected" disabled="disabled">-- Sorozat választása --</option>
  <option value="1" onselect="toggleT('uj_sorozat','h')">első sorozat</option>
  <option value="2" onselect="toggleT('uj_sorozat','h')">második sorozat</option>
  <option value="3" onselect="toggleT('uj_sorozat','h')">harmadik sorozat</option>
  <option value=""  onselect="toggleT('uj_sorozat','s')">nincs még ilyen</option>
</select>
<span id="uj_sorozat" style="visibility:hidden;position:relative;top:0;left:0;">
Sorozat címe<br/><input type="text" name="sorozat_cim"/><br/><br/>
Sorozat ISSN<br/><input type="text" name="issn"/>
</span>
</form>
<script type=text/javascript>
var isIE=document.all?true:false;
var isDOM=document.getElementById?true:false;
var isNS4=document.layers?true:false;

/* _w : which ID (1) or (2) */
/* _h : (h)ide or (s)how */
function toggleT(_w,_h) {
  if (isDOM)
  {
    if (_h=='s') document.getElementById(_w).style.visibility='visible';
    if (_h=='h') document.getElementById(_w).style.visibility='hidden';
  }
  else if (isIE) {
    if (_h=='s') eval("document.all."+_w+".style.visibility='visible';");
    if (_h=='h') eval("document.all."+_w+".style.visibility='hidden';");
  }
  else if(isNS4)
  {
    if (_h=='s') eval("document.layers['"+_w+"'].visibility='show';");
    if (_h=='h') eval("document.layers['"+_w+"'].visibility='hide';");
  }
}
</script>
Ha van valami öttletetek, hogy hogyan lehetne működésre bírni ezt a dolgot, vagy valakinek létezik már erre valami megoldása, akkor megköszönném a segítséget.
 
1

Kell a JS?

Poetro · 2005. Már. 25. (P), 15.24
Én úgy oldanám meg:
a selectbe felvennék a végére egy újabb elemet (új elem felvitele), és ha azt jelöli ki, akkor a mellette levő mezőbe beírhatja az új elem nevét.
Egyszerű, de nagyszerű.
--------
Poetro
2

majdnem ezt szeretném

tiku I tikaszvince · 2005. Már. 25. (P), 15.34
majdnem ezt szeretném, annyi csavarral, hogy amíg nem választja ki "az új elem felvitele"-t addig ne is látszódjon ami most a span-ban van...
3

onselect?

VBala · 2005. Már. 25. (P), 16.45
Ezt az onselect-et honnan vetted? Tudtommal nincs az option elemnek ilyen tulajdonsága, de azért utána néztem:

onSelect = myJavaScriptCode

Event handler for Text,Textarea

The onSelect event handler is used to execute specified JavaScript code whenever the user selects some of the text within a text or textarea field.
4

OnClick-el megy

tiku I tikaszvince · 2005. Már. 25. (P), 18.10
OnClick-el megy a dolog, de mondjuk én magamból kiindulva, gondoltam, hogy biztosra kellene menni, mert mi van ha nem egérrel kattint, hanem nyomkodja a tabot, selecteknél meg a kurzor mozgatókat? akkor nem jelenik meg, aminek meg kellene jelennie... vagy ne legyek túl maximalista?

amugy a w3schools oldalán találtam az onselect-et. de megint megnéztem, és tényleg nincs ilyen tulajdonsága :(
5

onChange?

Poetro · 2005. Már. 25. (P), 18.34
Nem lehet, hogy az onChange szerencsésebb lenne?
--------
Poetro
6

nem nyert

tiku I tikaszvince · 2005. Már. 25. (P), 18.58
az onChange-el sem megy, ahogy az onselect-el sem ment...
de mmár tudom hgoy hol kell nézni, és az optionnak nem lehet tulajdonsága az onChange sem:

Event Attributes
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup


Ezek közül, úgy gondolom, hogy még az onClick felel meg a legjobban nekem. Vagy van valami jobb megoldás, ötlet?
7

Nem az option-nek kell ez az event, hanem a select-nek

Poetro · 2005. Már. 25. (P), 19.04
A select-nek ugyanis van onchange eventje, és ekkor meg tudod nézni, hogy mi lett kijelölve.
Ha a megfelelő a value értéke a selectnek, akkor megjeleníted a mezőt.
Ha olyan böngésző, ami még nem ismeri a value tulajdonságot, akkor más trükkök is vannak. options[selectedIndex].value .
--------
Poetro
8

Ez igen szakszerű válasznak tűnik :)

tiku I tikaszvince · 2005. Már. 25. (P), 19.16
DE! mint mondtam ez egy "lopott" kód, és én egyáltalán nem értek JS-ül, ezért azt hiszem csak jó lesz nekem az onClick. De ha valami csoda folytán mégis rámozdulnék az onChange-re, akkor valszeg okozna 1-2 álmatlan éjszakát, mire megérteném hogy miről is van szó, és át tudnám alakítani a kódot erre...
kb. az elméletét értem, hogy mit kellene csinálni, de olyan problémák kerülnek ekkor felszinre, hogy pl.: hogy nézem meg hogy mi lett kijelölve?

many thx
9

egy kis segítség:

VBala · 2005. Már. 25. (P), 19.37

<select name="sorozatok" onChange="document.getElementById('uj_sorozat').style.visibility=this.selectedIndex==4?'visible':'hidden'">
  <option selected="selected" disabled="disabled">-- Sorozat választása --</option>
  <option value="1">első sorozat</option>
  <option value="2">második sorozat</option>
  <option value="3">harmadik sorozat</option>
  <option value="">nincs még ilyen</option>
</select>
szóval a selectedIndex mondja meg, hogy melyik van kiválasztva
10

Köszönet és tanács kérés

tiku I tikaszvince · 2005. Már. 25. (P), 20.14
tényleg nagyon köszönöm, nem is tudom mivel háláhatnám meg... :))
és ahogy látom nem is kell neki az a csúnya 20 soros script sem...

tényleg! nem tudtok valami olyan tutorial oldalt, ahol az ekkora JS lámák, mint én, egy kis tudást szippanthatnak az agyukba? (na ezt jól megmondtam :) )

mert, (ahogy én látom), ugyan az a baj, a netes tutorialokkal, mint a könyvekkel... vannak olyanok amik tényleg az alapoknál kezdik (mondjuk javascriptben ezt én nem találom, mondkuk nagyon nem is kerestem még eddig), de egy kicsit túlzásba esve ("itt kell bekapcsolni a gépet", meg "így épül fel egy html oldal") meg van a másik véglet, amit már a guruk sem nagyon értenek, mert annyira szakszövegnek van megírva.

szóval, hol találok valami olyan szájbarágós, esetleg magyar nyelvű JS tutorialt, ami kezdésnek jó lenne? mert ha már kezdem kapsgálni akkor megértem az angolt is. de amíg nem értem még magyarul sem nagyon nehéz.

és mégegyszer köszi...