如何在单击时禁用提交按钮并将表单数据提交到 perl 脚本？答案

【问题标题】：how to disable a submit button on clicking and submit the form data to perl script?如何在单击时禁用提交按钮并将表单数据提交到 perl 脚本？
【发布时间】：2013-08-19 10:58:31
【问题描述】：

我有一个 html 表单。当按下提交按钮时，将调用一个 perl 脚本并将表单数据提交给 perl 脚本。该表单包含一个文本框和一个提交按钮。提交按钮还验证文本框是否包含某些值。如果它包含 ot 提交表单，则它会提醒一条消息。下面是示例代码：

<html>
        <head>
                <title>files move</title>

                <script type="text/javascript">

                  function check_filename()
                  {
                                if (!frm1.FileName.value)
                                {
                                        alert ("No File is selected to Move");
                                        return false;
                                }
                                else
                          {
                                        document.getElementById("btn_sbmt").disabled = 'true'
                                        return true;
                          }
                  }
                </script>
        </head>

    <body>

                <form id="frm1" name="frm1" action="/cgi-bin/sample_move.pl" method="GET">

            <input type="text" name="FileName" id="FileName">
                        <input type="submit" name="btn_sbmt" id="btn_sbmt" value="MOVE FILES" onclick="return check_filename();">

                </form>
        </body>
</html>

当我点击提交按钮时，我想首先检查文本框是否包含一些值。如果它包含那么我想调用 perl 脚本并禁用提交按钮以避免多次单击提交按钮。上面的代码检查文本框是否为空，如果不为空，则禁用提交按钮，但不会将表单提交到 perl 脚本。谁能告诉我该怎么做？

【问题讨论】：

标签： javascript html

【解决方案1】：

此示例基于您的示例。

function check_filename()
{
    if (!frm1.FileName.value)
    {
        alert ("No File is selected to Move");
        return false;
    }
    else
    {
        document.getElementById("btn_sbmt").disabled = 'true';
        document.getElementById("frm1").submit();
        return true;
     }
}

对于更简洁的版本，您可以使用 jQuery。 http://api.jquery.com/submit/

【讨论】：

当按钮为type="submit"且事件处理程序返回true时，为什么还要调用.submit()？
谢谢它的工作。我不熟悉jquery，所以我使用了javascript。还需要一个小功能。当表单提交并且提交按钮被禁用时，如何将提交按钮标题更改为“正在处理..”？
您可以使用此代码document.getElementById("btn_sbmt").value = "Processing...";

【解决方案2】：

在你的 else 部分添加这一行

document.getElementById("frm").submit();

【讨论】：

感谢您的回复。但问题没有解决。它仍然禁用提交按钮，但没有调用 perl 脚本。