Simple Ajax Question

[jboesch]

I have a code that works perfectly fine when I have this <a onclick="checkDate(ver)">Check it</a>. It will alert "ok" and "not ok" But as soon as I apply it to a <form> tag, it doesnt use the return statements I'm making. It just alerts "not ok" every time. I would like it to not submit if the function returns false.

For the HTML I have

<form onsubmit="return checkDate('1')" method="post">

And for the AJAX I have...

var xmlHttp
 
function checkDate(ver)
{ 
	xmlHttp=GetXmlHttpObject()
	if (xmlHttp==null)
	{
		alert ("Browser does not support HTTP Request")
	} 
 
	var year = document.getElementById('year').value;
	var month = document.getElementById('month').value;
	var date = document.getElementById('date').value;
	var url="ajax-checkdate.php"
	url=url+"?date="+year+'-'+month+'-'+date;
	xmlHttp.onreadystatechange=function(){stateChanged(ver)}	
	xmlHttp.open("GET",url,true)
	xmlHttp.send(null)
}
 
function stateChanged(ver)
{ 
 if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){ 
	var checkit = xmlHttp.responseText;
		if(checkit != 'ok'){
			alert('not ok');
			return false;
		} else {
			alert('ok');
			return true;
		}
	} 
}

Hopefully a Java knight in shining armor will be able to help me

[Trashcanistan]

Change your <from> tag from

<form onsubmit="checkDate('1')" method="post">

to

<form onsubmit="return checkDate('1')" method="post">

[jboesch]

Change your <from> tag from

<form onsubmit="checkDate('1')" method="post">

to

<form onsubmit="return checkDate('1')" method="post">

Sorry, I actually had is as "return checkDate('1')".. But no, it doesnt work

I notice that its taking time to do the ajax callback like a couple seconds when I test it on the <a> tag. I think that the form is submitting so fast that It doesnt even pick it up. Hmm.. how to fix this..

[Trashcanistan]

You need checkDate to return true or false, not stateChanged.

[jboesch]

Yeah, but how do I do that How do I take a true or false statement from another function and check it in the main function.

[jboesch]

I figured out an alternative to what I was trying to accomplish, thanks for the replys none the less!

[Trashcanistan]

What did you do, if you don't mind my asking. I'm fairly new to Ajax and the "asynchronous" part of it is a bit tricky to work with.

[Trashcanistan]

I have a solution that I'll admit is a bit of a kludge. If someone knows a better way, I'd love to hear it. I suspect there is one.

var xmlHttp
var resp = "";  //Global response var
 
function checkDate(ver)
{
    resp = "";   //Reset response var
 
    xmlHttp=GetXmlHttpObject()
    if (xmlHttp==null)
    {
        alert ("Browser does not support HTTP Request")
    }
 
    var year = document.getElementById('year').value;
    var month = document.getElementById('month').value;
    var date = document.getElementById('date').value;
    var url="ajax-checkdate.php"
    url=url+"?date="+year+'-'+month+'-'+date;
    xmlHttp.onreadystatechange=function(){stateChanged(ver)}   
    xmlHttp.open("GET",url,true)
    xmlHttp.send(null)
 
    while(resp = "") {
    }    //Will sit here until resp != "" (Will also provoke annoying message from IE.)
 
    if(resp == "ok") //Return true/false based of response from PHP script
        return true;
    else
        return false;
}
 
function stateChanged(ver)
{
   if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
        resp = xmlHttp.responseText;  //Set response var to return val of PHP script
    }
}