在您想要的地方使用此功能

Question

我有一个包含modal的页面，在模态中有一个表单，在这种形式我在数据库中插入一些数据，我想在插入后显示弹出成功消息并且在同一个再次页面并清空模态中的表单输入。

HTML代码

<form action="AddNewFarmer.php" method="post" enctype="multipart/form-data">
     <!----Form Inputs--->
</form>

PHP代码

if($result->execute()) 
{   
?>
<script language="javascript">
      alert("Record inserted successfully");
</script>
<?php
}

Answer 1

id="myform"

在<form id="myform" action="AddNewFarmer.php" method="post" enctype="multipart/form-data">  </form> <script language="javascript"> alert("Record inserted successfully"); document.getElementById('myform').reset(); </script>等表单中添加ID，并使用上面的js代码。

所以基本上

AddNewFarmer.php

如果您不希望页面返回原始索引而不是?> // after you save return header('Location: yourfilename.php'); ?>，则可以返回原始页面。

{{1}}

Answer 2

试试这个

只需在页面中使用此功能和css

即可

的Javascript

function snackbar(name,classd){

if ($('#snackbar').length == 0) {
  $("body").append('<div id="snackbar"></div><div style="display:none;" id="overlay"></div>');
}
  $("#snackbar").removeClass().html(name).addClass("show").addClass(classd);setTimeout(function(){$("#snackbar").removeClass("show");},2500 );
}

CSS

#snackbar {
  visibility: hidden;
  /* Hidden by default. Visible on click */
  max-width: 250px;
  /* Set a default minimum width */
  background-color: #333;
  /* Black background color */
  color: #000;
  /* White text color */
  text-align: center;
  /* Centered text */
  border-radius: 2px;
  /* Rounded borders */
  padding: 16px;
  /* Padding */
  position: fixed;
  /* Sit on top of the screen */
  z-index: 1;
  /* Add a z-index if needed */
  right: 0;
  /* Center the snackbar */
  top: 60px
  /* 30px from the bottom */ }

/* Show the snackbar when clicking on a button (class added with JavaScript) */
/* line 54, styles.scss */
#snackbar.show {
  visibility: visible;
  /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar. 
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s; }

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {
    top: 0;
    opacity: 0; }
  to {
    top: 90px;
    opacity: 1; } }
@keyframes fadein {
  from {
    top: 0;
    opacity: 0; }
  to {
    top: 60px;
    opacity: 1; } }
@-webkit-keyframes fadeout {
  from {
    top: 60px;
    opacity: 1; }
  to {
    top: 0;
    opacity: 0; } }
@keyframes fadeout {
  from {
    top: 30px;
    opacity: 1; }
  to {
    top: 0;
    opacity: 0; } }
/* line 83, styles.scss */
.error {
  background: #ff4c4d !important; }

/* line 86, styles.scss */
.success {
  background: #71e8a4 !important; }

在您想要的地方使用此功能

<?php 
snackbar('please Enter All Details','error');
?>

Answer 3

在头部

中添加jquery文件

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>

你需要一些关于Ajax的知识，它将发送数据并获取数据而无需重新加载页面以便理解这一点，你必须放event.preventDefault();以防止重新加载

<script>
function(){
  $(document).ready(function() {
   $("#Button_id_submit").submit(function(event){
       event.preventDefault();
       var formdata = jQuery("#YourformId").serialize();
       $.ajax({
           url: "Your_preferred.php",
           type:"POST",
           data:formdata,
           });
        });
    alert("Record inserted successfully");
    document.getElementById('Your_form_ID').reset();
   });
 }
</script>

如何在同一页面中弹出成功消息

3 个答案:

试试这个

在您想要的地方使用此功能