Add Remove row using jQuery

jQuery Code:

  1. jQuery(document).ready(function () {
  2. /*
  3.   * Give an attribute to anchor tag 'js-add' and the value of that attribute
  4.   * to be his parent selector which is to be copied and to be added after it.
  5.   * For example if you provide <a js-add=".js-field_row">text</a>
  6.   * On click of this element will copy its parent element having class js-field_row
  7.   * and will after it.
  8.   * */
  9. jQuery(document).on('click', 'a[js-add]', function () {
  10. var element_to_clone_selector = jQuery(this).attr('js-add');
  11. var element_to_clone = jQuery(this).parents(element_to_clone_selector);
  12. var duplicate_element = element_to_clone.clone();
  13. element_to_clone.after(duplicate_element);
  14. });
  15.  
  16. /*
  17.   * Give an attribute to anchor tag 'js-remove' and the value of that attribute
  18.   * to be his parent selector which is to be deleted.
  19.   * For example if you provide <a js-remove=".js-field_row">text</a>
  20.   * On click of this element will remove its parent element having class js-field_row
  21.   * */
  22. jQuery(document).on('click', 'a[js-remove]', function () {
  23. var removable_element_selector = jQuery(this).attr('js-remove');
  24. var removable_element = jQuery(this).parents(removable_element_selector);
  25. //count all siblings, if its more than 1, delete the selected element.
  26. var total_row = removable_element.siblings(removable_element_selector).length;
  27. if (total_row > 0) {
  28. removable_element.remove();
  29. } else {
  30. alert('There should be at least one row');
  31. }
  32. });
  33.  
  34. });

 

Add two buttons inside the row to add and remove the row like:

<a class="btn btn-success" js-add=".js-field_row">+</a>
<a class="btn btn-danger" js-remove=".js-field_row">-</a>

Inside js-add and js-remove attribute of the buttons add the selector of the row. For example if you want to add/ remove row on the basis of class add .class_name
.

HTML Code example:

  1. <div class="row table-striped form-group js-field_row">
  2. <div class="col-sm-3">
  3. <div class="form-group field-templatemeta-field_name required">
  4. <label class="control-label" for="templatemeta-field_name">Field Name</label>
  5. <input type="text" id="templatemeta-field_name" class="form-control" name="TemplateMeta[field_name][]" maxlength="25">
  6.  
  7. <div class="help-block"></div>
  8. </div> </div>
  9. <div class="col-sm-3">
  10. </div>
  11. <div class="col-sm-1">
  12. </div>
  13. <div class="col-sm-3 js-field_value_col">
  14. <div class="form-group field-templatemeta-field_value">
  15. <label class="control-label" for="templatemeta-field_value">Field Value</label>
  16. <input type="hidden" id="templatemeta-field_value" class="js-field_value" name="TemplateMeta[field_value][]">
  17.  
  18. </div>
  19. </div>
  20. <div class="col-sm-2 pull-right">
  21. <label>&nbsp;</label><br>
  22. <a class="btn btn-success" js-add=".js-field_row">+</a>
  23. <a class="btn btn-danger" js-remove=".js-field_row">-</a>
  24. </div>
  25. </div>

 

US ZIP Validation using jQuery

HTML

  1. <input type="text" class="us_zip" />

jQuery

  1. $(document).ready(function(){
  2. $('body').on('blur','.us_zip',function(){
  3. $(this).val(IsValidZipCode($(this).val()));
  4. });
  5. $('body').on('keyup','.us_zip',function(event){
  6. event = event || window.event;
  7. if((event.which>95 && event.which<106) || (event.which>47 && event.which<58)){
  8. $(this).val(IsValidZipCode($(this).val()));
  9. }
  10. });
  11. });
  12.  
  13. function IsValidZipCode(zip) {
  14. var numbers = zip.replace(/\D/g, '');
  15. //var numbers = zip;
  16. var new_value = '';
  17. new_value = numbers.substr(0, 5);
  18. return new_value;
  19. }

 

Live Example: JSFiddle

US Phone Number Validation using jQuery

HTML

  1. <input type="text" class="us_phone" />

jQuery

  1. $(document).ready(function(){
  2. $('body').on('blur','.us_phone',function(){
  3. formatPhone($(this));
  4. });
  5. $('body').on('keyup','.us_phone',function(event){
  6. event = event || window.event;
  7. if((event.which>95 && event.which<106) || (event.which>47 && event.which<58)){
  8. formatPhone($(this));
  9. }
  10. });
  11. });
  12.  
  13.  
  14. function formatPhone(obj) {
  15. var numbers = obj.val().replace(/\D/g, '');
  16. var char = {0:'',3:'-',6:'-'};
  17. var new_value = '';
  18. for (var i = 0; i < numbers.length; i++) {
  19. new_value += (char[i]||'') + numbers[i];
  20. }
  21. new_value = new_value.substr(0, 12);
  22. obj.val(new_value);
  23. }

 

Live example : JSFiddle

Function Declaration vs Function Expression

You guys several times will have seen the function in two syntax.

 

    1)Function Declaration

  1. function func_name(arg_1, arg_2,..., arg_n){
  2.     .............
  3.     ...........
  4. }

    2)Function Expression

  1. var func_name;
  2. func_name=function(){
  3.     ....................
  4.     .............
  5. };
  6.  

 

Here are the differences

  • Function expression can’t be called before its definition vs Function declaration can.

 

 

 

An introduction to JavaScript Framework “Angular”

AngularJS is a javascript library similar to jquery where you don’t need to code like javascript or jquery, just play with attributes and save the time of coding. Angular JS is also called Javascript Framework i.e. MVW- Model View Whatever – framework.

 No need of coding for arithmetic calculation, just play with angular expression:

 <p>Sum of 5 and 5: {{ 5 + 5 }}</p> will produce Sum of 5 and 5: 10

Try the same with Angular Bind, you’ll get the same result, but there are some differences of syntax and others.