need help creating a form with green ticks when data is in field

[jasonc]

I am trying to add a green tick or red cross to my form so that the user will know if they have filled out the form correctly before submitting it and getting told that they need to fill out this or correct that.

 

I have added NAME to each form field and have been using this to read the content but for some reason I am unable to read what is in the field I get the error, 'undefined'.

 

this is what code I have started on...

function checkValidFormInput(id, noCheck) {
		if (noCheck == '') {
		var idValue = document.getElementsByName(id);
				if (id == 'customerName') {
					alert(id);
					alert(idValue.value);
					if (idValue != '') {
					document.getElementsByName(id + 'Img').innerHTML = '<img alt=/"/" src=/"/">';
					}
				}
				if (id == 'customerEmail') {
					if (idValue != '') {
					document.getElementsByName(id + 'Img').innerHTML = '<img alt=/"/" src=/"/">';
					}
				}
		}
}

 

my code is still in the early stages and is missing the other parts to place a red cross, as the moment i am working on placing the green tick.

 

Can anyone spot what I have wrong in my code that is causing it not to read the form field.

 

my form field is coded as so..

 

<li class="value">
<input type="text" autocomplete="off" name="customerName" value="<?=$fullname;?>" style="width: 200px;" onChange="checkValidFormInput(this.name, '');">
<div style="float: left;" id="customerNameImg"></div><br style="clear:both">
</li>

[arbitter]

Well I tried your script but using the id's instead of name's and it does give the value..

 

Also, your div had id="customerNameImg", but in your script you had document.getElementsByName(id + 'Img').innerHTML = '<img alt=/"/" src=/"/">';, which should be document.getElementById(...

 

To get it to work I gave the input field an id customername and in your js I wrote var idValue = document.getElementById(id);.

[jasonc]

thank you for your reply

 

where does it say in my script that it is using 'id' ?

 

All my field have 'name' and i wish to only get the content using 'name' instead if 'id'

 

I have used a variable called 'id' but this should not prevent the script from getting the content using 'name'  ?

 

Basically what I would like to have is a way to read the content using 'name'

[arbitter]

Okay I have found the problem.

 

document.getElementsByName(id) returns a whole array, not a single value.

If you put var idValue = document.getElementsByName(id)[0];, you will get a value

[jasonc]

thats it, great thank you.