堆栈内存溢出
  简体   繁体   English

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

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

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

问题描述

I have a page which has a button. 我有一个带有按钮的页面。 When a user clicks on the button, a bootstrap modal window will pop up. 当用户单击按钮时，将弹出一个引导模式窗口。 The modal window has two buttons 'Close' and 'Save'. 模态窗口有两个按钮“关闭”和“保存”。

Based on the bootstrap website, 'Close' will dismiss the window and no action will be triggered to that page. 根据引导网站，“关闭”将关闭该窗口，并且不会对该页面触发任何操作。 But, what I want is when user click on the other button (For example 'Save'), some action should happen (By using PHP). 但是，我要的是当用户单击另一个按钮（例如“保存”）时，应该发生一些操作（通过使用PHP）。 If using php is not easy, then any other methods using javascript or jquery is also ok, but how to do that? 如果使用php不容易，那么使用javascript或jquery的任何其他方法也可以，但是该怎么做呢？ Could someone explain how to make the Save button do some actions? 有人可以解释如何使“保存”按钮执行某些操作吗？

For a reference, I copied the codes mentioned in the bootstrap website. 作为参考，我复制了引导网站中提到的代码。
JSbin link: https://jsbin.com/rebuwuvefe/edit?html,output 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

with jQuery: 使用jQuery：

Add an id to your button element: 向您的按钮元素添加ID： 

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

Then attach the event listener: 然后附加事件监听器： 

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

Hope this helps! 希望这可以帮助！

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

I think you should reword the title of your question, as it is misleading to what you are really asking. 我认为您应该改写您的问题的标题，因为这会误导您的真正问题。

What you are looking for is jQuery's $.ajax method. 您正在寻找的是jQuery的$ .ajax方法。

You can create a separate PHP script to perform whatever actions you need to perform on the database. 您可以创建一个单独的PHP脚本来执行您需要对数据库执行的任何操作。

http://api.jquery.com/jQuery.ajax/ 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

Simple jQuery example 简单的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

You can use Jquery click() method. 您可以使用Jquery click（）方法。 I made a sample for you 我为你做了一个样品 

 $( "#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 modal 3 check if button is clicked 如何使用按钮（Bootstrap）选中/取消选中模式表单中的复选框 - How to check/uncheck a checkbox in a modal form by using button (Bootstrap) 在单击提交按钮后使用PHP进行验证失败时，防止引导程序模式消失 - Preventing bootstrap modal from disappearing in case validation failure using PHP after submit button is clicked 如何在Bootstrap模态窗口中插入PHP - How to insert PHP in my Bootstrap modal window 使用 JavaScript 打开引导模式后，如何更改单击按钮的值？ - How can i change value of clicked button after open a bootstrap modal using JavaScript? 如何检查我在哪里单击引导模态打开 - How to check where I clicked for bootstrap modal open 如何相对于单击的按钮对齐 react-bootstrap 模式 - How to align react-bootstrap modal relative to the button clicked Bootstrap模式 - 如果单击是按钮，如何返回True - 自定义确认 - Bootstrap Modal - How to Return True if Yes Button is Clicked - Customized Confirm 如何使用 jQuery 打开 Bootstrap 模式 window？ - How to open a Bootstrap modal window using jQuery? 使用Bootstrap使用onclick按钮在模式窗口中设置文本框值 - Setting textbox value in modal window using onclick button using Bootstrap
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM