Onblur event in dynamicaly adding text fielsd in html table

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • mvsinan
    New Member
    • Aug 2018
    • 2

    Onblur event in dynamicaly adding text fielsd in html table

    I have a table,in that 2 input fields in each row,I want to get the value of first input field leters capitalised to secon tnput field on out of fociss from the first fieing
    and want to add rows dynamicaly and haing the event on that rows also
    Last edited by gits; Aug 30 '18, 10:41 PM. Reason: remove double posted code
  • gits
    Recognized Expert Moderator Expert
    • May 2007
    • 5388

    #2
    what have you tried so far? please post the code that you have problems with.

    Comment

    • mvsinan
      New Member
      • Aug 2018
      • 2

      #3
      Code:
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
        <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>
      <table id="item_table">
      <tr><th>SL No</th><th>Name</th><th>Capitalised</th><th><button type="button" name="add" class="btn btn-success btn-sm add" >add</button></tr>
      </table>
      
      <script>
      $(document).ready(function(){
      	$(document).on('click', '.add', function(){
      	  var html = '';
      	  html += '<tr>';
      	   html += '<td><input type="text" name="slno[]" /></td>';
      	  html += '<input type="text" name="name[]" id="name[]" onblur="capitalise()" />';
      	  html += '<td><input type="text" name="capitalised[]" id="capitalised[]" /></td>';
      	 html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove" >Remove</button></td></tr>';
      	  $('#item_table').append(html);
      	 });
      	 
      	 $(document).on('click', '.remove', function(){
      	  $(this).closest('tr').remove();
      	 });
      });
      function capitalise(){
      	var a=document.getElementsByName("name[]")[0].value;
      	var b=document.getElementById("capitalised[]");
      	b.value=a.toUpperCase();
      }
      </script>
      Last edited by gits; Aug 30 '18, 10:42 PM. Reason: added code tags

      Comment

      Working...