如何在特定字段中传递验证之前禁用提交按钮

时间：2016-04-06 08:04:58

标签： javascript php jquery forms

我正在尝试提交表单。在表单中，我有一个字段calles sitename。如果用户输入已经在数据库中的网站名称，它将显示消息＆＃34;该名称已被使用＆＃34;并提出一些建议。到目前为止，它的工作原理。但我想要的是隐藏提交按钮，直到用户输入该字段的有效值。

这是我的代码：

form.php的：

<script type="text/javascript">
    $(document).ready(function(){
        $("#sitename").keyup(function() {
            var sitename = $('#sitename').val();
            if(sitename=="")
                {
                $("#disp").html("");
            }

            else
                {
                $.ajax({
                    type: "POST",
                    url: "check_name.php",
                    data: "sitename="+ sitename ,
                    success: function(html){
                        $("#disp").html(html);
                    }
                });
                return false;
            }
        });
    });
</script>

<div class="form-group col-sm-3 col-xs-12">
<button class="btn btn-1 btn-fill" type="submit" id="btn-signup" name="btn-signup">Submit</button>
</div>

check_name.php：

include('dbconnect.php');
if(isset($_POST['sitename']))
{
    $sitename=mysql_real_escape_string($_POST['sitename']);
    $query=mysql_query("select * from template_users where sitename='$sitename'");
    $row=mysql_num_rows($query);
    if($row==0)
    {
        /*echo "<span style='color:white;'>Available</span>";*/
    }
    else
    {

        $msg = $sitename.rand ( 1 , 10000 );
        $msg1 = $sitename.rand ( 1 , 100 );

        echo "<span style='color:antiquewhite;' ><b>Already exist please Use different Site Name such as<br/> $msg<br/>$msg1<br/><b/></span>";
    }
}

5 个答案:

答案 0 :(得分：1)

试试这段代码，

<script type="text/javascript">
    $(document).ready(function(){
        $("#sitename").keyup(function() {
            var sitename = $('#sitename').val();
            if(sitename=="")
            {
                $("#disp").html("");
            }

            else
            {
                $.ajax({
                    type: "POST",
                    url: "check_name.php",
                    data: "sitename="+ sitename ,
                    success: function(html){
                        if(html != 'success')
                        {
                             $("#disp").html(html);
                             $("#btn-signup").hide();
                        }
                        else
                        {
                             $("#btn-signup").show();
                        }
                    },

                });
                return false;
            }
        });
    });
</script>

<div class="form-group col-sm-3 col-xs-12">
    <button class="btn btn-1 btn-fill" type="submit" id="btn-signup" name="btn-signup" style="display:none;">Submit</button>
</div>

在你的check_name.php

中 
<?php

include('dbconnect.php');
if(isset($_POST['sitename']))
{
    $sitename=mysql_real_escape_string($_POST['sitename']);
    $query=mysql_query("select * from template_users where sitename='$sitename'");
    $row=mysql_num_rows($query);
    if($row==0)
    {
        echo "success"; 
    }
    else
    {

        $msg = $sitename.rand ( 1 , 10000 );
        $msg1 = $sitename.rand ( 1 , 100 );

        echo "<span style='color:antiquewhite;' ><b>Already exist please Use different Site Name such as<br/> $msg<br/>$msg1<br/><b/></span>";
    }
    die;
}

?>

答案 1 :(得分：1)

您需要跟踪PHP脚本的结果。 将您的代码更改为：

<强> PHP 

<?php

include('dbconnect.php');
if(isset($_POST['sitename']))
{
    $sitename=mysql_real_escape_string($_POST['sitename']); 
    $query=mysql_query("select * from template_users where sitename='$sitename'"); 
    $row=mysql_num_rows($query);
    if($row==0)
    {

        echo json_encode([ "status" => 1, "html" => "<span style='color:white;'>Available</span>" ]);
    }
    else
    {

        $msg = $sitename.rand ( 1 , 10000 );
        $msg1 = $sitename.rand ( 1 , 100 );
        echo json_encode([ "status" => 0, "html" => "<span style='color:antiquewhite;' ><b>Already exist please Use different Site Name such as<br/> $msg<br/>$msg1<br/><b/></span>" ]);    
    }
}

?>

<强> HTML 

