webForumDet fria alternativet

getElementsByName inuti ett annat element

JavaScript

10 svar · 502 visningar · startad av Troxy

Medlem sedan mars 20041 505 inlägg
Frågan#1

Säg att jag ett div-element, som jag snappar upp såhär:

var myDiv = document.getElementById('myDiv');

Inuti denna div så finns det ett input-element med ett visst namn.
Hur hämtar jag det på lättast sätt?
Det här vill ju inte fungera, eftersom DOM-metoden "getElementsByName" bara finns för document.

var myInput = myDiv.getElementsByName('myInput')[0]; //Funkar inte =(
Medlem sedan dec. 20042 245 inlägg
#2

Det vore lättare om det var en FORM istället för en DIV... ;)

Annars får du förmodligen loopa igenom alla input-element och kolla .name tills du hittar det du söker. Eller använda myDiv.matchSingle("input[name=myInput]") med base2.

Medlem sedan mars 20041 505 inlägg
#3

Jag skulle kunna ändra till en form.
Men grejen är att det ska ju inte användas som ett traditionellt formulär, utan tredig Ajax som vi alla älskar :P
Ett form kräver väl en action? Frågan är vad jag ska sätta där...ett # kanske?
Sen går ju formulär att submitta vilket kan ställa till lite problem. (Går iof att förhindra med Javascript.)

Medlem sedan juni 20014 421 inlägg
#4

Hmm, hade varit bättre om du kunde accessa det på annat sätt, som zcorpan säger. Men anyway:

<div id="myDiv">

<input type="text" name="myInput" value="1">
<input type="text" name="myInput" value="2">
<input type="text" name="myinput" value="3">
<input type="text" name="myInput" value="4">
<input type="text" name="myInput" value="5">
<input type="text" name="myInput" value="6">

</div>

<input type="text" name="myInput" value="7">
<input type="text" name="myInput" value="8">

<script>
function getElementsByName(obElm, strTagName, strName) {
var arrElms = (strTagName == "*" && obElm.all)? obElm.all : obElm.getElementsByTagName(strTagName);

	var retElms = [];

	for(var i=0; i<arrElms.length; i++){

		oElm = arrElms[i];
		strName=strName.replace(/-/g, "\-");
		oReg=new RegExp("^"+strName+"$")

		if(oReg.test(oElm.getAttribute('name'))){

			retElms.push(oElm);

		}

	}

	return (retElms);

}

var myDiv = document.getElementById('myDiv');
f=getElementsByName(myDiv,"*","myInput");
for(i=0;i<f.length;i++)
	alert(f[i].value)
</script>

Den aropas såhär:
getElementsByName(element,sträng1,sträng2);
element = elementet som du vill söka under.
sträng1 = vilka taggar du vill söka om de innehåller namnet
sträng2 = vilket namn

Funktionen ska väl mest ses som proof-of-concept och en lösning när det inte finns någon bättre. :)

Medlem sedan dec. 20042 245 inlägg
#5

Jag skulle nog använda ett formulär. Du behöver inte ange action="". Det är bara säga return false på onsubmit. Du kan också göra andra saker på submit (istället för att tex använda onclick på submitknappen).

Då gör du bara

var myInput = myForm.myInput;
Medlem sedan juni 20014 421 inlägg
#6

Fast det är ju inte i närheten lika coolt som min funktion, zcorpan. :p

Medlem sedan dec. 20042 245 inlägg
#7

Nej... det är ju sant. :moose

Medlem sedan juni 20014 421 inlägg
#8

Som sagt, funktionen ska väl mest ses som proof-of-concept, då det faktiskt finns snyggare lösningar än den. Men ibland ska man ta i från tårna. :e

Medlem sedan mars 20041 505 inlägg
#9

colione, tack för din cooola funktion! :P
Den hjälpte mig på två sätt:
- Den löste mitt ursprungliga problem.
- Den fick mig samtidigt att tänka om och byta ut DIV mot FORM.

zcorpan, är inte action-attributet required enligt rekommendationen?
Som du säger så är det lite elegantare att använda onsubmit istället för onclick, och sedan stoppa eventet och istället utföra Ajax-anropen. Det får bli lösningen!

Hur som helst, om detta ska bli en riktigt bra webbapplikation så borde man ju egenligen bygga lite fallbacks som man submittar mot när klienten inte har Javascript-stöd. Men det får bli nästa projekt :e

Medlem sedan dec. 20042 245 inlägg
#10

Troxy skrev:

zcorpan, är inte action-attributet required enligt rekommendationen?

Jo. Fast HTML4 skrevs 1997, innan Ajax var påtänkt. Att använda formulär till något annat än att skicka information till servern tänkte man inte på när man skrev HTML4. Du kan förstås lägga dit "action=""", det skadar inte, men det gör ingen nytta heller. :)

action-attributet är valbart i HTML5.

Medlem sedan mars 20041 505 inlägg
#11

zcorpan, okay det låter ju vettigt. Man behöver trots allt inte slaviskt följa rekommendationerna. :P

257 ms totalt · 4 externa anrop · v20260731065814-full.6fe65c25
125 ms — deklarationer (db)
0 ms — hämta statistik (cache)
129 ms — hämta tråd, inlägg och bilagor (db)
116 ms — ändringar (db)