By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,220 Members | 1,633 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,220 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,333
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.