drxp993551
drxp993551
2015-05-07 11:09

AJAX验证无效(提交按钮启用/禁用)

已采纳

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:

enter image description here

Image 2:

enter image description here

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">&nbsp;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('&nbsp;');
                                                    $('#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">&nbsp;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('&nbsp;');
                                                    $('#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">&nbsp;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('&nbsp;');
                                                    $('#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">&nbsp;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('&nbsp;');
                                                    $('#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:&nbsp;</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:&nbsp;</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):&nbsp;</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):&nbsp;</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>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • douqin3245 douqin3245 6年前
    <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()
                    {
                        var flagemail=false;
                        var flagemobile=false;
                        var flagepropesed=false;
                        var flagesecondby=false;
    
                        $("#email").change(function()
                        { 
                            var eml = $("#email").val();
                            $("#status").html('<img src="loader.gif" align="absmiddle">&nbsp;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('&nbsp;');
                                                       flagemail=true;
                                                    }  
                                                    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">&nbsp;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('&nbsp;');
                                                        flagemobile=true;
                                                    }  
                                                    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">&nbsp;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('&nbsp;');
                                                        flagepropesed=true;
                                                    }  
                                                    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">&nbsp;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('&nbsp;');
                                                        flagesecondby=true;
                                                    }  
                                                    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');
                       // Check This If all Flags are true then remove
                        if(flagemail==true && flagemobile==true && flagepropesed==true && flagesecondby == true)
                        {
                             $('#submit').removeAttr('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:&nbsp;</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:&nbsp;</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):&nbsp;</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):&nbsp;</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>
    

    try this it may help you

    点赞 评论 复制链接分享