Dynamically generated input fields

A table to input multiple values

by Sahil Kashyap

HTML

<!DOCTYPE html>
<html>
 <head>
  <title> Multiple Inline Insert into Mysql using Ajax JQuery in PHP</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script> 
  
 </head>
 <body>
  <br /><br />
  <div class="container">
   <br />
   <h2 align="center"> Insert Diet</h2>

      <div class="fixed-top"><div width="10%">Coustmer Id</div><input type="text" class="cid_code fetchclient"  ></div>
   <br />
   <div class="table-responsive">
    <table class="table table-bordered" id="crud_table">
     <tr>
	 
      <th width="10%">Date</th>
      <th width="20%">Breakfast</th>
	  <th width="20%">Mid meal</th>
      <th width="20%">Lunch</th>
	  <th width="20%">Evening Snacks</th>
      <th width="20%">Dinner</th>
      <th width="5%"></th>
     </tr>
     <tr>
	 
      <td contenteditable="true" ><input type="date" class="date_entry" min="2000-01-02"></td>
      
      <td contenteditable="true" class="break_name"></td>
	  <td contenteditable="true" class="mid_meal"></td>
      <td contenteditable="true" class="lunch_name"></td>
	  
      <td contenteditable="true" class="evening_snacks"></td>
      <td contenteditable="true" class="dinner_name"></td>
      <td></td>
     </tr>
    </table>
    <div align="right">
     <button type="button" name="add" id="add" class="btn btn-success btn-xs">+</button>
    </div>
    <div align="center">
     <button type="button" name="save" id="save" class="btn btn-info">Save</button>
    </div>
    <br />
    <div id="inserted_item_data"></div>
   </div>
   
  </div>
 </body>
</html>

JavaScript

$(document).ready(function(){

 $('.fetchclient').typeahead({
  source: function(query, result)
  {
   $.ajax({
    url:"fetch.php",
    method:"POST",
    data:{query:query},
    dataType:"json",
    success:function(data)
    {
     result($.map(data, function(item){
      return item;
     }));
    }
   })
  }
 });




 var count = 1;
 $('#add').click(function(){
  count = count + 1;
  var html_code = "<tr id='row"+count+"'>";
  
   html_code += "<td contenteditable='true' ><input type='date' class='date_entry' min='2000-01-02'></td>";
   html_code += "<td contenteditable='true' class='break_name'></td>";
   html_code += "<td contenteditable='true' class='mid_meal'></td>";
   html_code += "<td contenteditable='true' class='lunch_name'></td>";
   html_code += "<td contenteditable='true' class='evening_snacks'></td>";
   html_code += "<td contenteditable='true' class='dinner_name' ></td>";
   html_code += "<td><button type='button' name='remove' data-row='row"+count+"' class='btn btn-danger btn-xs remove'>-</button></td>";   
   html_code += "</tr>";  
   $('#crud_table').append(html_code);

 $('.fetchclient').typeahead({
  source: function(query, result)
  {
   $.ajax({
    url:"fetch.php",
    method:"POST",
    data:{query:query},
    dataType:"json",
    success:function(data)
    {
     result($.map(data, function(item){
      return item;
     }));
    }
   })
  }
 });
   
 });
 
 $(document).on('click','.remove',function(){
	 var delete_row=$(this).data("row");
	 $('#'+delete_row).remove();
 });
 
 $('#save').click(function(){
	
  var date_entry = []; 
  var cid_code = [];
  var break_name = [];
  var mid_meal = [];
  var lunch_name = [];
  var evening_snacks = [];
  var dinner_name = [];
  var veggies = "carrot";
  
  $('.date_entry').each(function(){
   date_entry.push($(this).val());
  });
  $('.cid_code').each(function(){
   cid_code.push(veggies);
  });
  $('.break_name').each(function(){
   break_name.push($(this).text());
  });
 ...