423,682 Members | 1,352 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 423,682 IT Pros & Developers. It's quick & easy.

Onblur event in dynamicaly adding text fielsd in html table

P: 2
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
Aug 29 '18 #1
Share this Question
Share on Google+
2 Replies


gits
Expert Mod 5K+
P: 5,179
what have you tried so far? please post the code that you have problems with.
Aug 29 '18 #2

P: 2
Expand|Select|Wrap|Line Numbers
  1. <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  2.   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  3.   <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
  4.   <script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
  5.   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" />
  6.   <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
  7.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  8.   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
  9.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  10. <table id="item_table">
  11. <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>
  12. </table>
  13.  
  14. <script>
  15. $(document).ready(function(){
  16.     $(document).on('click', '.add', function(){
  17.       var html = '';
  18.       html += '<tr>';
  19.        html += '<td><input type="text" name="slno[]" /></td>';
  20.       html += '<input type="text" name="name[]" id="name[]" onblur="capitalise()" />';
  21.       html += '<td><input type="text" name="capitalised[]" id="capitalised[]" /></td>';
  22.      html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove" >Remove</button></td></tr>';
  23.       $('#item_table').append(html);
  24.      });
  25.  
  26.      $(document).on('click', '.remove', function(){
  27.       $(this).closest('tr').remove();
  28.      });
  29. });
  30. function capitalise(){
  31.     var a=document.getElementsByName("name[]")[0].value;
  32.     var b=document.getElementById("capitalised[]");
  33.     b.value=a.toUpperCase();
  34. }
  35. </script>
Aug 30 '18 #3

Post your reply

Sign in to post your reply or Sign up for a free account.