ajax form val tutorial?

[dadamssg]

i want to use ajax in my form where if the user clicks submit with empty fields an error message pops up...i know how to do this using php but would MUCH rather have ajax do it so i don't have to reset the form and the user loses all their input. if anyone knows of a good tuturial on the topic thatd be great, i can;t seem to find one...thanks

[RichardRotterdam]

MUCH rather have ajax do it so i don't have to reset the form and the user loses all their input.

if that happens you are not using php correctly you can set the values after the post using php

[phparray]

You don't need to ajax for this. All you need to do is check the form values onclick of the submit button and return a message if they are blank.

 

Here's a quick example for you.

 

 

<script type="text/javascript">
function isBlank(field,div)
{
	if(field.value=='')
		{
			document.getElementById(div).innerHTML="Required Field";
			return false;
		}
	else
		{
			return true;
		}

}
</script>


<form name="myForm">
<div id="errorMessage"></div>
<input type="text" name="myField" />
<input onclick="return isBlank(this.form.myField,'errorMessage')" type="submit" name="Submit" value="Submit" />
</form>

 

 

 

Never rely on js validation. Always do both server side and client side.  Remember users can always turn off javascript and since ajax is javascript that won't work either.

[dadamssg]

im not familiar with javascript at all...could you possibly show me how to check three fields for blanks and display error messages...or if not point me in the direction of a good tutorial that covers this topic??? thanks

[phparray]

Here is a really simple function I wrote recently that will do what you need.

 

Add this to the head section of your page.  Edit field1,field2,field3 to be the actual ids of your input fields.

 

This function uses and alert box but you could replace that will another method. The alert box is on this line

 

alert('Please complete all required fields');

 

If you look at my previous post you can see how to use innerHTML instead.

 

<script type="text/javascript">
<!--
function validate()
{
	var required = new Array();
	required[1] = 'field1';
	required[2] = 'field2';
	required[3] = 'field3';
	for(x in required)
		{
			if(document.getElementById(required[x]).value == '')
				{
					alert('Please complete all required fields');
					document.getElementById(required[x]).focus();
					return false;
				}
		}
	return true;
}
//-->
</script>

 

Then just make sure your input fields actual have assigned ids and add this onclick attribute to your submit button

 

<input type="text" name="field1" id="field1" />
<input type="text" name="field2" id="field2" />
<input type="text" name="field3" id="field3" />
<input type="submit" name="submit" value="Submit" onclick="return validate()" />

 

Sorry I don't know of any good tutorials for this off the top of my head. But all the information you need it in this reply and the last.  Good Luck!

 

 

[dadamssg]

hey thanks for that but for some reason the session variables won't stick...the messages pop up like they're suppose to but i also have a php script that checks whether the fields are left blank and displays an error message and everytime i click submit it returns to the form with the error messages....dumb