首页 > 解决方案 > 当文本框在 Ajax 查询中为空时启用按钮

问题描述

在我的login表单中,我Ajax用来验证email地址是否已经存在。mysql database.当我输入email地址时,ajax查询会自动显示消息是否可用。submit button在这种情况下,如果email已经在 中,我将被禁用database,在文本框变为空后submit button变为具有它,它不能移动到以前的状态(启用)。

我有一个java script要启用的代码,但它效率不高,因为当我一次完全删除电子邮件字段中的可用文本时,它仍然button被禁用

我尝试了以下特定代码段

HTML

 <span id="success_mes" class="text-success"></span>

                    <form name="poster" id="poster" method="post" class="s12" data-toggle="validator">
                        <div>
                            <div class="input-field s12">
                                <input type="text" id="username" name="username" data-ng-model="name1" class="validate"
                                    required>
                                <label>User name</label>
                                <span id="userName-info" class="info text-danger"></span><br />

                            </div>
                        </div>
                        <div>
                            <div class="input-field s12">
                                <input type="email" id="email" name="email"  onblur="checkemail();" onkeyup="checkemail();" onchange="checkemail();" class="validate" required>
                                <label>Email id</label>
                                <span id="userEmail-info" class="info"></span>
                                <span id="email_status" name="email_status"></span>

                            </div>
                        </div>
                        <div>
                            <div class="input-field s12">
                                <input type="password" name="password" id="password" class="validate" required>
                                <label>Password</label>
                                <span id="pass" class="info text-danger"></span><br />

                            </div>
                        </div>
                        <div>
                            <div class="input-field s12">
                                <input type="password" name="password1" id="password1" class="validate" required>
                                <label>Confirm password</label>
                                <span id="pass1" class="info text-danger"></span><br />

                            </div>
                        </div>
                        <span id="invalid" class="info text-danger"></span><br />

                        <div>
                            <div class="input-field s4">

                                <input type="button" value="Register" id="Register" name="Register"
                                    class="waves-effect waves-light log-in-btn">
                            </div>

                        </div>

                        <div>
                            <div class="input-field s12"> <a href="#" data-dismiss="modal" data-toggle="modal"
                                    data-target="#modal1">Are you a already member ? Login</a> </div>
                        </div>
                    </form>

这是我的Ajax查询

<script>

     if (!$('#email').val()) {
         $('#Register').show();
     }

    function checkemail() {
        var email = document.getElementById("email").value;

        if (email) {

            $.ajax({
                type: "POST", // type
                url: "phpquery/checkmail.php", // request file the 'check_email.php'
                data: {
               email: email,
                }, // post the data
                success: function (responseText) { // get the response
                    $('#email_status').html(responseText);
                    if (responseText == "This Email Address is Already Exist") { // if the response is 1
                        $("email_status").fadeIn().html(responseText);
                        //         setTimeout(function(){  
                        //        $('#email_status').fadeOut("Slow");  
                        //   }, 2000); 
                        $('#Register').hide();
                        return true;
                        // $("span.loading").html("");

                    } else { // else blank response

                        if (responseText == "You can use this Email ID") {
                            $("email_status").fadeIn().html(responseText);
                            setTimeout(function () {
                                $('#email_status').fadeOut("Slow");
                            }, 2000);
                            $('#Register').show();
                            return false;

                            // $("email_status").html(" You are registred.");
                            // $("span.validation").html("");
                            // $("form input[type='text']").val(''); // optional: empty the field after registration
                        } else {


                        }

                    }
                } // end success
            }); // ajax end

        }
        else {
            $('#email_status').html("");
            return false;
        }
    }


</script>

这是我的php页面

<?php

include('dbconnection.php');

if(isset($_POST['email']))
{
 $email=$_POST['email'];

 $checkdata=" SELECT email FROM patients WHERE email='$email' ";

 $query=mysqli_query($con,$checkdata);

 if(mysqli_num_rows($query)>0)
 {
  echo "This Email Address is Already Exist"; 
 }

 else

 {
echo "You can use this Email ID";
}
exit();
}

?>

请有人帮助我

标签: phpjqueryajax

解决方案


我测试了您的代码,一切正常(按钮隐藏和显示)。

您必须更改按钮的类型以提交以解决您的问题。

改变这个:

<input type="button" value="Register" id="Register" name="Register"
             class="waves-effect waves-light log-in-btn">

至:

<input type="submit" value="Register" id="Register" name="Register"
             class="waves-effect waves-light log-in-btn">

推荐阅读