how to set flag or indicator through ajax in php?

Question

I am creating a join now page.I am taking login name,password, confirm password and email to be register. these inputs I am validating through javascript and I am checking that login name does exist already or not through ajax.If it exists I am simply displaying a msg that this id exists already please chose another one.
Problem: is that if a user typed a login id that already exists, ajax will show that is exists already but still user can click on submit because this time JavaScript will pass it because login id field is not empty.even I can check this on server side db process but I want to set one indicator or flag kind of, until and unless user enters such login id that does not exist he wont be able to submit form. my ajax code-

...  
xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("loginName").innerHTML=xmlhttp.responseText;
            }
          }
...

db file -

//check in user table  
if($num_rows == 0)
{
    echo "<font color='Green'>Ok, you can chose <b>$logid</b> as Login name.</font>";
}
elseif($num_rows >= 1)
{
echo "<font color='Red'><b>$logid</b> Ligin name has already been taken, Please chose another Login name.</font>";
}

Or how can I set login Id text box to empty string along with the error msg from ajax?something like-

elseif($num_rows >= 1)
{
?>
    <script>
        document.getElementById("newid").value="";
    </script>
<?php
echo "<font color='Red'><b>$logid</b> Ligin name has already been taken, Please  chose another Login name.</font>";
}

Answer 1

You could do something like setting the form to disabled and then enabling it when they've selected a login that is available:

if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
    document.getElementById("loginName").innerHTML=xmlhttp.responseText;
    document.getElementById('id-of-form').disabled = false;
}

I personally wouldn't worry about it too much because you must recheck it on form submission anyway, because if a) they have JS turned off or b) select the same login as someone else who is also about to join now in the same instant (race condition), you need to make sure they don't both succeed. Checking a login name is a useability feature to help people not hate you and your web site for making them resubmit a form dozens of times to find a good login.

Answer 2

I think this should do
create a form like this

<form name="name1" method="post" action="url" onsubmit="return checkForm(this)">
    <!-- your fields here -->
    <!-- add an hidden field -->
    <input type="hidden" id="hidden1" name="hiddenf" value="0" />
</form>
<script>
function checkForm(form)
{
   return form.hiddenf.value;
}
</script>

Then in the ajax callback function

...  
          xmlhttp.onreadystatechange=function()
          {
             if (xmlhttp.readyState==4 && xmlhttp.status==200)
             {
                 document.getElementById("loginName").innerHTML=xmlhttp.responseText;
                 if(xmlhttp.responseText == 'not found') //your exist-id-message here
                    document.getElementById('hidden1').value = 0;
                 else
                    document.getElementById('hidden1').value = 1;
          }
...