ugrás a tartalomhoz

Számmal megkülönböztetett form elemek elenőrzése javascriptel.

Skyzetor · 2008. Szep. 22. (H), 19.58
Adva van a következő ürlap:

<form name="urlap">
...<input type="text" name="nev_1" />
...<input type="text" name="nev_2" />
...<input type="text" name="nev_3" />
......
...<input type="text" name="nev_n" />
...<input type="button" value="Ok" onclick="ell(n)" />
</form>

A mezők száma nem ismert, mert php hozza létre őket, a user előző bevitele alapján, és a számokat a program biggyeszti a mezők nevének a végére. Szeretném leellenőrizni js-sel, hogy minden mező ki van e töltve.

function ell(szam){
...for(var i=1; i<=szam; i++){
......if(document.urlap.mezo_+i+.value==''){
.........alert('Üres mező');
......}
...}
}

Na most ez a mezo_+i+ nem igazán akar működni. Több megoldást is kipróbáltam, de egyik sem működött, és leírást nem nagyon találtam a problémára. Mi a megoldás? V.színűleg láma kérdés, de újszülöttnek minden vicc új! Aki segít, annak előre is kösz.
‹ AJAX-os kérés közben a PHP kódban eltűnnek a változók egy idő után optimalizálás mobilra ›
 ■
1

Add ugyanazt az id-t az

tolmi · 2008. Szep. 22. (H), 20.55
Add ugyanazt az id-t az input-oknak és
document.getElementById('nev_'+i).value


Így legalább nem szivatod meg magad később.
4

Ne felejtsük

deejayy · 2008. Szep. 23. (K), 07.45
Ne felejtsük el, hogy ezesetben adni kell id-t is az input tag-eknek!

<input id='nev1' name='nev1' ...
5

Pffffff

tolmi · 2008. Szep. 23. (K), 08.54
Eléggé fáradt lehetsz :) Ezt írtam:
Add ugyanazt az id-t az input-oknak ...
6

Jaj

deejayy · 2008. Szep. 25. (Cs), 06.21
Jaj, tényleg :D Szori
2

form element?

Szekeres Gergő · 2008. Szep. 22. (H), 21.28
link
3

Egyébként szintaktikailag valahogy így működne...

Ustak · 2008. Szep. 22. (H), 21.58

var  ojjektum = {
    Kocsord: {
        kivonja: {
            o1: {value:'Mi-'},
            o2: {value:'kó?'}
        }
    }
}
for (var i=1; i<3; i++) {
    console.log(ojjektum['Kocsord']['kivonja']['o'+i].value);
}
Valamint van for in ciklusod:

for ( i in ojjektum.Kocsord.kivonja) {
    console.log(ojjektum.Kocsord.kivonja[i].value);
}
Persze a fenti kommentek a jó megoldások eme problémára.
7

A jQuery-t ajánlanám

Velias9 · 2008. Szep. 25. (Cs), 13.47
A jQueryről itt olvashatsz bővebben. A jQuery azért jó, mert a böngészők eltérő JavaScript támogatását szinte (elméletileg teljesen) kiküszöböli.
Ezzel a kód viszonylag egyszerű, ha adsz az ellenőrzendő inputoknak egy egységes stílust (nem kell kinézetet is rendelni hozzá), pl.: 'class="ellenorizni"':

...

function uresE()
{
	// Az összes olyan elemet kiválogatja, amire igaz, hogy: egy "urlap" értékű
	// 'name' paraméterrel rendelkező 'form'-nak egy "ellenorizni" osztályú
	// (nem feltétlenül közvetlen) gyermeke.
var inputok = $("form[name='urlap'] .ellenorizni");

	// Alapállapotban kitöltöttnek vesszük a formot
	var kitoltott = true;

	// Végigjárjuk az elemeket
	for (var i = 0; i < inputok.length; i++)
	{
		// Ha ez eggyik üres, akkor ...
		if ($(inputok[i]).val() == "")
		{
			// ... nem kitoltottre állítjuk az űrlapot, és ...
			kitoltott = false;
			// ... kilépünk a ciklusból (ha az egyik üres, akkor
			// mindegy, hogy a többi üres-e :) )
			break;
		}
	}

	// Ellenőrizzük az eredményt
	if (kitoltott)
	{
		// Elküldjük az űrlapot ...
		var urlap = $("form[name='urlap']");
		urlap.submit();
	}
	else
	{
		// ... vagy hibaüzenetet jelenítünk meg
		alert("Minden mezőt ki kell tölteni");
	}
}

