Insert only Checkbox Selected Row Values into a MySQL Table
<p>Below JSFiddle link is that of a working form, where submitted form values from dynamic rows gets saved to a mysql table using ajax without any page refresh. The outcome of the form submission (i.e Success or Error) will be shown in a div which has an id 'results' using javascript.</p>

<p><a href="https://jsfiddle.net/um4fc0wv/12/" rel="nofollow" title="JSFiddle Demo">JSFiddle Demo</a></p>

<p>Form Markup</p>

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

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

&lt;div id="results"&gt;&lt;/div&gt;
&lt;div id="results2"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!-- ./table-responsive --&gt;

&lt;/div&gt;
</code></pre>

<p>Javascript for Add/Remove Table Rows, Checkbox Row(s) Selection </p>

<pre><code>    $(".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 = "&lt;tr&gt;&lt;td&gt;&lt;input type='checkbox' class='case'/&gt;&lt;/td&gt;";
  data += "&lt;td&gt;&lt;input class='form-control' id='fname_" + i + "' name='fname[]' required/&gt;&lt;/td&gt;";
  data += "&lt;td&gt;&lt;input class='form-control' id='lname_" + i + "' name='lname[]' required/&gt;&lt;/td&gt;&lt;/tr&gt;";
  //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);

  });
}
</code></pre>

<p>Javascript for Form Submission using Ajax</p>

<pre><code>    // 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('&lt;div class="alert alert-success"&gt;&lt;button type="button" class="close"&gt;×&lt;/button&gt;' + response + '&lt;/div&gt;&lt;br&gt;');

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

          }

          //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);
        }
      });
    });
  });

});
</code></pre>

<p>What I like to implement is this,</p>

<ol>
<li><p>User first selects the rows which he/she wants to insert into the mysql table by selecting the checkbox at the beginning of each row.  </p></li>
<li><p>After selecting the rows, upon clicking the submit button only those selected row values should be inserted into the mysql table. </p>

<p>Tried to implement this by trying out the solutions from various posts similar to this one on this site but was not successful. </p></li>
</ol>