Add and remove form fields in Cakephp

Im looking for a way to have a form in cakephp that the user can add and remove form fields before submitting, After having a look around and asking on the cake IRC the answer seems to be to use Jquery but after hours of looking around i cannot work out how to do it.

The one example i have of this in cake i found at - http://www.mail-archive.com/cake-php@googlegroups.com/msg61061.html but after my best efforts i cannot get this cod开发者_运维技巧e to work correctly ( i think its calling controllers / models that the doesn't list in the example)

I also found a straight jquery example (http://mohdshaiful.wordpress.com/2007/05/31/form-elements-generation-using-jquery/) which does what i would like my form to do but i cannot work out how to use the cakephp form helper with it to get it working correctly and to get the naming correct. (obviously the $form helper is php so i cant generate anything with that after the browser has loaded).

I an new to cake and have never used jQuery and i am absolutely stumped with how to do this so if anyone has a cakephp example they have working or can point me in the right direction of what i need to complete this it would be very much appreciated.

Thanks in advance

I would take the straight jquery route, personally. I suppose you could have PHP generate the code for jquery to insert (that way you could use the form helper), but it adds complexity without gaining anything.

Since the form helper just generates html, take a look at the html you want generated. Suppose you want something to "add another field", that when clicked, will add another field in the html. Your html to be added will be something like:

<input type="text" name="data[User][field][0]" />

Now, to use jquery to insert it, I'd do something like binding the function add_field to the click event on the link.

    $(document).ready( function() {
      $("#link_id").click( 'add_field' );
      var field_count = 1;
    } );

    function add_field()
    {
      var f = $("#div_addfield");
      f.append( '<input type="text" name="data[User][field][' + field_count + ']" />' );
      field_count++;
    }

Of course, if a user leaves this page w/o submitting and returns, they lose their progress, but I think this is about the basics of what you're trying to accomplish.

This was my approach to remove elements:

In the view, I had this:

echo $form->input('extrapicture1uploaddeleted', array('value' => 0));

The logic I followed was that value 0 meant, not deleted yet, and value 1 meant deleted, following a boolean logic.

That was a regular input element but with CSS I used the 'display: none' property because I did not want users to see that in the form. Then what I did was that then users clicked the "Delete" button to remove an input element to upload a picture, there was a confirmation message, and when confirming, the value of the input element hidden with CSS would change from 0 to 1:

    $("#deleteextrapicture1").click(
    function() {
        if (confirm('Do you want to delete this picture?')) {
            $('#extrapicture1upload').hide();
            // This is for an input element that contains a boolean value where 0 means not deleted, and 1 means deleted.
            $('#DealExtrapicture1uploaddeleted').attr('value', '1');
        }
        // This is used so that the link does not attempt to take users to another URL when clicked.
        return false;
    }
);

In the controller, the condition $this->data['Deal']['extrapicture1uploaddeleted']!='1' means that extra picture 1 has not been deleted (deleting the upload button with JavaScript). $this->data['Deal']['extrapicture1uploaddeleted']=='1' means that the picture was deleted.

I tried to use an input hidden element and change its value with JavaScript the way I explained above, but I was getting a blackhole error from CakePHP Security. Apparently it was not allowing me to change the value of input elements with JavaScript and then submit the form. But when I used regular input elements (not hidden), I could change their values with JavaScript and submit the form without problems. My approach was to use regular input elements and hide them with CSS, since using input hidden elements was throwing the blackhole error when changing their values with JavaScript and then submitting the form.

Hopefully the way I did it could give some light as a possible approach to remove form fields in CakePHP using JavaScript.