CODEWITHSUNDEEP
phpjavascriptjquerycakephp
Gabriel Santos
Gabriel Santos

Reputation: 4974

CakePHP forms from javascript

I can generate my forms fields from PHP:

<?php
    echo $this->Form->input('Model.0.name', array(
            'label' => __('Name')
        )
    );
?>

But, need to create the fields "on-the-fly", when user click "New name field" for instance. I don't know how to begin..

Upvotes: 0

Views: 731

Answers (1)

manix
manix

Reputation: 14747

I don't know how to cakephp works, but assuming that it works with Controllers->functions (site.com/controller/function) you'd can do something like this:

<?

class FieldCreator extends Controller{

    public function input()
    {
        echo $this->Form->input('Model.0.name', array(
            'label' => __('%name%')
            )
        );
    }   
}

JQuery

Jquery provide a get function in order to make a GET request, like to FieldCreator controller. Suppose that your view looks like this:

<html>
    <head>
            <!-- import jquery framewrok -->
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    </head>
    <body>

            <!-- This link will act like a button -->
        <a href="#" class="new_input">New name field<a>

        <form id="my_form">

        </form>

            <!-- Prepare the script once the page is ready -->
        <script type="text/javascript">
            $(document).ready(function(){  

                            var content = '';
                            var index = 1;
                            // Use click event in the link above to trigger the request
                $('.new_input').click(function(){ 

                                    if (content == '')
                                    // Do the request to site.com/FieldCreator/input
                    $.get('site.com/FieldCreator/input', function(data){ 
                            content = data;
                    });  

                                   //create the input
                                  createInput('name_' + index);
                });
            });

                    function createInput(name)
                    {
                   var input = content.replace('%name%', name);
                   $('#my_form').append(input);
                       index ++;
                     }




        </script>

    </body>
</html>

However, if you want to re-utilize the GET result you can:

  1. Change 'label' => __('Name') to 'label' => __('%name%')

Upvotes: 2

Related Questions