堆栈内存溢出
  繁体   English   中英

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

[英]How to check if a button in bootstrap modal window clicked using PHP

 原文  2018-04-06 07:12:22  0   4    javascript/ php/ jquery/ bootstrap-modal

问题描述

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

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

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

 <!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>

4 个解决方案

解决方案1
 2 已采纳  2018-04-06 07:20:48

使用jQuery：

向您的按钮元素添加ID： 

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

然后附加事件监听器： 

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

希望这可以帮助！

解决方案2
 1  2018-04-06 07:20:40

我认为您应该改写您的问题的标题，因为这会误导您的真正问题。

您正在寻找的是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 );
    });
});

解决方案3
 1  2018-04-06 07:23:59

简单的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
 0  2018-04-06 07:52:16

您可以使用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>

。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 引导模态3检查是否单击了按钮 如何使用按钮（Bootstrap）选中/取消选中模式表单中的复选框 在单击提交按钮后使用PHP进行验证失败时，防止引导程序模式消失 如何在Bootstrap模态窗口中插入PHP 使用 JavaScript 打开引导模式后，如何更改单击按钮的值？ 如何检查我在哪里单击引导模态打开 如何相对于单击的按钮对齐 react-bootstrap 模式 Bootstrap模式 - 如果单击是按钮，如何返回True - 自定义确认 如何使用 jQuery 打开 Bootstrap 模式 window？ 使用Bootstrap使用onclick按钮在模式窗口中设置文本框值
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM