JavaScript/Ajax: Populate a Hidden Field

Question

Hey, you programmers have been extremely helpful to me in the past, so I thought I'd ask my question here, again. It's probably a simple fix, but I'm new to JavaScript and Ajax.

What I have working is Ajax that writes to a a responseText stating, "LOCATION NOT FOUND" if it is not found when a text field loses focus. What I'd like to have done is to prevent the form from submitting if this responseText is present. I know how to prevent the form from submitting if a hidden field has the value LOCATION NOT FOUND, so I was thinking that having JavaScript populate the hidden field with the responseText might be the easiest solution? Not sure if that will work or how to go about doing it.

Here's my current JS:

 <script type="text/javascript">
  <!-- 
  function newXMLHttpRequest() 
  {
   var xmlreq = false;
   if (window.XMLHttpRequest) 
   {
    xmlreq = new XMLHttpRequest();
   } 
   else if (window.ActiveXObject) 
   {
    try 
    {
     xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e2) 
    {
     alert("Error: Unable to create an XMLHttpRequest.");
    }
   }
   return xmlreq;
  }
  function getLocation(locationrouting) 
    {
   var getLocation= newXMLHttpRequest(); // sending request
   getLocation.open("GET", "/PP?PAGE=GETLOCATIONNAME&ROUTINGNUM=" + locationrouting, false);
   getLocation.send(null); // getting location

     var dv = document.getElementById("location_div");

     if (getlocation.responseText === 'LOCATION NOT FOUND')
     {
       dv.style.color = "red";
     }
      else 
     {
      dv.style.color = "black";
    }
   dv.innerHTML = getLocation.responseText;
    }
  //-->
 </script>

Here is the applicable part of the form:

    <form name="locationform" id="locationform" action="/PP?PAGE=POSTADDLOCATION" method="post">
        <tr>
         <td class="ajax_msg">
            <div id="location_div">/div>       
         </td>
        </tr>
        <tr>
     <td>
       <div class="column1" id="locationrouting_div">
             <p class="label_top">
*Routing Number</p>
         <p class="field_top">
                  <input type="text" id="locationrouting" name="locationrouting" size="28" maxlength="9" onblur="getLocation(this.value);" /></p>

    ...

Thanks in advance!

Answer 1

If you don't want the form to submit if the location isn't found, the easiest way would probably be just query the server before submitting. This be a lot easier to implement and to use than checking the status of a query that may or may not have happened previously via its side effects. :D

Answer 2

As an option you can create javascript variable var isSubmitAllowed = true;, set this variable to false when location is not found and check this variable to prevent form submitting.

Something like:

<script type="text/javascript">
  <!-- 
  var isSubmitAllowed = true;

  function newXMLHttpRequest() 
  {
   var xmlreq = false;
   if (window.XMLHttpRequest) 
   {
    xmlreq = new XMLHttpRequest();
   } 
   else if (window.ActiveXObject) 
   {
    try 
    {
     xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e2) 
    {
     alert("Error: Unable to create an XMLHttpRequest.");
    }
   }
   return xmlreq;
  }
  function getLocation(locationrouting) 
    {
   var getLocation= newXMLHttpRequest(); // sending request
   getLocation.open("GET", "/PP?PAGE=GETLOCATIONNAME&ROUTINGNUM=" + locationrouting, false);
   getLocation.send(null); // getting location

     var dv = document.getElementById("location_div");

     if (getlocation.responseText === 'LOCATION NOT FOUND')
     {
       dv.style.color = "red";
       isSubmitAllowed = false;
     }
      else 
     {
      dv.style.color = "black";
      isSubmitAllowed = true;
    }
   dv.innerHTML = getLocation.responseText;
    }
  //-->
 </script>

Then in Form tag you can add onSubmit event handler that will return isSubmitAllowed value:

<form name="locationform" id="locationform" action="/PP?PAGE=POSTADDLOCATION" method="post" onSubmit="return isSubmitAllowed">