<script type="text/javascript">
    $(document).ready(function () {
        $("#btn-signup").hide();
        $("#sitename").keyup(function () {
            $("#btn-signup").hide(); 
            var sitename = $('#sitename').val();            
            if (sitename == "")
            {
                $("#disp").html("");
            }

            else
            {
                $.ajax({
                    type: "POST",
                    url: "check_name.php",
                    data: "sitename=" + sitename,
                    dataType: "json",
                    success: function (result) {
                        if (result.status == 1) {
                            $("#btn-signup").show();
                        }
                        $("#disp").html(result.html);
                    }
                });
                return false;
            }
        });
    });
</script>

<div class="form-group col-sm-3 col-xs-12">
    <button class="btn btn-1 btn-fill" type="submit" id="btn-signup" name="btn-signup">Submit</button>
</div>

也就是说，在开始时隐藏按钮，如果用户输入内容，则隐藏按钮并等待文本验证。如果有效，请显示它。如果用户更改了文本，则该按钮将再次隐藏。

请注意：

1）从版本5.5开始，{@ 1}}函数已被弃用，并且已在版本7中删除。这本身就足以表明您需要继续前进并使用更安全且更有效支持的内容。

2）mysql_*和mysql_real_escape_string不安全，因为他们无法可靠地考虑服务器编码。如果您想要安全，请使用真实的预处理语句（即在MySQL服务器上准备的预处理语句）。

答案 2 :(得分：1)

我建议你使用json返回这样的数据：

{
    "status": "success",
    "html"  : "<span style='color:antiquewhite;' ><b>Already exist please Use different Site Name such as<br/> $msg<br/>$msg1<br/><b/></span>"
}

这是javascript代码：

$(document).ready(function()
{
    /** Hide the button first */
    $('button').hide();

    $('#sitename').on('input', function()
    {
        var sitename = $('#sitename').val();

        if(sitename == '')
        {
            $("#disp").html("");
        }
        else
        {
            $.ajax(
            {
                type    : "POST",
                dataType: "json"
                url     : "check_name.php",
                data    : "sitename=" + sitename ,
                success : function(data)
                {
                    /** When the data is invalid */
                    if(data.status === 'error')
                    {
                        $('button').hide();
                        $("#disp").html(data.html);
                    }
                    else
                    {
                        $('button').show();
                        /** Hide the html when the data is valid */
                        $("#disp").html('');
                    }
                },
            });
        }
    })
});

你的php代码：

<?php
include('dbconnect.php');
header('Content-Type: application/json; charset=utf-8');

if(isset($_POST['sitename']))
{
    $sitename = mysql_real_escape_string($_POST['sitename']);
    $query    = mysql_query("select * from template_users where sitename='$sitename'");
    $row      = mysql_num_rows($query);

    if($row == 0)
    {
        echo json_encode(['status' => 'success',
                          'html'   => "<span style='color:white;'>Available</span>"]);
    }
    else
    {
        $msg  = $sitename.rand ( 1 , 10000 );
        $msg1 = $sitename.rand ( 1 , 100 );

        echo json_encode(['status' => 'error',
                          'html'   => "<span style='color:antiquewhite;' ><b>Already exist please Use different Site Name such as<br/> $msg<br/>$msg1<br/><b/></span>"]);
    }
}
?>

答案 3 :(得分：0)

                  $.ajax({
                        type: "POST",
                        url: "check_name.php",
                        data: "sitename="+ sitename ,
                        success: function(html){
                            if(html !== "") {
                              $("#btn-signu").attr("disabled", true);
                            }
                            else {
                              $("#btn-signu").removeAttr("disabled");
                            }

                            $("#disp").html(html);

                        }
                    });

检查成功回调函数中的html参数。

答案 4 :(得分：0)

在form.php中将Javascript更改为：

<script type="text/javascript">
    $(document).ready(function(){
        //get the button by its ID
        var $button = $('#btn-signup');
        $("#sitename").keyup(function() {

            //hide the button always
            $button.hide();

            var sitename = $('#sitename').val();
            if(sitename=="")
            {
                $("#disp").html("");
            }

            else
            {

                $.ajax({
                    type: "POST",
                    url: "check_name.php",
                    data: "sitename="+ sitename ,
                    success: function(html){
                        $("#disp").html(html);

                        if(!html.length){
                            //show the submit button if no error html
                            $button.show();
                        }
                    }
                });
                return false;
            }
        });
    });
</script>

按钮应该是初始隐藏的。如果可以预填充该字段，则需要在隐藏按钮之前检查该值是否为空。 

<div class="form-group col-sm-3 col-xs-12">
   <button class="btn btn-1 btn-fill" type="submit" id="btn-signup" name="btn-signup" style="display:none">Submit</button>
</div>
相关问题
最新问题