ajax is not working on onsubmit

Question

servis 0 Junior Poster in Training

14 Years Ago

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>

javascript

ajax.js (0.8 KB)

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("GET",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;
	}

process.php (0.15 KB)

<?php

if ($_SERVER['REQUEST_METHOD'] != 'POST') exit;

if(isset($_POST['submit'])){
	
	$name = $_POST['sender_name'];
	
	echo $name;
	
}

?>

validate.php (0.36 KB)

<?php
$name    = $_GET['sender_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);
}

?>

3 Contributors
8 Replies
2K Views
4 Days Discussion Span
Latest Post 14 Years Ago Latest Post by Graphix

Graphix 68 ---

14 Years Ago

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

essential 84 Posting Shark

14 Years Ago

Hi servis,

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

hope it helps you...

Edited 14 Years Ago by essential because: n/a

Reply to this topic

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.

servis 0 Junior Poster in Training · Answer 1 · 2010-02-12T09:31:56+00:00

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;
}

Graphix 68 --- · Answer 2 · 2010-02-12T18:08:47+00:00

>> 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

servis 0 Junior Poster in Training · Answer 3 · 2010-02-12T18:23:53+00:00

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

Graphix 68 --- · Answer 4 · 2010-02-13T14:21:47+00:00

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

servis 0 Junior Poster in Training · Answer 5 · 2010-02-15T15:56:06+00:00

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...

Graphix 68 --- · Answer 6 · 2010-02-15T20:45:41+00:00

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