...
Plusz egy kis HTML módosítás:

...

<form name="urlap">
	<input type="text" class="ellenorizni" name="nev_1" />
	<input type="text" class="ellenorizni" name="nev_2" />
	<input type="text" class="ellenorizni" name="nev_3" />
	<input type="text" class="ellenorizni" name="nev_4" />
	<input type="text" class="ellenorizni" name="nev_5" />
	<input type="text" class="ellenorizni" name="nev_6" />
	<input type="button" onclick="uresE();" />
</form>

...
A fentiekkel csak az a baj, hogy az űrlapot így csak JavaScript segítségével lehet elküldeni. Ennek kiküszöbölésére:
Módosítani kell a JavaScript kód 27-38 sorát:

	// Ellenőrizzük az eredményt
	if (kitoltott)
	{
		// Elküldjük az űrlapot ...
		return true;
	}
	else
	{
		// ... vagy hibaüzenetet jelenítünk meg
		alert("Minden mezőt ki kell tölteni");
		return false;
	}
És a HTML kód 10. sorát:

	<input type="submit" onclick="uresE();" />
Ezzel csak az a baj, hogy a 'return false' nem biztos, hogy megállítja a 'form' elküldését.

Remélem tudtam segíteni.
8

De ha biztosra mész

cSuwwi · 2008. Szep. 25. (Cs), 18.45
Ezzel csak az a baj, hogy a 'return false' nem biztos, hogy megállítja a 'form' elküldését.


Ha biztosra akarsz menni, akkor nem a gombra kell onclick-re az eseményt tenni, hanem a formnál onsubmitra return-el. Ha false-al tér vissza, nem megy el a form.

<form name="urlap" onsubmit="return uresE()">
...
<input type="submit" value="Küldés" />
9

Ezt még nem próbáltam

Velias9 · 2008. Szep. 26. (P), 11.17
Ez jó ötletnek tűnik, nekem tetszik, majd kipróbálom.

Mindenesetre köszönöm!
10

Szerintem olvasd el ezt, mert

hosszu.kalman · 2008. Szep. 26. (P), 16.48
Szerintem olvasd el ezt, mert megoldaná a problémádat:

http://www.kalman-hosszu.com/form-mezo-ellenorzes-jquery-segitsegevel/

Meg a DHTML változatára ezt:
http://www.kalman-hosszu.com/from-mezo-ellenorzes-dhtml-el-es-jquery-javascript-konyvtarral/

Hátha tudod használni.
11

Egy lehetséges megoldás

kerzo · 2008. Szep. 26. (P), 20.10
Én nem tartom rossznak az eredeti elképzelést, de egy kicsit továbbgondoltam:

Ez lenne az űrlap végén a küldés gomb:
<input type="button" value="Ok" onclick="ell(n);return document.ell_returnValue" />
És ez lenne a js ellenörzés:
<!--
function ell(szam) {

	var errors = '';
	var form_text = '';

// adatok ellenőrzése
	for(var i=1; i<=szam; i++){

		form_text = document.forms['urlap'].elements['nev_' + i].value;

		if(form_text==''){
			errors+= "Az " + i + ". mező üres! Kérlek töltsd ki!\n";
		}

	}
// hibaüzenet
	if (errors) {
		alert ('Hoppá!\nVan egy kis gond a megadott adatokkal\n\n'+errors);
		document.ell_returnValue = (errors == '');
	} else {document.forms['urlap'].submit();}

}
//-->
12

jQuery

hosszu.kalman · 2008. Szep. 27. (Szo), 22.46
Szerintem a jQuery idejében ilyen tipusú megoldásokat felesleges megtanulni.

Ma már nincs alert de van DHTML, nincs onclick de van $('form').submit(function(){\
});

