document.getElementById(name) hittar inte div:en inne i en form

Hallå,

när jag använder mig av document.getElementById(name) så hittar den inte div:en med det angivna namnet och jag misstänker att det är för att den befinner sig inne i en form-tagg.

Har för mig att jag stötte på detta problem innan, men minns inte hur lösningen såg ut.

Jag skulle bli väldans glad om någon kunde hjälpa mig vidare :)

rättelse: det är ingen div utan en input-tag som befinner sig i form-taggen.

Det skall inte vara några problem att hitta ett element i ett formulär med getElementById.

Visa lite kod så skall vi nog hitta vart skon klämmer :)

Hallå Peter:

Javascriptet:
Problemet börjar antingen vid första eller andra raden.

function checkEmail(name) {
	var input = document.getElementById(name);
	input.value = input.value.replace(/^\s+|\s+$/g, '');
	if (name != "email") {
		var first = document.getElementById("email");
		first.value = first.value.replace(/^\s+|\s+$/g, '');
		if (first.value == input.value && input.value != null && input.value.length > 4 && input.value.match(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/))
			setStatus(name, 'good');
		else if (input.value.length <= 4)
			clearField(name);
		else setStatus(name, 'bad');
	} else {
		if (input.value != null && input.value.length > 4 && input.value.match(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/))
			setStatus(name, 'good');
		else if (input.value.length <= 4)
			clearField(name);
		else setStatus(name, 'bad');
	}

}

En input som befinner sig inne i en <form> tag. Ska form taggen ha en ID?

<input onChange="checkEmail('email');" onKeyUp="checkEmail('email,');" name="email" type="text" id="email"/>

tillägg: när jag debuggar genom att klämma in en alert(input) så säger den "null", precis som IE:s felmeddelande.

haider skrev:

En input som befinner sig inne i en <form> tag. Ska form taggen ha en ID?

<input onChange="checkEmail('email');" onKeyUp="checkEmail('email,');" name="email" type="text" id="email"/>

Det är inte fel varken att ha med eller utelämna id för ett form-element. Däremot är det behändigt, eftersom man kan använda document.getElementById. Den funktionen funkar bara på id, inte på name. Vill du plocka ut ett visst element som bara har ett name ska du använda document.getElementsByName("namnet")[0].
Kan det vara så att du har glömt att lägga till id för något element?

haider skrev:

tillägg: när jag debuggar genom att klämma in en alert(input) så säger den "null", precis som IE:s felmeddelande.

Pröa även att alerta name för att se om du verkligen får det name du tror att du får.

onKeyUp="checkEmail('email,');" ska kanske vara onKeyUp="checkEmail('email');"

Ett tips till om du vill göra det lätt för dig kan vara att köra med this istället, då skickar du elemented direkt vid varje event så slipper du leta upp det varje gång.

<input onChange="checkEmail(this);" onKeyUp="checkEmail(this);" name="email" type="text" id="email"/>

tack alla!

det var faktiskt Gislaved som upptäckte felstavningen. På något sätt kom det in ett kommatecken som ställde till det för mig.

Duffer: jag gillar ditt förslag med, att köra med this. Däremot funkar det inte i detta fall.
Är det för att scriptet börjar så här?
var input = document.getElementById(name);

Eller?

Ja. Inom javascript-ramverk är det populärt att lägga in en $-funktion som tar vilketdera format och konverterar till ett objekt.

function $(n){
if ('object' == typeof n)
  return n;
else
  return document.getElementById(n);
}

....

var input = $(name);

Vips kan du använda en sträng eller en objekt-referens. (T ex this)

Jo, men om vi tittar på just det scriptet, betyder det att nedanstående rad är ogiltig om jag har kört med "this" (utan citatstecken förstås):
var input = document.getElementById(name);

haider skrev:

Jo, men om vi tittar på just det scriptet, betyder det att nedanstående rad är ogiltig om jag har kört med "this" (utan citatstecken förstås):
var input = document.getElementById(name);

Precis. document.getElementById vill ha en sträng som argument. Men som sagt, om du använder min metod så kan du använda en sträng elelr this på olika platser i HTML-koden om du vill/behöver.

[B]function $(n){
if ('object' == typeof n)
  return n;
else
  return document.getElementById(n);
}[/B]

function checkEmail(name) {
	[B]var input = $(name);[/B]
	input.value = input.value.replace(/^\s+|\s+$/g, '');
	if (name != "email") {
		var first = document.getElementById("email");
		first.value = first.value.replace(/^\s+|\s+$/g, '');
		if (first.value == input.value && input.value != null && input.value.length > 4 && input.value.match(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/))
			setStatus(name, 'good');
		else if (input.value.length <= 4)
			clearField(name);
		else setStatus(name, 'bad');
	} else {
		if (input.value != null && input.value.length > 4 && input.value.match(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/))
			setStatus(name, 'good');
		else if (input.value.length <= 4)
			clearField(name);
		else setStatus(name, 'bad');
	}

}

Tack än en gång Nitro,

Lösningen blev visserligen lite overkill för min del.
Jag ska fortsätta köra med lösningen som den är och lovar att se upp med felstavningar framöver :)

haider skrev:

Duffer: jag gillar ditt förslag med, att köra med this. Däremot funkar det inte i detta fall.
Är det för att scriptet börjar så här?
var input = document.getElementById(name);

Eller?

Verkade bli lite missförstånd i koden jag tänkte inte vi skulle bygga ett helt ramverk som kunde ta vilken parametertyp som helst, jag menade bara att om du skickar in this behöver du inte köra document.getElementById() utan då är this redan elementet du är ute efter (eller ja i detta fall blir det ju name vilket du lämpligen ändrar till input isåfall) ;-)

Mvh

Duffer skrev:

Verkade bli lite missförstånd i koden jag tänkte inte vi skulle bygga ett helt ramverk som kunde ta vilken parametertyp som helst, jag menade bara att om du skickar in this behöver du inte köra document.getElementById() utan då är this redan elementet du är ute efter (eller ja i detta fall blir det ju name vilket du lämpligen ändrar till input isåfall) ;-)

Mvh

En funktion är så klart inte ett ramverk, men däremot är den funktionen jag postade användbar. Inkludera den överallt så att du vet att den finns så kommer du nog få nytta av den förr eller senare.