Question

以下是删除记录的脚本。我尝试使用php变量插入下面的表单，以在同一页面中发布该值。但是我不知道如何在我的脚本中插入它。我的表单中的脚本会自动提交。

我想在动画后执行表单。

此动画后

$(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
                .animate({ opacity: "hide" }, "slow");

表格

echo'
<form method="post" action="app_list2.php" id="dateForm" name="dateForm">
<div style="display:none;">
<input name="drop_1" type="hidden" value="'.$drop.'" style="background-color:blue;"><input name="tier_two" type="hidden" value="'.$tier_two.'">
<input type="submit" name="autosubmit"></div>
</form>';
echo'<script type="text/javascript">
document.getElementsByName("autosubmit")[0].click(); // SUBMIT FORM
</script>';

}

脚本

 <script>
$(function() {
$(".delbutton").click(function(){
var element = $(this);
var del_id = element.attr("id");
var info = 'id=' + del_id;
 if(confirm("Sure you want to delete this update? There is NO undo!"))
          {
 $.ajax({
   type: "GET",
   url: "delete.php",
   data: info,
   success: function(){
   }
 });
         $(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
        .animate({ opacity: "hide" }, "slow");
 }
return false;
});
});
  </script>

Answer 1

将表单的html写入div中，并将其设置为style =“display：none;”。这将使页面加载时不可见。然后在动画完成后，可以调用窗体div上的.show()方法使其可见。您需要使用.animate()定义回调函数。以下来自JQuery的docs的示例显示了：

$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000, function() {
    // This is the body of the callback function.
    // you need to make the form div visible from inside here
    // For example, $("#my-hidden-form-div").show()
  });
});

您可以找到更多示例here。

Answer 2

jQuery.animate()的最后一个参数将采用一个在动画完成时回调的函数。在这种情况下，您希望它显示表单。您还需要将style="display:none"设置为表单的CSS，以便在调用$("#dateForm").show()之前将其隐藏。

<?php

echo'
<form method="post" action="app_list2.php" id="dateForm" name="dateForm">
<div style="display:none;">
<input name="drop_1" type="hidden" value="'.$drop.'" style="background-color:blue;"><input name="tier_two" type="hidden" value="'.$tier_two.'">
<input type="submit" name="autosubmit"></div>
</form>';
}

?>

 <script>
$(function() {
$(".delbutton").click(function(){
var element = $(this);
var del_id = element.attr("id");
var info = 'id=' + del_id;
 if(confirm("Sure you want to delete this update? There is NO undo!"))
          {
 $.ajax({
   type: "GET",
   url: "delete.php",
   data: info,
   success: function(){
   }
 });
    $(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
        .animate({ opacity: "hide" }, "slow", function() {
            $("#dateForm").submit();
        });
 }
return false;
});
});
  </script>

在脚本中插入html表单

2 个答案: