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

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: ,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=".0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <title>JS Bin</title>
</head>
<body>
  
  <script src=".2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src=".js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src=".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>

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

For a reference, I copied the codes mentioned in the bootstrap website.
JSbin link: https://jsbin./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./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./jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn./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>

Share Improve this question edited Apr 12, 2018 at 3:19 asked Apr 6, 2018 at 7:12 Anu 1,1292 gold badges21 silver badges49 bronze badges

3 You can't use php to check a button click. Please teach yourself what client-side and server-side means. – eisbehr Commented Apr 6, 2018 at 7:13
@eisbehr is right. You can try adding event listeners to the buttons through javascript. – vpibano Commented Apr 6, 2018 at 7:14
There are basic examples here if you're going to use jQuery – vpibano Commented Apr 6, 2018 at 7:16
@eisbehr: We can use php to check button click by keeping buttons inside a form. i know about client-side and server-side. I am more familiar with php than jquery. That is why trying to use php for this case. – Anu Commented Apr 6, 2018 at 7:19
What are you talking about? You can't use php for that. You possible mean to use php with the $_POST var, but you can't handle the button click directly inside your html. Thats what js is for. – eisbehr Commented Apr 6, 2018 at 7:21

| Show 1 more ment

4 Answers 4

Sorted by: Reset to default 2

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!

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

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./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./jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn./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>

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./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./jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn./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>

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745115754a4612116.html

javascript - How to check if a button in bootstrap modal window clicked using PHP - Stack Overflow

4 Answers 4

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - How to check if a button in bootstrap modal window clicked using PHP - Stack Overflow

4 Answers 4

相关推荐