Érdemes megtanulni a jQuery-t mert nagyon sokmindent lehet vele minimális időráfordítással csinálni. Pl:

fisheye
imagebox
cart

Namost a két fisheye menü js kódja mindösszesen ennyi:

<script type="text/javascript">
	
	$(document).ready(
		function()
		{
			$('#fisheye').Fisheye(
				{
					maxWidth: 50,
					items: 'a',
					itemsText: 'span',
					container: '.fisheyeContainter',
					itemWidth: 40,
					proximity: 90,
					halign : 'center'
				}
			)
			$('#fisheye2').Fisheye(
				{
					maxWidth: 60,
					items: 'a',
					itemsText: 'span',
					container: '.fisheyeContainter',
					itemWidth: 40,
					proximity: 80,
					alignment : 'left',
					valign: 'bottom',
					halign : 'center'
				}
			)
		}
	);

</script>
De ez csak három példa, itt van mondjuk 240 plugin:
http://www.sastgroup.com/jquery/240-plugins-jquery

Olyan látványos, és profi dolgokat lehet benne megvalósítani amiről az ember azt gondolná több hónap fejlesztés...és nem is gondlja rosszul, csak nem nekünk hanem annak aki megcsinálta.
13

Ne már

tolmi · 2008. Szep. 28. (V), 13.13
Szerintem a jQuery idejében ilyen tipusú megoldásokat felesleges megtanulni.

Mi az hogy a jQuery idejében? Akkor most a Java ideje van? Vagy PHP-é? (Vagy esetleg a Linux desktop éve? :D)

Attól hogy van Java még nem árt tudni Assembly-ben programozni. Attól hogy van jQuery még nem árt tudni JavaScript-ben programozni. És vannak olyan egyszerű feladatok, amikre monjuk a jQuery overkill.

All in all, az rendben van hogy jQuery evangelizálsz (ebben a topicban 2x-3x is :D), de van ám egy csomó jó megoldás emellett is. Ajánlom a Dojo-t is, nem a jQuery a világ kezdete és vége - még akkor sem ha én is jQuery-ben vagyok a legjobb.
14

A jquery javascript

Ustak · 2008. Szep. 28. (V), 15.50
A jQery javascript, egyszerűen (többek között) a chaining nevezetű technikára (design pattern-re)támaszkodván írunk vele kódot. Így elsőre jó és egyszerű, ám mihelyst saját plugint akarunk írni - akár a "wrapped set" -en (a gyűjtött DOM elemeken) működő metódust vagy kötvetlen az "$"-ből kiinduló "utility function" -t akkor rájövünk hogy ez bizony szimpla objektum orientált javascript, és ha hallottunk már olyan dolgokról mint a prototype ($.fn.) a closure, és a self executing function pattern akkor az nagy segítség. Ez akkor is fennáll, ha mások kódját akarjuk megérteni, akik remélhetőleg nem ilyen unalmas, hosszú mondatokat írnak mint én az előbb :-).
15

Nem érteni

tolmi · 2008. Szep. 28. (V), 17.20
Azt nem értem hogy ezt miért nekem írod válaszként?
16

Megnyomom az első gombot...

Ustak · 2008. Szep. 28. (V), 19.56
amit meglátok, sajnos ez már berögződött :-)
Végül is azért, mert azt írtad hogy attól hogy van jquery még nem árt tudni javascripben programozni, ami szerintem is tök igaz, csak nem tudom miért választjuk ezt így külön, mert a jqery javascript.
17

Érthetőbb

tolmi · 2008. Szep. 29. (H), 09.58
Én azért választottam külön mert így világosabb a mondanivalóm. Nyilván a jQuery JavaScript-re épül és nem is fedi el teljesen azt, ám egy csomó dologban egyszerűsít, pl. az .each() konstrukció és még sorolhatnám.

Amire én gondoltam az az, hogy nem árt tudni fapados JS-sel sem végigiterálni egy objektumlistán, használni a prototype konstrukciókat, DOM eseménykezelést használni natívan. Ezeket pedig a jQuery (és az összes nagyobb FW) szépen elfedi. Erre utaltam.
18

Igazad

Ustak · 2008. Szep. 29. (H), 15.43
van.