在 Cakephp 中添加和删除表单字段答案

【问题标题】：Add and remove form fields in Cakephp在 Cakephp 中添加和删除表单字段
【发布时间】：2010-01-28 17:04:48
【问题描述】：

我正在寻找一种在 cakephp 中创建表单的方法，用户可以在提交之前添加和删除表单字段，环顾四周并询问蛋糕 IRC 后，答案似乎是使用 Jquery，但经过数小时的查找周围我不知道该怎么做。

我在蛋糕中找到的一个例子 - http://www.mail-archive.com/cake-php@googlegroups.com/msg61061.html 但经过我的最大努力，我无法让这段代码正常工作（我认为它的调用控制器/模型没有在示例中列出）

我还找到了一个直接的 jquery 示例 (http://mohdshaiful.wordpress.com/2007/05/31/form-elements-generation-using-jquery/)，它可以执行我希望我的表单执行的操作，但我无法弄清楚如何使用 cakephp 表单助手来使其正常工作并正确命名. （显然 $form 助手是 php，所以在浏览器加载后我无法生成任何东西）。

我是 cake 新手，从未使用过 jQuery，我完全不知道如何做到这一点，所以如果有人有一个 cakephp 示例，他们正在工作，或者可以指出我需要完成的正确方向，它会非常感谢。

提前致谢

【问题讨论】：

标签： php jquery forms cakephp

【解决方案1】：

我个人会采取直接的 jquery 路线。我想你可以让 PHP 生成要插入的 jquery 代码（这样你就可以使用表单助手），但它增加了复杂性而没有任何收获。

由于表单助手只是生成html，所以看看你要生成的html。假设您想要“添加另一个字段”，单击时会在 html 中添加另一个字段。您要添加的 html 将类似于：

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

现在，要使用 jquery 插入它，我会做一些事情，比如将函数 add_field 绑定到链接上的点击事件。

    $(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++;
    }

当然，如果用户离开此页面而未提交并返回，他们将失去进度，但我认为这是关于您要完成的基本任务。

【讨论】：

完美，我确实考虑过这样做，但想看看是否有更以蛋糕为中心的方法，干杯
这是一个很好的答案。如何对此进行服务器端验证？为了保存，你使用 saveAll() 吗？

【解决方案2】：

这是我删除元素的方法：

在视图中，我有这个：

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

我遵循的逻辑是值 0 表示尚未删除，值 1 表示已删除，遵循布尔逻辑。

这是一个常规的输入元素，但在 CSS 中我使用了“display: none”属性，因为我不希望用户在表单中看到它。然后我做的是，然后用户点击“删除”按钮删除一个输入元素上传图片，有一个确认消息，当确认时，用CSS隐藏的输入元素的值会从0变为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;
    }
);

在控制器中，条件 $this->data['Deal']['extrapicture1uploaddeleted']!='1' 表示额外的图片 1 没有被删除（用 JavaScript 删除上传按钮）。 $this->data['Deal']['extrapicture1uploaddeleted']=='1' 表示图片被删除。

我尝试使用输入隐藏元素并按照我上面解释的方式使用 JavaScript 更改其值，但我收到了来自 CakePHP Security 的黑洞错误。显然它不允许我使用 JavaScript 更改输入元素的值，然后提交表单。但是当我使用常规输入元素（未隐藏）时，我可以使用 JavaScript 更改它们的值并毫无问题地提交表单。我的方法是使用常规输入元素并使用 CSS 隐藏它们，因为使用输入隐藏元素在使用 JavaScript 更改其值然后提交表单时会引发黑洞错误。

希望我这样做的方式可以为使用 JavaScript 删除 CakePHP 中的表单字段提供一些启示。

【讨论】：