Tag Archives: jquery

JQuery, Duplicate form items with .clone()

Assuming that we have a dynamic form creation, where we need to add as many form items as we need, the problem is that when we duplicate items we’ll get the same input names ..

So this is my own solution to this problem but if you have other methods don’t hesitate to share ^^

This is out form element to duplicate :

<ul >
    <div class="toClone">
        <li id="li_1" >
            <label for="element_1">Name </label>
            <div>
                <input name="name" type="text" maxlength="255" value=""/>
            </div>
        </li>
        <li id="li_2" >
            <label for="element_2">Surname </label>
            <div>
                <input  name="surname" type="text" maxlength="255" value=""/>
            </div>
        </li>
    </div>
...

And this is the js, assuming that we have already set a button to add the cloned content :

counter = 0;
$('#addButton').live('click', function(){
  counter ++;
  cloned = $('.toClone').first().clone();
  cloned.find('input[type=text]').each(function(){
     name = $(this).attr('name').split('_');
     (this).attr('name', name[0] + '_' + counter);

   });
   // path to parent element.
   cloned.prependTo($(this).parent().parent() ... );
});

JQuery, create your own plugin

First of all let’s start with basic rule and it’s also a best practice when you write JQuery Plugins : to make sure that what you are writing doesn’t make conflicts with others libraries use JQuery instead of “$” in the plugin declaration :

(function( $ ){

  $.fn.highlight = function() {
    ..
  };
})( jQuery );

instead of :

$.fn.highlight = function(){ .. }

Okey now we have the minimal code for a JQuery Plugin, let’s continue with some other stuffs

(function( $ ){

  $.fn.highlight = function() {
    //refers the object where plugin was called.
    console.log($(this));
  };
})( jQuery );

If you run this within a html code like this :

<body>
  <script>
    $(document).ready(function(){
                $('#container').click(function(){
                    $(this).highlight();
                });
            });
  </script>
  <div id="container">
    Click, and my color will change !
  </div>
</body>

The result :

Adding some options

Our plugin will need some options to make it more flexible :

(function( $ ){

  $.fn.highlight = function(options) {

    var defaults = {
        color : '#943D20',
        time  : 1000
    }
    //if option exists merge it with defaults
    if ( options ) {
      $.extend( defaults, options );
    }

   $(this).animate({
       backgroundColor:defaults.color
   }, defaults.time);
  };
})( jQuery );

At this point, if highlight get option object it will take options and mege them with defaults. Now if you click on the text the background color will change using defined options or defaults.

Note;  to test this code you need to include jquery-ui library for color animation.

Further reading:

http://docs.jquery.com/Plugins/Authoring