Question

JSFiddle链接下面是一个工作表单的链接，其中动态行提交的表单值使用ajax保存到mysql表而不进行任何页面刷新。表格提交的结果（即成功或错误）将显示在一个div中，该div具有id＆＃39;结果＆＃39;使用javascript。

表单标记

    <form name="names" id="names" method="post" action="">
  <div class="container">
    <div class="table-responsive">
      <button type="button" class="btn btn-success addmore">Add</button>
      <button type="button" class="btn btn-danger delete">Remove</button>
      <br />
      <table id="demo" class="table table-bordered table-condensed table-striped table-hover">
        <thead>
          <tr>
            <th>
              <input class="check_all" type="checkbox" onclick="select_all()" />
            </th>
            <th>First Name</th>
            <th>Last Name</th>
          </tr>
        </thead>
        <tbody>

          <tr>
            <td>
              <input type="checkbox" class="case" />
            </td>
            <td>
              <input class="form-control" type="text" name="fname[]" id="fname_1" required>
            </td>
            <td>
              <input class="form-control" type="text" name="lname[]" id="lname_1" required>
            </td>
          </tr>
        </tbody>
      </table>
      <button type="submit" class="btn btn-primary">Submit</button>
</form>

<div id="results"></div>
<div id="results2"></div>
</div>
<!-- ./table-responsive -->

</div>

用于添加/删除表行，复选框行选择的Javascript

    $(".delete").on('click', function() {
  $('.case:checkbox:checked').parents("tr").remove();
  $('.check_all').prop("checked", false);
  check();
});


var i = $('table tr').length;


$(".addmore").on('click', function() {
  count = $('table tr').length;
  var data = "<tr><td><input type='checkbox' class='case'/></td>";
  data += "<td><input class='form-control' id='fname_" + i + "' name='fname[]' required/></td>";
  data += "<td><input class='form-control' id='lname_" + i + "' name='lname[]' required/></td></tr>";
  //alert(data);
  $('table').append(data);
  row = i;
  i++;
});



function select_all() {
  $('input[class=case]:checkbox').each(function() {
    if ($('input[class=check_all]:checkbox:checked').length == 0) {
      $(this).prop("checked", false);
    } else {
      $(this).prop("checked", true);

    }
  });
}

function check() {
  obj = $('table tr').find('span');
  $.each(obj, function(key, value) {
    id = value.id;
    var selected = $('#' + id).html(key + 1);

  });
}

使用Ajax进行表单提交的Javascript

    // form submission through ajax
$(document).ready(function() {
  $(function() {
    $("#names").on("submit", function(e) {
      e.preventDefault();
      $.ajax({
        type: "post",
        url: "savename.php",
        data: $(this).serialize(),
        success: function(response) {
          if (response == "Name creation successfull.") {
            $("#results").html('<div class="alert alert-success"><button type="button" class="close">×</button>' + response + '</div><br>');

          } else {
            $("#results2").html('<div class="alert alert-success"><button type="button" class="close">×</button>' + response + '</div><br>');

          }

          //timing the alert box to close after 5 seconds
          window.setTimeout(function() {
            $(".alert").fadeTo(500, 0).slideUp(500, function() {
              $(this).remove();
            });
          }, 2000);

          //Adding a click event to the 'x' button to close immediately
          $('.alert .close').on("click", function(e) {
            $(this).parent().fadeTo(500, 0).slideUp(500);
          });
          $('#names')[0].reset();


        },
        error: function(response) {
          alert(response);
        }
      });
    });
  });

});

我想实现的是这个，

用户首先通过选中每行开头的复选框来选择他/她想要插入到mysql表中的行。
选择行后，单击提交按钮后，只应将那些选定的行值插入到mysql表中。

尝试通过在本网站上尝试与此类似的各种帖子的解决方案来实现此目的但未成功。

Answer 1

在此stackoverflow帖子中使用了用户skobaljic（非常感谢）提供的解决方案。现在使用此代码只能将那些来自所选行的表单值发布到mysql表中。

Updated JSFiddle Working Demo

以下行仅用于调试目的，完成后注释掉。

$('.submit_data').text(toPost);

虽然代码工作并完成工作，但在javascript方面我只是一个新手，所以需要专家意见才能将此帖标记为已解决。

仅将Checkbox所选行值插入MySQL表

1 个答案: