如何检查是否使用PHP单击了引导模式窗口中的按钮答案

【问题标题】：How to check if a button in bootstrap modal window clicked using PHP如何检查是否使用PHP单击了引导模式窗口中的按钮
【发布时间】：2018-09-16 03:50:47
【问题描述】：

我有一个有按钮的页面。当用户点击按钮时，会弹出一个引导模式窗口。模态窗口有两个按钮“关闭”和“保存”。

根据引导网站，“关闭”将关闭窗口，并且不会对该页面触发任何操作。但是，我想要的是当用户单击另一个按钮（例如“保存”）时，应该发生一些操作（通过使用 PHP）。如果使用 php 不容易，那么使用 javascript 或 jquery 的任何其他方法也可以，但如何做到这一点？有人能解释一下如何让“保存”按钮执行一些操作吗？

作为参考，我复制了引导网站中提到的代码。
JSbin链接：https://jsbin.com/rebuwuvefe/edit?html,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <title>JS Bin</title>
</head>
<body>
  
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
</body>
</html>

【问题讨论】：

您不能使用 php 检查按钮点击。请自学client-side 和server-side 的含义。
@eisbehr 是对的。您可以尝试通过 javascript 向按钮添加事件侦听器。
如果你要使用jQuery，有基本的例子here
@eisbehr：我们可以使用 php 通过将按钮保留在表单中来检查按钮点击。我知道client-side 和server-side。我比 jquery 更熟悉 php。这就是为什么在这种情况下尝试使用 php。
你在说什么？您不能为此使用 php。您可能意味着将 php 与 $_POST var 一起使用，但您无法直接在 html 中处理按钮单击。这就是 js 的用途。

标签： javascript php jquery bootstrap-modal

【解决方案1】：

使用 jQuery：

为您的按钮元素添加一个 id：

<button id="save-button" type="button" class="btn btn-primary">Save changes</button>

然后附加事件监听器：

$('#save-button').on("click", function (){
    // do something
});

希望这会有所帮助！

【讨论】：

非常感谢 Pet Ibano。它完美地工作。我应该学习 JQuery :)
现在我可以通过使用您的建议和 window.location 命令重定向到其他页面和类似内容。但是，我现在如何将它链接到 php？假设我之前有一个表单，提交时它显示模式。然后我确认保存。我应该如何将表单值链接到 php，以便从那里我可以链接到 MySQL 并保存表单。
您可能想查看 Marvin 的 answer
您可以使用 $.ajax() 方法并将其放在“做某事”区域。
谢谢 :) 我会试试 ajax() 方法

【解决方案2】：

我认为你应该改写问题的标题，因为它会误导你真正要问的内容。

您正在寻找的是 jQuery 的 $.ajax 方法。

您可以创建一个单独的 PHP 脚本来执行您需要对数据库执行的任何操作。

http://api.jquery.com/jQuery.ajax/

// Assuming the save button is already set to the variable
// 'save_button', use the jQuery $.click method to apply a
// click event listener to the button.
$(save_button).click(function(){
    // Initiate the jQuery AJAX request
    $.ajax({
        // Method of request, POST (insert) or GET (select)
        method: "POST",
        // Location of the PHP file that connects to the database
        url: "some.php",
        // The data you want to send to the php file
        // Think of this data format as:
        // some.php?name=John&location=Boston
        data: { name: "John", location: "Boston" }
    })
    // Do this function when the request is done and a response
    // is received. The variable msg will contain whatever the PHP
    // file outputs (for JS interpretation, usually JSON).
    .done(function( msg ) {
        alert( "Data Saved: " + msg );
    });
});

【讨论】：

谢谢马文。我想检查当有人单击模态窗口的按钮时我是否可以使用 php 执行某些操作。但正如你所说，JQuery 适合这样做。我想我会为那些想使用 php 进行模态按钮点击的人保留标题。谢谢

【解决方案3】：

简单的 jQuery 示例

$(function() {
$( ".save-btn" ).on( "click", function() {
  alert('success');
});
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <title>JS Bin</title>
</head>
<body>
  
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary save-btn">Save changes</button>
      </div>
    </div>
  </div>
</div>
</body>
</html>

【讨论】：

【解决方案4】：

您可以使用 Jquery click() 方法。我为你做了一个样品

$( "#sample" ).click(function() {
  alert( "You can AJAX call or whatever you want" );
  $('#exampleModal').modal('toggle');
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <title>JS Bin</title>
</head>
<body>
  
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button id="sample"  type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
</body>
</html>

【讨论】：