Question

我有一个具有输入字段的模态，在此输入中，有一个动态值。

现在，我想点击此Modal上的按钮，然后在数据库上运行更新。

下面是一个片段，其中包含模态和INPUT字段中的ID。我想点击 CLEAR 并将输入值从INPUT表单推送到外部php文件，在那里我可以运行脚本，一旦脚本成功，它应该显示警告消息。

我已经构建了它们，但找不到合并所有这些部分的正确方法。

$(document).on("click", ".open-OverDueModal", function() {
  var myBookId = $(this).data('id');
  $(".modal-body #BookingResId").val(myBookId);
});

$(document).ready(function() {



  var table = $('#example').DataTable({
    "data": dataStore.data,
    paging: false,
    scrollY: 200,
    select: true,
    ordering: false,
    info:     false,
    "columns": [{
        "data": "name"
      },
      {
        "data": "status"
      },
      {
        "data": "position",
        visible: false
      },
      {
        "data": "office",
        visible: false
      },
      {
        "data": "extn",
        visible: false
      },
      {
        "data": "start_date"
      },
      {
        "data": "salary"
      },
      {
        "data": null
      },
    ],
    columnDefs: [{
      // puts a button in the last column
      targets: [-1],
      render: function(a, b, data, d) {
        if (data.status == 'Inhouse') {
          return "<button type='button'>"+data.status+"</button>";
        }
        return "";
      }
    }],

  });
  table.on("click", "button",
    function() {
      $(".alert").alert(table.rows($(this).closest("tr")).data()[0].name);

    });

});


var dataStore = {
  "data": [{
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421",
      "status": 'Inhouse'
    },
    {
      "name": "Garrett Winters",
      "position": "Accountant",
      "salary": "$170,750",
      "start_date": "2011/07/25",
      "office": "Tokyo",
      "extn": "8422",
      "status": 'Inhouse'
    }
  ]
};

<!DOCTYPE html>
<html>

<head>
  <meta name="description" content="Excel w selbox table">
  <meta charset="utf-8">
  <title>buttons</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" />
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css" />

  <script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
  <script type="text/javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/pdfmake.min.js"></script>
  <script type="text/javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/vfs_fonts.js"></script>
  <script type="text/javascript" src="//cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js"></script>
</head>

<body>

<div class="container-fluid" style="margin-top:2em;">
  <button class="btn btn-sm btn-outline-danger open-OverDueModal" data-id="53743" data-toggle="modal" data-target="#OverDueModal" type='button'>Open Modal</button>
</div>

  <div class="modal fade" id="OverDueModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">

        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Clear Input Field</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 class="form-group row">
            <label for="example-search-input" class="col-5 col-form-label">Reservation ID</label>
            <div class="col-7">
              <input class="form-control" type="text" name="OverdueResIDInput" id="BookingResId" value="" readonly>
            </div>
          </div>

          <table class="table table-sm table-hover table-striped" id="example" cellspacing="0">
            <thead class="header">
              <tr>
                <th>Name</th>
                <th>Status</th>
                <th class="hidden-xs-up">Position</th>
                <th class="hidden-xs-up">Office</th>
                <th class="hidden-xs-up">Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Btn</th>
              </tr>
            </thead>
          </table>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Unseat</button>
          <button type="button" class="btn btn-primary">Clear</button>
        </div>
      </div>
    </div>
  </div>
  <br>

<div class="alert alert-success" role="alert">
  <strong>Well done!</strong> Update Successfully.
</div>

</body>

</html>

Answer 1

将ajax与on click事件一起使用

 $('.close').click(function() {
     $.ajax({
         url:"yourPHP.php",
         data:{ id:$('#BookingResId').val() },
         type:"post",
         success:function(data) {
             $('.alert-success').show();
         }
     });
 });

查看此链接了解更多详情

https://www.w3schools.com/xml/ajax_intro.asp

使用输入值和Ajax通过onclick更新数据库值

1 个答案: