423,350 Members | 2,519 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 423,350 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
3 Weeks Ago #1
Share this Question
Share on Google+
2 Replies


gits
Expert Mod 5K+
P: 5,175
what have you tried so far? please post the code that you have problems with.
3 Weeks Ago #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>
3 Weeks Ago #3

Post your reply

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