堆棧內存溢出
  簡體   English   中英

如何禁用提交按鈕，直到在特定字段中通過驗證

[英]How to disable submit button until validation passed in specific field

 原文  2016-04-06 08:04:57  3   5    javascript/ php/ jquery/ forms

問題描述

我正在嘗試提交表格。 在表單中，我有一個名為sitename的字段。 如果用戶輸入數據庫中已經存在的站點名稱，它將顯示消息“該名稱已被使用”並給出一些建議。 到目前為止，它仍然有效。 但是我想要的是隱藏提交按鈕，直到用戶在該字段中輸入有效值為止。

這是我的代碼：

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 個解決方案

解決方案1
 1 已采納  2016-04-06 08:15:14

試試這個代碼， 

<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;
}

?>

解決方案2
 1  2016-04-06 08:22:15

您將需要跟蹤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版以來，不推薦使用mysql_*函數，而在7版中已將其刪除。這本身就足以表明您需要繼續並使用更安全且受到積極支持的功能。

2） mysql_real_escape_string和mysqli_real_escape_string不安全，因為它們不能可靠地考慮服務器編碼。 為了安全起見，請使用真實的預備語句（即在MySQL服務器上預備的預備語句）。

解決方案3
 1  2016-04-06 08:23:44

我建議您使用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>"]);
    }
}
?>

解決方案4
 0  2016-04-06 08:15:20

                  $.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參數。

解決方案5
 0  2016-04-06 08:16:43

在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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何禁用提交按鈕，直到選擇特定的下拉列表項？ 禁用提交按鈕，直到在數據庫上驗證字段 如何根據 vuejs 中輸入字段的錯誤驗證禁用提交按鈕？ 如何在選擇文件之前禁用提交按鈕 bootstrap 4驗證禁用提交按鈕，直到表單驗證 禁用提交按鈕，直到隱藏字段包含內容 在輸入字段中輸入文本之前，如何禁用提交按鈕？ 如何禁用某些提交按鈕的表單驗證？ 如果字段之一為空，如何禁用提交按鈕？ 如何禁用特定類下的提交按鈕
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM