Question

我有一个使用jQuery弹出的表单，当我点击提交时，表单提交，然后表单被替换为消息。当我按下关闭时，弹出框关闭。我遇到的问题是这样，如何在提交回初始状态（表单本身）之后删除进来的消息。

这就是我的代码。

<script type="text/javascript">
$(document).ready(function(){ 
    $('#send').click(function(){
        $.post('process.php', {option:$(".option").val(),picid:$("#picid").val()    },
        function(response){
            var message = 'thanks';
            $('#formMsg').html(message);
        }
        );
        return false;
    });
    $('#close').click(function(){
        $('#Container').fadeOut();
        $("#formData")[0].reset(); 
    });
}); 
</script>

Answer 1

删除这两行：

var message = 'thanks';
$('#formMsg').html(message);

Answer 2

您可以在表单中包含一个消息容器，并在需要时显示并隐藏结果所有内容，反之亦然。试试这个。

$(document).ready(function(){ 
   $('#send').click(function(){
         $.post('process.php', { 
               option: $(".option").val(), 
               picid: $("#picid").val() 
            },
            function(response){
               var $msg = $('#msgContianer');
               if($msg.length == 0){
                  $msg = $('<div id="msgContainer" />')  
                         .appendTo($('#Container'));   
               }
               $msg.html('thanks').show();
               $("#formData").hide();
         });
         return false;
   });
   $('#close').click(function(){
        $('#Container').fadeOut(500, function(){
           $("#formData").show()[0].reset(); 
           $('#msgContianer').hide();
        });
   });
});

Answer 3

您可能希望将表单缓存在变量中，然后在关闭表单窗口后，您将使用缓存变量中的HTML替换HTML。所以你的代码看起来像这样：

<script type="text/javascript">
$(document).ready(function(){ 
    // cache the formMsg selector and HTML
    var formMsg = $('#formMsg'),
        formHTML = formMsg.html();

    $('#send').click(function(){
        $.post('process.php', {option:$(".option").val(),picid:$("#picid").val()    },
            function(response){
                var message = 'thanks';
                formMsg.html(message);
            }
        );
        return false;
    });
    $('#close').click(function(){
        $('#Container').fadeOut();
        $("#formData")[0].reset();

        // replace the formMsg html with the html from the cached variable
        formMsg.html(formHTML);
    });
}); 
</script>

如何在提交表单后将jQuery弹出窗口设置回其初始状态

3 个答案: