Question

我有一张表格。

            <form action="login.php" method="post" id="form">
                <input type="text" name="name" class="textbox" id="name" placeholder="Username"><br /><br />
                <input type="password" name="pass" class="textbox" id="pass" placeholder="Password"><br /><br />
                <div id="holder">
                    <input type="submit" name="submit" value="Login" class="submit_wide">
                </div>
                <br />
            </form>

我想在点击时将提交输入的值更改为“请稍候......”。因此，当页面重定向时，用户将看到“请稍候......”。

我不想使用javascript发帖，我希望它重定向。

当我点击“登录”时，它会变为“请稍候”，但提交操作会停止，但当我再次点击时，会重定向。

出了什么问题，我该如何解决？

$(document).ready(function() {
            $(".submit_wide").click(function() 
            {
                if ($("#name").val() != '' && $("#pass").val() != '')
                {
                    $("#holder").html('<input type="submit" name="submit" value="Please wait.." class="submit_wide">');
                }
                else
                {
                    $("#error").fadeIn("slow");
                    $("#error").html('<span class="alert alert-error">Please fill ALL of the fields.</span>');
                    event.preventDefault();                 
                }
            });
        });

我尝试了什么：

添加

$("#form").submit();

在HTML更改行之后。

它和以前一样。

如何修复此问题以及导致此问题的原因？感谢。

Answer 1

试试这个：

$(".submit_wide").click(function (event) {
    if ($("#name").val() != '' && $("#pass").val() != '') {
        $(this).val('Please wait..');
    } else {
        event.preventDefault();
        $("#error").fadeIn("slow");
        $("#error").html('<span class="alert alert-error">Please fill ALL of the fields.</span>');
    }
});

Answer 2

替换

$("#holder").html('<input type="submit" name="submit" value="Please wait.." class="submit_wide">');

带

$('.submit_wide').val('please wait..');

当您使用html()时，它会删除您的提交按钮并创建一个新按钮。您应该只更改按钮的值。

Answer 3

要使其提交，您需要从提交处理程序返回true。

$(document).ready(function() {
            $(".submit_wide").click(function() 
            {
                if ($("#name").val() != '' && $("#pass").val() != '')
                {
                    $("#holder").html('<input type="submit" name="submit" value="Please wait.." class="submit_wide">');
                    return true;
                }
                else
                {
                    $("#error").fadeIn("slow");
                    $("#error").html('<span class="alert alert-error">Please fill ALL of the fields.</span>');            
                    return false;
                }
            });
        });

ps我只是改变提交的值而不是替换整个按钮。

Answer 4

将此设为您的html脚本：

<form action="login.php" method="post" id="form" onSubmit="return replaceIt()" >
                <input type="text" name="name" class="textbox" id="name" placeholder="Username"><br /><br />
                <input type="password" name="pass" class="textbox" id="pass" placeholder="Password"><br /><br />
                <div id="holder">
                    <input type="submit" name="submit" value="Login" class="submit_wide">
                </div>
                <br />
            </form>

这是你的JS功能：

function replaceIt() {
            if ($("#name").val() != '' && $("#pass").val() != '')
            {
                $("#holder").html('<input type="submit" name="submit" value="Please wait.." class="submit_wide">');
                return true;
            }
            else
            {
                $("#error").fadeIn("slow");
                $("#error").html('<span class="alert alert-error">Please fill ALL of the fields.</span>');
                return false;              
            }
    }

jQuery将提交值更改为“Please wait”＆amp;然后使用PHP提交表单

4 个答案: