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

JQuery setTimeout inside for loop

Today I was amazed with a question asked by one of my IT friends. 

What’ll be the output of setTimeout function if I declare it inside the for loop like this.

 

  1. for(i=0;i<3;i++)
  2. {
  3.     console.log(i);
  4. }
  5.  

 

My answer was 

 

  1. 0
  2. 1
  3. 2
  4.  

 

But the answer was not correct as he challenged and I checked it too. The answer was ‘2’ only.

 

I tried to know why the output is so. I thought that this is because of threading it’ll be skipping the setTimeout function some time due to thread concept. But when I changed the condition to i<10000, but the output was same. Finally I’s not able to know the situation and problem.

 

At last I searched on forems, and I got my answer which is as follows:

The function argument to setTimeout is closing over the loop variable. The loop finishes before the first timeout and displays the current value of i, which is 4.

Because JavaScript variables only have function scope, the solution is to pass the loop variable to a function that sets the timeout. You can declare and call such a function like this:

 

  1. for (var i = 0; i < 3; i++) {
  2.     (function (x) {
  3.         setTimeout(function () { alert(x); }, 100);
  4.     })(i);
  5. }

 

You might also check this Q/A on stackoverflow

Posted in Function, JQuery, Programming by Leave a comment