Question

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

编辑：
form.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>

process.php

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

Answer 1

$('button').fadeOut();

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

$('button').fadeIn();

这会使我们的按钮褪色，然后将其淡入。重新设置按钮是不必要的，不应该完成。

Answer 2

因此，如果我理解你想要什么，你可以做到以下几点：

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方法，如果你已经挂钩表单提交事件，则不需要它。

php脚本完成后恢复提交按钮

2 个答案: