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>

 

Posted in JavaScript, JQuery by Leave a comment

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

Posted in JavaScript, JQuery by Leave a comment

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

Posted in JavaScript, JQuery by Leave a comment

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.

 

 

 

Posted in Function, JavaScript, JQuery, Programming by Leave a comment