在 php 脚本完成后恢复提交按钮 - Restoring submit button after php script finishes

Restoring submit button after php script finishes

本文关键字：恢复提交按钮 php 脚本 | 更新日期: 2023-09-27

我正在使用带有PHP的Ajax将数据发布到PHP并将输出发送到我的当前页面而不加载它，我使用提交按钮发送数据，当单击此按钮时，我将此按钮替换为加载.gif。现在，在 php 脚本完成后，我得到了输出，加载.gif继续显示。我的问题是如何在 PHP 脚本完成后恢复提交按钮，并且我想在不刷新页面的情况下提交更多数据？

编辑：
形式.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<head>
    <title>JQuery Form Example</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#myform").validate({
            submitHandler: function(form) {
                // do other stuff for a valid form
                $.post('process.php', $("#myform").serialize(), function(data) {
                    $('#results').html(data);
                });
            }
        });
    });
    </script>
    <script type="text/javascript">
    function ButtonClicked(){
    document.getElementById("formsubmitbutton").style.display = "none"; // to undisplay
     document.getElementById("buttonreplacement").style.display = ""; // to display
    return true;
    }

    </script>

</head>
<body>
<form name="myform" id="myform" action="" method="POST">  
<!-- The Name form field -->
    <label for="name" id="name_label">Name</label>  
    <input type="text" name="name" id="name" size="30" value=""/>  
    <br>
<!-- The Email form field -->
    <label for="email" id="email_label">Email</label>  
    <input type="text" name="email" id="email" size="30" value=""/> 
    <br>
<!-- The Submit button -->
                <div align="center" style="margin-bottom:-100px;" id="formsubmitbutton"><input  type="submit" value="Submit"  onclick="ButtonClicked()" /></div>
        <center><div   id="buttonreplacement" style="display:none;">
        <img src="http://redscopestudios.com/wp-content/uploads/edge_suite/project/red-scope_6/images/red_loader.gif"alt="loading..."></div></center>
</form>
<!-- We will output the results from process.php here -->
<div id="results"><div>
</body>
</html>

过程.php

<?php
    print "Form submitted successfully: <br>Your name is <b>".$_POST['name']."</b> and your email is <b>".$_POST['email']."</b><br>";
?>

因此，

如果我正确理解您想要什么，您可以执行以下操作：

submitHandler: function(form) {
    // do other stuff for a valid form
    $("#formsubmitbutton").hide();
    $("#buttonreplacement").show();
    $.post('process.php', $("#myform").serialize(), function(data) {
        $('#results').html(data);
        $("#formsubmitbutton").show();
        $("#buttonreplacement").hide();
    });
}

然后删除 ButtonClicked 方法，如果您已经挂接到表单提交事件，则不需要它。

$('button').fadeOut();

然后在 ajax 完成后（在回调中）

$('button').fadeIn();

这会淡化我们的按钮，然后将其淡入。更换按钮不是必需的，也不应该这样做。