DataTables

Question

我已经拼凑了一些代码，并认为在过去的三天里我正处于成功的边缘。我现在有一个很大的秃头，正在向大家求助。请注意，我不是程序员，我在下面向您介绍的方法可能完全不是达到预期结果的方法。所以我愿意接受所有意见！

我正在尝试获取从 table 中提取并以模式呈现的数据以进行发送。这是一个简短的描述。

详细说明...我正在使用 DataTables 以 table 格式呈现数据库。我在 table 中的每一行添加了一个按钮，单击该按钮将弹出一个模式窗体。此表单有一个输入字段，还显示所选行的两个单元格。一旦最终用户将他们的名字输入输入字段，我希望使用另一个提交功能发送所有数据（输入的名称和行中的两个字段）。

最后一部分是我在自杀。

当我点击“请求”按钮时，我只收到在 <input> 字段中输入的姓名。

这是 modal/form...

    <div id="reqModal" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">Song Request</h4>
          </div>

    <form id="myform" action="" method="POST">
          <div class="modal-body">
            <p><strong>Name: </strong><input type="text" id="name" name="name"></p>
            <p><strong>Artist: </strong><span id="artist" name="artist"></span></p>
            <p><strong>Title: </strong><span id="title" name="title"></span></p>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-default btn-secondary" data-dismiss="modal">Cancel</button>
            <button id="btnRequest" type="submit" class="btn btn-info">Request</button>
          </div>
    </form>

        </div>
      </div>
    </div>

这里是函数...

      $('#catalog tbody').on('click', 'button', function() {
        var data = table.row( $(this).parents('tr') ).data();
                   table.row( $(this).parents('tr') ).select();
                                  
        // craft modal body                                                                 
        $('#artist').html(data.artist);
        $('#title').html(data.title); 
        $('#reqModal').modal('show');                                 
      });


      $("#myform").on('submit' ,(function(e) {
            e.preventDefault();

        var fdata = new FormData(myform);

            $.ajax({
                    type: "POST",
                    url: "/post/submit.php",
                    data: fdata,
                    processData: false,
                    contentType: false,
                    cache: false,
                    success: function (fdata) {
                    }
            });
     
     }));

我曾尝试创建隐藏的 inputs，但没有成功将 $artist 和 $title 变量添加到 value= 参数。我一直在尝试将 append() 语句插入 FormData，但我不知道如何将 var 从 .on('click' 携带到 .on('submit'。

如有任何帮助，我们将不胜感激！！如果您需要更多信息，我很乐意提供。我试图将此场景插入 Fiddle 但我什至无法让该行上的按钮出现。所以没用。

再次感谢您的帮助！

（我需要一些代表才能 post 图片...所以...抱歉没有视觉辅助！）

Answer 1

解决方案...

表格

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Song Request</h4>
      </div>
<form method="post" action="" id="myform">
      <div class="modal-body">
        <p><strong>Name: </strong><input id="fname" type="text"></p>
        <p><strong>Artist: </strong><span id="fartist"></span></p>
        <p><strong>Title: </strong><span id="ftitle"</span></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default btn-secondary" data-dismiss="modal">Cancel</button>
        <button id="send" type="button" class="btn btn-primary">Request</button>
      </div>
</form>
    </div>
  </div>
</div>

脚本

  $('#example tbody').on('click', 'button', function() {
    myrow = table.row( $(this).parents('tr') ).data();
    table.rows( {page: 'current'} ).deselect();
    table.row( $(this) ).select();
                              
    $('#fartist').html(myrow.artist);
    $('#ftitle').html(myrow.title);                           
    $('#myModal').modal('show');                                 
  });
  

  $('#send').on('click', function(e) {
        e.preventDefault();

      var data = new FormData(myform);
          data.append("name", $('input:text').val());
          data.append("artist", $('#fartist').text());
          data.append("title", $('#ftitle').text());

        $.ajax({
                type: "POST",
                url: "control.php",
                data: data,
                processData: false,
                contentType: false,
                cache: false,
                dataType:'html',
                success: function (data) {
                }
        });

     $('#myModal').modal('hide');
                                        
  });

DataTables - 从模态形式获取值

DataTables - Get Values From Modal Form

forms

jquery

modal-dialog