AJAX Form submit problem (JSP/Servlet)

[Carlos Juan]

Hi,

I have a form and onsubmit calling a javascript function to make sure some value does exists in database. If the value exists I
am submitting a form but if the value does not exists I don't want to submit a form rather show user a message. I am trying to use
AJAX, it does go to the databse and checks for the required value but whatever the value is it still keeps submiting the form. Can someone please
help me what am I doing wrong here. Here is my code:

In my JSP I have the following piece:

.................
.................
out.println("<FORM METHOD=\"POST\"  onSubmit=\"return valCheck(this.'" + fullUrlValue + 
                      "')\" ACTION=\"Complete?" + 
                        field1 + "=" field2 + "\">");
out.println("<INPUT VALUE=\"" + BUTTONVAL + "\" TYPE=\"SUBMIT\">");

Here is javascript:

function valCheck(url)
{
    //url is servlet that inturn query a database a returns a value
    request = createRequestObject();
    request.onreadystatechange = onResponse;
    request.open("POST", url, false);
    request.send(url);
}
 
function createRequestObject()
{
    if(window.XMLHttpRequest)
    {
      obj = new XMLHttpRequest();
    }
    else if(window.ActiveXObject)
    {
      obj = new ActiveXObject("MSXML2.XMLHTTP");
    }
    return obj;
}
 
function checkReadyState(obj)
{
    if(obj.readyState == 4)
    {
        if(obj.status == 200)
        {
            return true;
        }
        else
        {
            alert("HTTP " + obj.status);
        }
    }
}
 
function onResponse() 
{
    if(checkReadyState(request))
    {
      var response = request.responseText;
      if(response == "PASS")
      {
        temp = window.confirm('Are you sure?');
        if(temp)
        {
          return true;
        }
        else
        {
          return false;
        }
      }
      else
      {
alert("Invalid value can not submit");
return false;
      }
    }
}

In onResponse function above no matter if it returns true or false the FORM keeps on submitting. Any help is appreciated.
Thanks

[Gregg Bolinger]

Your valCheck function doesn't return anything. It would need to return false to keep the form from submitting.

[Carlos Juan]

Thanks, It's working just did some testing and so far all ok, It works in IE but some how FireFox it does not work. I don't know if it's because of the following or am I missing something else:

if(window.XMLHttpRequest)
    {
        obj = new XMLHttpRequest();
    }
    else if(window.ActiveXObject)
    {
        obj = new ActiveXObject("MSXML2.XMLHTTP");
    }

Here is the javascript change I made.

var str;
function valCheck(url)
{
    //url is servlet that inturn query a database a returns a value
    request = createRequestObject();
    request.onreadystatechange = onResponse;
    request.open("POST", url, false);
    request.send(url);
    if(str == "PASS")
      return true;
    else
      return false;
}
 
function createRequestObject()
{
    if(window.XMLHttpRequest)
    {
      obj = new XMLHttpRequest();
    }
    else if(window.ActiveXObject)
    {
      obj = new ActiveXObject("MSXML2.XMLHTTP");
    }
    return obj;
}
 
function checkReadyState(obj)
{
    if(obj.readyState == 4)
    {
        if(obj.status == 200)
        {
            return true;
        }
        else
        {
            alert("HTTP " + obj.status);
        }
    }
}
 
function onResponse() 
{
    if(checkReadyState(request))
    {
      var response = request.responseText;
      if(response == "PASS")
      {
        temp = window.confirm('Are you sure?');
        if(temp)
        {
          str = "PASS";
  return true;
        }
        else
        {
          str = "FAIL";
  return false;
        }
      }
      else
      {
alert("Invalid value can not submit");
str = "FAIL";
return false;
      }
    }
}

Is there anything else I have to do to make it work in FireFox/Netscape. Any help is appreciated.

Thanks

[Pavan Keely]

Hi,

Seems like you have basic misunderstanding about Ajax. You are making synchronous calls, not "A"synchronous calls.

Second thing I want to say is, there is no need for callbacks if you are using synchronous calls. You unnecessarily complicated the code by having those callbacks for synchronous requests.

function valCheck(url)
{
//url is servlet that inturn query a database a returns a value
request = createRequestObject();
request.onreadystatechange = onResponse;
request.open("POST", url, false);
request.send(url);

if( request.status == 200 ) {
var str = request.responseText;
// do whatever you are doing in callback handler.
}
else {
//write error handling code here.
}


If you really mean to use asynchronous calls, then change your submit button to normal button and onclick process the asynchronus call and submit form once you get confirmation from server.