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

-2

我有一个模态，它有一个输入字段，在这个输入中有一个动态值。使用输入值和Ajax更新数据库值onclick

现在我想单击此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>

来源

2017-04-17 Cyber

使用AJAX与上单击事件

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

来源

2017-04-17 14:30:31 bowl0stu

顺便说一句，你的代码是不容易解释。考虑修改布局和ID /类名称 – bowl0stu

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

回答

相关问题