0

go to

http://jsfiddle.net/rns3hang/450/

TokenField in newly cloned input field are working but the problem is IT IS INSIDE A INPUT FIELD

And I want just one input field with some predefined/constant tags and to be able to add new token or tags values as well

 <body>
  <br /><br />
  <div class="container">
   <br />
   <h2 align="center"> Insert Diet</h2>
   <br /><table class="table table-bordered" >
</table>
<br>
   <div class="table-responsive">
    <table class="table table-bordered" id="crud_table">
     <tr>



      <th width="20%">Breakfast</th>
      <th width="20%">Pre Lunch</th>
      <th width="20%">Lunch</th>
      <th width="5%"></th>
     </tr>
     <tr class="tableinputs">

    `  
      <td><input type="text" class="break_name skill" value="Tea/Coffee"/></td>

      <td ><input type="text" class="mid_meal  skill" value="Fruits"/></td>

      <td ><input type="text"  class="lunch_name skill" value="Vegetables,salads"/></td>
      <td><button type='button' name='remove' data-row='row"+count+"' class='btn btn-danger btn-xs remove'>-</button></td>
     </tr>
    </table>
    <div align="right">
     <button type="button" name="add" id="add" class="btn btn-success btn-xs">Add</button>
    </div>
    <div align="center">
     <button type="button" name="save" id="save" class="btn btn-info">Save</button>
    </div>
    <br />
   </div>

  </div>
 </body>

Jquery Code

$(document).ready(function(){

 $('.skill').tokenfield({
  autocomplete:{
   source: ['Food1','Food2','Food3','Food4','Food5','CSS','Laravel','CakePHP'],
   delay:100
  },
  showAutocompleteOnFocus: true
 });



 var count = 1;
 var $table;

     $table=$('#crud_table tbody');

     var $existRow=$table.find('tr').eq(1);
      /* bind to existing elements on page load*/
      bindAutoComplete($existRow);
 $('#add').click(function(){



//$("#crud_table tbody  tr.tableinputs:last").clone().appendTo("#crud_table tbody");

var $row=$("#crud_table tbody  tr.tableinputs:last").clone();
 var $input=$row.find(":text").val("");
  $table.append($row);


/*
$(".break_name:last").val('');
$(".mid_meal:last").val('');
$(".lunch_name:last").val('');*/

    bindAutoComplete($row );

    $input.focus();

 }); 

 function bindAutoComplete($row ){
    /* use row as main element to save traversing back up from input*/
     $row.find('.skill').tokenfield({
  autocomplete:{
   source: ['Food1','Food2','Food3','Food4','Food5','CSS','Laravel','CakePHP'],
   delay:100
  },
  showAutocompleteOnFocus: true
 });
     $('.skill').on('tokenfield:createtoken', function (event) {
  var existingTokens = $(this).tokenfield('getTokens');
  $.each(existingTokens, function(index, token) {
    if (token.value === event.attrs.value)
      event.preventDefault();
  });
});
}

 $(document).on('click', '.remove', function(){

//If this there is only one row left clear that row instead of removing it
if ($("#crud_table tbody tr").length === 1)
$("#crud_table tbody tr:last").find("input").val('');
else
  $("#crud_table tbody tr:last").remove();
 });

});

I have tried removing the value attribute from input field but it still doesn't work

Sahil Kashyap
  • 329
  • 2
  • 10

1 Answers1

0

And I want just one input field

That's a bit challenging due the logic of the bootstrap-tokenfield is using it. But I got a possible solution, that might please you. We respect the new input fields created, but remove the attribute "name", so it is ignored by the form.

before:

$('.skill').on('tokenfield:createtoken', function (event) {
  var existingTokens = $(this).tokenfield('getTokens');
  $.each(existingTokens, function(index, token) {
    if (token.value === event.attrs.value)
      event.preventDefault();
  });
});

after

$('.skill').on('tokenfield:createtoken', function (event) {
  var existingTokens = $(this).tokenfield('getTokens');
  $.each(existingTokens, function(index, token) {
    if (token.value === event.attrs.value)
      event.preventDefault();
  });
      $(this).data('bs.tokenfield').$input.attr("name",""); //<- this is the new line
});
Toni Is-here
  • 52
  • 6
  • thanks but it is not working. All I wanted was on clicking add button the first row, as it is, gets copied with all it's tokenfield capabilities without new input field generating inside it. Maybe I should use some other tokenfield library – Sahil Kashyap Jun 29 '18 at 07:08
  • sorry, I had the line added in the wrong spot. Just EDITED my answer. Could you try again. – Toni Is-here Jun 29 '18 at 07:21
  • thank you but it's not working still. I tried it in http://jsfiddle.net/rns3hang/532/ – Sahil Kashyap Jun 29 '18 at 08:44
  • it's setting the "name=null". just as intended. so it wont send any POST data to the server... I might have misunderstood the problem. – Toni Is-here Jun 29 '18 at 08:55