Improve this article

jQuery Multi-input for CakePHP

I apologize for my English! This plugin helps you create are automatically added inputs. They can be used by adding a few pages of the book. men__1@mail.ru for any questions

Code for view:

<?php
echo $this->Html->script('jquery-1.7.1.min');
echo $this->Html->script('jquery.multinput');
echo $this->Form->create();
echo $this->Form->input('User.name');
?>
<div id="multi-input">
    <?php
    echo $this->Form->input('User.Children.multi_i.name');
    echo $this->Form->input('User.Children.multi_i.age');
    ?>
</div>
<?php
echo $this->Form->end('test');
?>
<script>
$(function() {
    $("#multi-input").multinput();
});
</script>

Options for plugin:

  • myPag - Object for paginator. If not passed, the paginator will be posted after the current object.
  • iterator - The string to be replaced by an array index
  • addText - The text for the button to add input
  • hideOld - Hide the new inputs or no

Code for jQuery plugin:

jQuery.fn.multinput = function(options) {
    var options = jQuery.extend({
        myPag: false,
        iterator: "multi_i",
        addText: "Add",
        hideOld: true
    }, options);

    var deffContent;
    var count = 1;
    return this.each(function(){
        var thisM = this;
        deffContent = jQuery(thisM).clone();
        var tmpContent = deffContent.clone();
        tmpContent.find("input").each(function() {
            jQuery(this).attr("name", jQuery(this).attr("name").replace(options.iterator, count));
        });
        jQuery(thisM).html("<div multi_i='" + count + "'>" + tmpContent.html() + "</div>");
        if(options.myPag == false) {
            jQuery(thisM).after("<div id='multi-paginator'></div>");
            var paginator = jQuery("#multi-paginator");
        } else {
            var paginator = options.myPag;
        }
        paginator.html("<ul><li><a class='multi-add' href='#'>" + options.addText + "</a></li><li class='active'><a href='#'>" + count + "</a></li></ul>");
        if(options.hideOld) {
            paginator.find("ul li a").live("click", function() {
                if(!jQuery(this).hasClass("multi-add")) {
                    var id = $(this).text();
                    jQuery(thisM).children().each(function() {
                        if($(this).attr("multi_i") == id) {
                            $(this).show();
                        } else {
                            $(this).hide();
                        }
                    });
                }
            });
        }
        paginator.find("ul li a.multi-add").click(function() {
            count++;
            paginator.find("ul li").removeClass("active").parent().append("<li class='active'><a href='#'>" + count + "</a></li>");
            var tmpContent = deffContent.clone();
            tmpContent.find("input").each(function() {
                jQuery(this).attr("name", jQuery(this).attr("name").replace(options.iterator, count));
            });
            if(options.hideOld) {jQuery(thisM).children().hide();};
            jQuery(thisM).append("<div multi_i='" + count + "'>" + tmpContent.html() + "</div>");
        });
    });
};

Result

Array
(
    [User] => Array
        (
            [name] => menOne
            [Children] => Array
                (
                    [1] => Array
                        (
                            [name] => Max
                            [age] => 34
                        )

                    [2] => Array
                        (
                            [name] => Jon
                            [age] => 23
                        )

                    [3] => Array
                        (
                            [name] => Frad
                            [age] => 5
                        )

                )

        )

)

men__1@mail.ru for any questions