单击使用 php 提交的 html 表单后弹出

Question

当我单击按钮时，我有一个提交按钮“证书副本”，它应该显示一个弹出窗口。 下面是我的html代码。

print "<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>";
print "<form action='details.php' name='copy' method='POST' target='_blank'>";


        print "<input type='hidden' name='certificate_name' value='$certificate_name'>";
        print "<input type='hidden' name='certificate_id' value='$certificate_id'>";


        print "<input type='submit' name='certificatecopy' id='certificate' value='Certificate Copy'>";

print "</form>" ;

我的弹出代码是

    print "<script> $(document).on('click','#certificate',function(){val = confirm('Do you want to create a new certificate?');
alert(val);
if(val)
{
     alert('proceed '); 
     return true;
}
else
{
   alert('Dont proceed');
   return false;
}
});</script>";

我的问题是，当我第一次单击按钮时，弹出框没有出现。但是当第二次单击按钮时，会出现弹出框。问题是什么。第一次单击按钮时我需要弹出窗口。请帮忙。

Answer 1

而不是添加 $_SESSION['pop_up'] 只是 echo 它：

if(isset($_POST['certificatecopy'])){

  echo "<script>
            .....................
            .....................
        </script>";

Answer 2

您需要在客户端的按钮单击事件中执行此操作。

Confirm 将返回布尔值 true 或 false 。基于用户点击。

$(document).on('click','#certificate',function(){

val = confirm('This will create a new certificate with all properties and links from the original certificate. A certificate user may edit the new certificate properties, but may not delete the certificate. Do you want to create a new certificate?');

alert(val);

if(val)
{
     alert('proceed '); 
     return true;
}
else
{
   alert('Dont proceed');
   return false;
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action='details.php' name='copy' method='POST' target='_blank'>

 <input type='hidden' name='certificate_name' value='$certificate_name'>
  
  <input type='hidden' name='certificate_id' value='$certificate_id'>


<input type='submit' name='certificatecopy' id="certificate" value='Certificate Copy'>
</form>

更新 1：

<?php
print "<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>";
print "<form action='details.php' name='copy' method='POST' target='_blank'>";


        print "<input type='hidden' name='certificate_name' value='$certificate_name'>";
        print "<input type='hidden' name='certificate_id' value='$certificate_id'>";


        print "<input type='submit' name='certificatecopy' id='certificate' value='Certificate Copy'>";

print "</form>" ;

print "<script> $(document).on('click','#certificate',function(){val = confirm('Do you want to create a new certificate?');
alert(val);
if(val)
{
     alert('proceed '); 
     return true;
}
else
{
   alert('Dont proceed');
   return false;
}
});</script>";

?>

Answer 3

您想在向服务器发送请求之前要求客户端确认吗？

如果你使用 Bootstrap，你可以试试我做的一个小 jQuery 插件，https://github.com/delboy1978uk/bs-delete-confirm。它不需要单独用于删除，它只是命名，因为它是最常用的情况。

您只需在链接中添加一个 CSS 类：

<a href="/wherever" class="confirm">Do stuff!</a>

还有 javascript：

$(document).ready(function(){
  $('.confirm').deleteConfirm();
});

现在，当您单击链接时，JS 会拦截它，启动引导模式窗口，并在确认后跟随您的超链接。

您也可以将选项传递给 deleteConfirm() 方法：

{
  heading: "Please confirm",
  body: "Are you sure you wish to perform this action?",
  ok_text: "Proceed",
  cancel_text: "Back",
  log: false
}

希望这会有所帮助！如果您不使用 Bootstrap，那么值得添加到您的项目中！这是模态功能的链接： https://getbootstrap.com/docs/3.3/javascript/#modals