How to add new form fields using jQuery and $ form helper?

Question

I am trying to give the user a link "Click here to add more information." I am trying to do this with input fields so that the field id should increase.

I would like jQuery to add this with every click, where $ i is the number of each field added:

<div id="info"></div> <?php echo $form->input("User.$i.first_name"); ?> <a href = 'add/' id='addInfo'>Add info</a> 

Here is my jQuery code:

 var current = 1; $('#addInfo').click(function(){ var newField = '<h4>Info#' + current + '</h4>'; $('#info').append(newField) current++; return false; }); 

One solution that I came up with is simply manually creating input fields inside javascript and assigning it to a newField. I think there should be a way that I can create the first working set, and then use jQuery to copy this first content, and then just increase the number of new fields.

Thanks!

Answer 1

The idea is to count all existing fields and cache this number.

 currentFields = $('#yourFormname input').size(); // caches 

Now you add another text field and give it a name based on this field count that you calculated above.

 $('#addInfo').click(function(){ $('#info').append('<input type="text" name="data[User]['+currentFields+'][first_name]"'); currentFields++; return false; }); 

Presto!

Finally, instead of adding fields as strings, you can clone () the html field and then simply replace its name attribute with a newly computed one.

Answer 2

Thanks to Andrey for pointing me in the right direction. I was able to clone the form and even add a link to delete the last cloned entries. This solution will not require me to create a form in javascript, so the whole format is still untouched and there is less code to write.

I know that this will ruin the Auth components and my form will be black as the hash will be wrong. I will have to manually clear it on the server later. Basically, I replace the first field with identifier 1 with the current increment. The three places that I see need a unique name and id - this is the label, login name and input identifier. I don't know if anyone has a better solution to replace this html value, but I have to convert it back and forth to replace it.

Here is my solution:

 // HTML <div id="user"> <div class="users"> <h4>User #1</h4> <?php echo $form->input("User.1.first_name", array( 'label' => 'First Name', 'error' => 'Please enter a valid first name.' ));?> <?php echo $form->input("User.1.last_name", array( 'label' => 'First Name', 'error' => 'Please enter a valid last name.' ));?> </div> </div> <div id="moreUsers"></div> 

// Javascript code:

 var currentUserCount = 1; $('#addUser').click(function(){ currentUserCount = cloning('#user', '#moreUser', currentUserCount); return false; }); $('#removeUser').click(function(){ $('.users:last').remove(); currentUserCount--; } return false; }); function cloning(from, to, counter) { var clone = $(from).clone(); counter++; // Replace the input attributes: clone.find(':input').each(function() { var name = $(this).attr('name').replace(1,counter); var id = $(this).attr('id').replace(1,counter); $(this).attr({'name': name, 'id': id}).val(''); }); // Replace the label for attribute: clone.find('label').each(function() { var newFor = $(this).attr('for').replace(1,counter); $(this).attr('for', newFor); }); // Replace the text between html tags: clone = clone.html().replace(1,counter); $(to).before(clone); return counter; } // end cloning 

Answer 3

This is a note for those who find this question during a search (like me).

To make the input names "cloned", you do not need to maintain growth and perform this ugly concatenation. CakePHP recognizes a null value and converts it to [] , which is more elegant since the browser and server will do the job of listing the input for you.

Here is an example of what I am saying:

 echo $form->input("User..first_name"); echo $form->input("User.first_name."); 

This will give you, respectively:

 <input name="data[User][][first_name]"> <input name="data[User][first_name][]"> 

Then you can use Javascript to clone, cleanup and add node. Here's a simplified example:

 var container=document.getElementById('info'); var element=wrapper.getElementsByTagName('input')[0]; var clone=element.cloneNode(true); var clone_inputs=clone.getElementsByTagName('input'); for (var i=0; i<clone_inputs.length; i++) { clone_inputs[i].value=''; } var result=container.appendChild(clone); 

No need to do .replace() or data[User]['+currentFields+'][first_name] , this is a much more flexible and at the same time less ugly solution.

UPDATE Also, if you are using a security component to prevent unauthorized access to the form , you might want to unblock these entries to prevent the view from being crossed out:

 $this->Form->unlockField('User.first_name'); // no trailing dot echo $this->Form->input("User.first_name."); 

Hope this helps.