CODEWITHSUNDEEP
javascriptjquerydatatables
kumara
kumara

Reputation: 937

Insert Form data to Jquery Datatable

I am trying to inserting data to jquery Datatable. But it did not insert correctly.

$(document).ready(function() {
  var t = $('#example').DataTable();

  var branchName = $("#branchName option:selected").val();
  var accountNo = $("#accountNo").val();

  $('#addRow').on('click', function() {
    t.row.add([branchName, accountNo]).draw();
  });

});
<link href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/js/jquery.dataTables.min.js"></script>

<div class="form-group">
  <label class="control-label col-sm-4">Branch</label>
  <div class="col-sm-8">
    <select class="form-control" name="branches" id="branchName">
      <option>--Select--</option>
      <option value="C01">C01</option>
      <option value="C02">C02</option>
    </select>
  </div>
</div>

<div class="form-group">
  <label class="control-label col-sm-4">Account No.</label>
  <div class="col-sm-8">
    <input type="text" class="form-control" id="accountNo" name="accountNo">

  </div>
</div>
<div class="form-group">
  <label class="control-label col-sm-4"></label>
  <div class="col-sm-8">
    <button type="button" class="btn btn-primary-action" id="addRow"> Add to Grid</button>
  </div>
</div>

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>

      <th>Branch</th>
      <th>Acc. No.</th>
    </tr>
  </thead>

</table>

I alerted drop down and text box value. It's working well. I think there is an issue when record insert into data-table. If you know any solution please mention.

Upvotes: 0

Views: 882

Answers (1)

fdomn-m
fdomn-m

Reputation: 28611

You need to move the variables into the click handler, otherwise they are set on page load and not updated after you change the values.

$(document).ready(function() {
  var t = $('#example').DataTable();

  $('#addRow').on('click', function() {
    var branchName = $("#branchName option:selected").val();
    var accountNo = $("#accountNo").val();
    t.row.add([branchName, accountNo]).draw();
  });
});

Updated snippet:

$(document).ready(function() {
  var t = $('#example').DataTable();

  $('#addRow').on('click', function() {
    var branchName = $("#branchName option:selected").val();
    var accountNo = $("#accountNo").val();
    t.row.add([branchName, accountNo]).draw();
  });
});
<link href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/js/jquery.dataTables.min.js"></script>

<div class="form-group">
  <label class="control-label col-sm-4">Branch</label>
  <div class="col-sm-8">
    <select class="form-control" name="branches" id="branchName">
      <option>--Select--</option>
      <option value="C01">C01</option>
      <option value="C02">C02</option>
    </select>
  </div>
</div>

<div class="form-group">
  <label class="control-label col-sm-4">Account No.</label>
  <div class="col-sm-8">
    <input type="text" class="form-control" id="accountNo" name="accountNo">

  </div>
</div>
<div class="form-group">
  <label class="control-label col-sm-4"></label>
  <div class="col-sm-8">
    <button type="button" class="btn btn-primary-action" id="addRow"> Add to Grid</button>
  </div>
</div>

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>

      <th>Branch</th>
      <th>Acc. No.</th>
    </tr>
  </thead>

</table>

Upvotes: 1

Related Questions