stackoom
  简体   繁体   中英

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

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

Question

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). If using php is not easy, then any other methods using javascript or jquery is also ok, but how to do that? 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 

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

solution1
 2 ACCPTED  2018-04-06 07:20:48

with jQuery:

Add an id to your button element: 

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

solution2
 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.

You can create a separate PHP script to perform whatever actions you need to perform on the database.

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 );
    });
});

solution3
 1  2018-04-06 07:23:59

Simple jQuery example 

 $(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>

solution4
 0  2018-04-06 07:52:16

You can use Jquery click() method. 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>

.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Bootstrap modal 3 check if button is clicked How to check/uncheck a checkbox in a modal form by using button (Bootstrap) Preventing bootstrap modal from disappearing in case validation failure using PHP after submit button is clicked How to insert PHP in my Bootstrap modal window 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 How to align react-bootstrap modal relative to the button clicked Bootstrap Modal - How to Return True if Yes Button is Clicked - Customized Confirm How to open a Bootstrap modal window using jQuery? Setting textbox value in modal window using onclick button using Bootstrap
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM