通过jquery将checkbox数据从datatable发送到php文件

mfuanj7w  于 2021-06-21  发布在  Mysql
关注(0)|答案(0)|浏览(230)

我检查了其他类似的问题，但我找不到一个解决办法，帮助我。
我正在尝试从数据库中获取数据，并将它们插入到添加到数据表的两个不同输入（复选框类型）中。我希望这两个输入包含在我的表单中，这会将信息发送到一个.php文件，并将其放置在数据库的另一个表中。我可以将“原始”表单的数据发送到.php文件，但是在查找复选框输入的值时遇到了问题。

  1. $(document).ready(function(){
  2.       $.ajax ({
  3.         url: "dati_education.php",
  4.         metod: "POST",
  5.         dataType: "json",
  6.         success: function(data) {
  7.             $("#education").dataTable({
  8.                 data: data,
  9.                 columns: [
  10.                     { 'data' : 'Title' },
  11.                     { 'data' : 'Year' },
  12.                     { 'data' : "Place" },
  13.                     { 'data' : '  ',
  14.                         'render': function(data, type, row){
  15.                             return "<input class='check' id = '"+row.education_id+"'name='edu_id' type='checkbox' onclick= 'return "+ row.education_id + "'/>";
  16.                         }
  18.                     }
  19.                 ],
  20.                 paging: true
  21.             })
  22.          }
  23.         });
  25.        $.ajax ({
  26.         url: "dati_work.php",
  27.         metod: "POST",
  28.         dataType: "json",
  29.         success: function(data) {
  30.             $("#work").dataTable({
  31.                 data: data,
  32.                 columns: [
  33.                     { 'data' : 'Company' },
  34.                     { 'data' : 'Role' },
  35.                     { 'data' : 'Year' },
  36.                     { 'data' : 'Place'},
  37.                     { 'data' : '  ',
  38.                         'render': function(data, type, row){
  39.                             return "<input class='chk'name='work_id' type='checkbox' onclick='return "+ row.work_id + "'/>";
  40.                         }
  42.                     }
  43.                 ],
  44.                 paging: true
  45.             })
  46.          }
  47.     });
  48. });
  50.         var id1 = 0;
  51.         $('#edu_id').on('click', function(){
  53.             id1 = $(".check:checked").each(function(){
  54.                     $(this).find('input[type="checkbox"]').val();
  55.                 });
  57.         });
  59.      //I add some console.log() to do some tests.
  61.         var id2= 0;
  62.         var work =[];
  63.         console.log('ciao');
  64.         $('#work_id').on('click', function(){
  65.                  console.log('ciao');
  66.             $(".chk:checked").each(function(){
  67.                 var id2 = $(this).attr("id");
  68.                 //var id =$(this).find('input[type="checkbox"]').val();
  70.                 console.log(id2);
  71.                 work = JSON.stringify(id2);
  72.                 work[0] = id2;
  73.                 });
  75.         });
  76.         var data =  $("#Form").serializeArray(); 
  78.         console.log(id1);
  79.         console.log(work);
  81.         data.push({
  82.             name : "edu_id",
  83.             value: id1
  84.         });
  85.         data.push({
  86.             name : "work_id",
  87.             value: work
  88.         });
  90.         console.log(data);
  91.     $("#Form").on("submit", function(){
  93.                     $.ajax({
  94.                         type: "POST",
  95.                         url: "create_cards.php",
  96.                         data: data,
  97.                         success: function(data){
  98.                             alert(data);
  99.                             //alert('Finished! Starting over!');
  100.                         }
  101.                     });
  103.                 });

如您所见，我尝试使用两种不同的方法来获取复选框的值，但两种方法都不起作用。我认为使用“serializearray”方法是正确的，因为从控制台我可以看到它添加了字段。但我仍然无法从复选框中获取值
以下是我的html代码：

  1. <div class="container">
  2. <div class="row">
  3.     <form id="Form" class="form-horizontal" action="create_cards.php" method="POST">
  4.         <div class="col-sm-6">
  5.             <br> <br> <br> <br> <br>
  6.                 <div class="form-group">
  7.                   <label class="control-label col-sm-2" for="title">Title:</label>
  8.                   <div class="col-sm-10">
  9.                     <input type="text" class="form-control" id="title" placeholder="Enter the Title" name="title">
  10.                   </div>
  11.                 </div>
  12.                 <div class="form-group">
  13.                   <label class="control-label col-sm-2" for="name">Name:</label>
  14.                   <div class="col-sm-10">          
  15.                     <input type="text" class="form-control" id="name" placeholder="Enter your Name" name="name">
  16.                   </div>
  17.                 </div>
  18.                  <div class="form-group">
  19.                   <label class="control-label col-sm-2" for="surname">Surname:</label>
  20.                   <div class="col-sm-10">          
  21.                     <input type="text" class="form-control" id="surname" placeholder="Enter your Surname" name="surname">
  22.                   </div>
  23.                 </div>
  24.                  <div class="form-group">
  25.                   <label class="control-label col-sm-2" for="email">Email:</label>
  26.                   <div class="col-sm-10">          
  27.                     <input type="email" class="form-control" id="email" placeholder="Enter your Email" name="email">
  28.                   </div>
  29.                 </div>
  30.                 <div class="form-group">
  31.                   <label class="control-label col-sm-2" for="phone">Phone:</label>
  32.                   <div class="col-sm-10">          
  33.                     <input type="phone" class="form-control" id="phone" placeholder="Enter your Phone" name="phone">
  34.                   </div>
  35.                 </div>
  36.                  <div class="form-group">
  37.                   <label class="control-label col-sm-2" for="photo">Photo:</label>
  38.                   <div class="col-sm-10">          
  39.                     <input type="select" class="form-control" id="photo" placeholder="Enter your Photo" name="photo">
  40.                   </div>
  41.                 </div>
  42.                  <div class="form-group">
  43.                   <label class="control-label col-sm-2" for="note">Note:</label>
  44.                   <div class="col-sm-10">          
  45.                     <input type="text" class="form-control" id="note" placeholder="Enter some Note" name="note">
  46.                   </div>
  47.                 </div>
  48.                 <div class="form-group">        
  49.                   <div class="col-sm-offset-2 col-sm-10">
  50.                     <button type="submit" class="btn btn-default">Submit</button>
  51.                   </div>
  52.                 </div>
  53.         </div>
  54.         <div class="col-sm-6">
  55.             <table  class="table table-hover table-border" id="education">
  56.                 <thead>
  57.                     <tr>
  58.                         <th>Title</th>
  59.                         <th>Year</th>
  60.                         <th>Place</th>
  61.                         <th> </th>
  62.                     </tr>
  63.                 </thead>
  64.                 <tbody>
  65.                     <td></td>
  66.                 </tbody>
  67.             </table>
  68.             <table  class="table table-hover" id="work">
  69.                 <thead>
  70.                     <tr>
  71.                         <th>Company</th>
  72.                         <th>Role</th>
  73.                         <th>Year</th>
  74.                         <th>Place</th>
  75.                         <th>  </th>
  76.                     </tr>
  77.                 </thead>
  78.             </table>
  79.         </div>
  80.     </form>
  81. </div>

下面是一个文件，我从中获取要插入datatable的数据（另一个完全相同）：

  1. <?php 
  2. include("database.php");
  3. $conn = mysqli_connect($db_host, $db_user, $db_password);
  4. mysqli_select_db($conn, $db_database);
  5. session_start();
  6. $query =  "select * from education_experience where user_id = '" 
  7. .$_SESSION["user_id"] ."'";
  8. $result = mysqli_query($conn, $query);
  9. $dati = array();
  10. while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
  11. $dati[] = array(
  13. "Title" => $row['title'],
  14.     "Year" => $row['year'],
  15.     "Place" => $row['place'],
  16.     "education_id" => $row['education_experience_id']
  18. );
  19. }
  21. echo json_encode($dati);
  23. ?>

这是我要发送数据的文件。我还没有写查询，因为我想先解决这个问题。它不识别索引'edu\u id'和'work\u id'。

  1. <?php
  3. include("database.php");
  5. $conn = mysqli_connect($db_host, $db_user, $db_password);
  6. mysqli_select_db($conn, $db_database);
  8. session_start();
  10. echo "CIAO";
  12. if(isset($_POST['title']) && isset($_POST['name']) && 
  13. isset($_POST['surname']) && isset($_POST['email']) && isset($_POST['phone']) ) {
  15. $Title = mysqli_escape_string($conn, $_POST['title']);
  16. $Name = mysqli_escape_string($conn, $_POST['name']);
  17. $Surname = mysqli_escape_string($conn, $_POST['surname']);
  18. $Email = mysqli_escape_string($conn, $_POST['email']);
  19. $Phone = mysqli_escape_string($conn, $_POST['phone']);
  20. $Photo = mysqli_escape_string($conn, $_POST['photo']);
  21. $Note = mysqli_escape_string($conn, $_POST['note']);
  22. $Edu_id = mysqli_escape_string($conn, $_POST['edu_id']);
  23. $Work_id = mysqli_escape_string($conn, $_POST['work_id']);
  25. echo $Title, $Name, $Edu_id, $Work_id;
  26. }
  27. ?>

我对这个问题还很陌生，所以请友善一点。也很抱歉可能出现语法错误，但英语不是我的母语。

mysqlphpjqueryajaxdatatables

暂无答案！

目前还没有任何答案，快来回答吧！

我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com