i have a simple form validation onsubmit event. The requirement is very simple, if validate.php brings any error it shows errors and it stops form for further processing else form submit and action runs process.php.

But, unfortunately ajax function is not working onsubmit event..
any help please..... files are attached except html code which is here

<html>
<head>
  <title>test form</title>
   <script type="text/javascript" src="ajax.js"></script>
</head>

<body>
<div id="result"></div>

<form id="form" action="process.php" method="POST" onsubmit="return validate();">
  <div>Your name:</div>
  <div><input type="text" name="sender_name" size="20" /></div>

  <div><input type="submit" name="submit" value="submit" /></div>
</form>

</body>
</html>

Perhaps this is new to you, but people don't like downloading stuff when it is not necersary. Could you just simply post the code instead of making it a attachment? Makes it easier for all of us.

~G

Hi servis,

you could try this thread and see how I made an AJAX call via the onsubmit handler.

hope it helps you...

of course you are right the complete code is as follow,

form.html

<html>
<head>
  <title>test form</title>
   <script type="text/javascript">

var xmlhttp

function valiadte()
{
	xmlhttp=GetXmlHttpObject();
	if (xmlhttp==null){
	alert ("Your browser does not support AJAX!");
	return;
	  }
	var url="validate.php";
		xmlhttp.onreadystatechange=stateChanged;
		xmlhttp.open("POST",url,true);
		xmlhttp.send(null); 
}

	function stateChanged()
	{
	if (xmlhttp.readyState==4){
	  	if(xmlhttp.responseText.length == 0) { return true; } else { 
	  	document.getElementById("result").innerHTML=xmlhttp.responseText; return false;}
	  }
	 return false;
	}

	function GetXmlHttpObject()
	{
	if (window.XMLHttpRequest)
	  {
	  // code for IE7+, Firefox, Chrome, Opera, Safari
	  return new XMLHttpRequest();
	  }
	if (window.ActiveXObject)
	  {
	  // code for IE6, IE5
	  return new ActiveXObject("Microsoft.XMLHTTP");
	  }
	return null;
	}
</script>
</head>

<body>
<div id="result"></div>

<form id="form" action="process.php" method="POST" onsubmit="return validate();">
  <div>Your name:</div>
  <div><input type="text" name="sender_name" size="20" /></div>

  <div><input type="submit" name="submit" value="submit" /></div>
</form>

</body>
</html>

validate.php

<?php
$name    = $_POST['user_name'];
$errors  = array(); // array of errors

// basic validation
if ($name == '') {
  $errors[] = "Please enter your name";
}

if (sizeof($errors) > 0) {
  // if errors, send the error message
  $str = implode("\n", $errors);
  die("There was an error with your submission!  Please correct the following:\n\n" . $str);
}

?>

process.php

if(isset($_POST['submit'])){

	$name = $_POST['user_name'];
            echo $name;
}

>> Line 8 - form.html - The function name should be validate()

You can combine the following two functions:

function valiadte()
{
	xmlhttp=GetXmlHttpObject();
	if (xmlhttp==null){
	alert ("Your browser does not support AJAX!");
	return;
	  }
	var url="validate.php";
		xmlhttp.onreadystatechange=stateChanged;
		xmlhttp.open("POST",url,true);
		xmlhttp.send(null); 
}

	function stateChanged()
	{
	if (xmlhttp.readyState==4){
	  	if(xmlhttp.responseText.length == 0) { return true; } else { 
	  	document.getElementById("result").innerHTML=xmlhttp.responseText; return false;}
	  }
	 return false;
	}

Into

function validate()
{
	xmlhttp=GetXmlHttpObject();
	if (xmlhttp==null){
	alert ("Your browser does not support AJAX!");
	return false;
	  }
	var url="validate.php";
		xmlhttp.open("POST",url,true);
		xmlhttp.send(null); 
		xmlhttp.onreadystatechange=function() {
	if (xmlhttp.readyState==4){
	  	if(xmlhttp.responseText.length == 0) { return true; } else { 
	  	document.getElementById("result").innerHTML=xmlhttp.responseText; return false;}
	  }
                }
}

~G

thank you Graphix for your reply. i tried your suggested code, but the matter is, on pressing submit form bypass onsubmit function and execute process.php directly without validation

Perhaps you have not had alot of experience with javascript, but ajax does not automatically retrieve all the form values and sends that to the page.... As your code does not have vital information, you can just simply use the GET method, instead of the POST method for the ajax request.

The code:

form.html

<html>
<head>
  <title>test form</title>
   <script type="text/javascript">
var validForm = false;
var errorText = "";

function vForm() {
if (validForm == false) {
if (errorText == "") {
document.getElementById("result").innerHTML="You have not yet filled in any fields!"; 
} else {
document.getElementById("result").innerHTML=errorText;
}
}
return validForm;
}
function validate()
{
		var xmlhttp = new GetXmlHttpObject();
		if (xmlhttp==null){
		 alert ("Your browser does not support AJAX! The form will be checked when you submit it.");
		 validForm = true;
		 return false;
		}
		var user_name = document.getElementById('user_name').value;
		var url="validate.php?user_name=" + encodeURIComponent(user_name);
		xmlhttp.open("get",url);
		xmlhttp.send(null); 
		xmlhttp.onreadystatechange=function() {
        if ( (xmlhttp.readyState == 4) && (xmlhttp.status == 200) ) {
	  	  if(xmlhttp.responseText.length == 0) { 
		  validForm = true;
		  return true;
		  } else { 
		  validForm = false;
	  	  document.getElementById("result").innerHTML=xmlhttp.responseText; 
		  errorText = xmlhttp.responseText;
		  return false;
		}
	}
   }
}

	function GetXmlHttpObject()
	{
	if (window.XMLHttpRequest)
	  {
	  // code for IE7+, Firefox, Chrome, Opera, Safari
	  return new XMLHttpRequest();
	  }
	if (window.ActiveXObject)
	  {
	  // code for IE6, IE5
	  return new ActiveXObject("Microsoft.XMLHTTP");
	  }
	return null;
	}
</script>
</head>

<body>
<div id="result"></div>

<form id="form" action="process.php" method="POST" onsubmit="return vForm();" id="form1" name="form1">
  <div>Your name:</div>
  <div><input type="text" name="user_name" id="user_name" size="20" onchange="validate()" /></div>

  <div><input type="submit" name="submit" value="submit" /></div>
</form>

</body>
</html>

validate.php

<?php
$name    = $_GET['user_name'];
$errors  = array(); // array of errors

// basic validation
if ($name == '') {
  $errors[] = "Please enter your name";
}

if (sizeof($errors) > 0) {
  // if errors, send the error message
  $str = implode("\n", $errors);
  die("There was an error with your submission!  Please correct the following:\n\n" . $str);
}

?>

process.php

<?php
if(isset($_POST['submit'])){

	$name = $_POST['user_name'];
            echo $name;
}
?>

~G

ohooooo, it is now working very much fine...yes you are right i have no experience in js and ajax....thank you Graphix for kind replies.....
please give me a hint, how can i validate multiple form inputs...

Sure, in order to validate multiple inputs, you need to adjust the function validate(). You need to retrieve more values of the form:

var url = "validate.php?";
var input1 = document.getElementById('input1').value;
url += "input1=" + input1;
var input2 = document.getElementById('input2').value;
url += "&input2=" + input2;

And then the PHP file retrieves and checks the user's input and returns the error text as responsetext if it is not valid and nothing if it is valid.

~G

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.