My ajax form has 4 fields.
The condition is as follows:
Initially,the submit button is disabled.
After entering a valid,unregistered email-id and a valid mobile number this submit button should get enabled.
But even if I enter a registered email-id and valid mobile number button is getting enabled but actually it should be disabled as the entered email-id is already exist in database.
Image 1:
Image 2:
Code snippet:
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
<!--
pic1 = new Image(16, 16);
pic1.src = "loader.gif";
$(document).ready(function()
{
$("#email").change(function()
{
var eml = $("#email").val();
$("#status").html('<img src="loader.gif" align="absmiddle"> Checking availability...');
$.ajax({
type: "POST",
url: "echeck.php",
data: "email="+ eml,
success: function(msg)
{
$("#status").ajaxComplete(function(event, request, settings)
{
if(msg == 'Not Exists')
{
$("#email").removeClass('object_error'); // if necessary
$("#email").addClass("object_ok");
$(this).html(' ');
$('#submit').removeAttr('disabled');
}
else
{
$("#email").removeClass('object_ok'); // if necessary
$("#email").addClass("object_error");
$(this).html(msg);
$('#submit').attr('disabled', 'disabled');
}
});
}
});
});
$("#mobile").change(function()
{
var mbe = $("#mobile").val();
if(mbe.length >= 10)
{
$("#mstatus").html('<img src="loader.gif" align="absmiddle"> Checking availability...');
$.ajax({
type: "POST",
url: "mcheck.php",
data: "mobile="+ mbe,
success: function(msg)
{
$("#mstatus").ajaxComplete(function(event, request, settings)
{
if(msg == 'OK')
{
$("#mobile").removeClass('object_error'); // if necessary
$("#mobile").addClass("object_ok");
$(this).html(' ');
$('#submit').removeAttr('disabled');
}
else
{
$("#mobile").removeClass('object_ok'); // if necessary
$("#mobile").addClass("object_error");
$(this).html(msg);
$('#submit').attr('disabled', 'disabled');
}
});
}
});
}
else
{
$("#mstatus").html('<font color="red">The Mobile should have at least <strong>10</strong> characters.</font>');
$("#mobile").removeClass('object_ok'); // if necessary
$("#mobile").addClass("object_error");
$('#submit').attr('disabled', 'disabled');
}
});
$("#proposedby").change(function()
{
var pisa = $("#proposedby").val();
if(pisa.length >= 4)
{
$("#proposedby_status").html('<img src="loader.gif" align="absmiddle"> Checking availability...');
$.ajax({
type: "POST",
url: "pcheck.php",
data: "proposedby="+ pisa,
success: function(msg)
{
$("#proposedby_status").ajaxComplete(function(event, request, settings)
{
if(msg == 'OK')
{
$("#proposedby").removeClass('object_error'); // if necessary
$("#proposedby").addClass("object_ok");
$(this).html(' ');
$('#submit').removeAttr('disabled');
}
else
{
$("#proposedby").removeClass('object_ok'); // if necessary
$("#proposedby").addClass("object_error");
$('#submit').attr('disabled', 'disabled');
$(this).html(msg);
}
});
}
});
}
else
{
$("#proposedby_status").html('<font color="red">The Proposed by ISA No should have at least <strong>4</strong> characters.</font>');
$("#proposedby").removeClass('object_ok'); // if necessary
$("#proposedby").addClass("object_error");
$('#submit').attr('disabled', 'disabled');
}
});
$("#secondedby").change(function()
{
var sisa = $("#secondedby").val();
if(sisa.length >= 4)
{
$("#secondedby_status").html('<img src="loader.gif" align="absmiddle"> Checking availability...');
$.ajax({
type: "POST",
url: "scheck.php",
data: "secondedby="+ sisa,
success: function(msg)
{
$("#secondedby_status").ajaxComplete(function(event, request, settings)
{
if(msg == 'OK')
{
$("#secondedby").removeClass('object_error'); // if necessary
$("#secondedby").addClass("object_ok");
$(this).html(' ');
$('#submit').removeAttr('disabled');
}
else
{
$("#secondedby").removeClass('object_ok'); // if necessary
$("#secondedby").addClass("object_error");
$(this).html(msg);
$('#submit').attr('disabled', 'disabled');
}
});
}
});
}
else
{
$("#secondedby_status").html('<font color="red">The Seconded by ISA No should have at least <strong>4</strong> characters.</font>');
$("#secondedby").removeClass('object_ok'); // if necessary
$("#secondedby").addClass("object_error");
$('#submit').attr('disabled', 'disabled');
}
});
$('#submit').attr('disabled', 'disabled');
});
-->
</script>
<center>
<div align="center">
<h2 align="center">AJAX Username Verification</h2>
<form action="#" method="post">
<table width="700" border="0">
<tr>
<td width="200"><div align="right">Email-Id: </div></td>
<td width="100"><input type="email" id="email" name="email" pattern="^[a-zA-Z0-9-\_.]+@[a-zA-Z0-9-\_.]+\.[a-zA-Z0-9.]{2,3}$" /></td>
<td width="400" align="left"><div id="status"></div></td>
</tr>
<tr>
<td width="200"><div align="right">Mobile: </div></td>
<td width="100"><input type="text" name="mobile" id="mobile" pattern="^[0-9-]+" maxlength="10" /></td>
<td width="400" align="left"><div id="mstatus"></div></td>
</tr>
<tr>
<td width="200"><div align="right">Proposed By (Isa no): </div></td>
<td width="100"><input type="text" name="proposedby" id="proposedby" /></td>
<td width="400" align="left"><div id="proposedby_status"></div></td>
</tr>
<tr>
<td width="200"><div align="right">Seconded By (Isa no): </div></td>
<td width="100"><input type="text" name="secondedby" id="secondedby" /></td>
<td width="400" align="left"><div id="secondedby_status"></div></td>
</tr>
<tr>
<td colspan="3"><input type="submit" name="submit" id="submit" value="submit" /></td>
</tr>
</table>
</form>
</div>
</center>
