Question

我正在寻找一种在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，因此在浏览器加载后我无法生成任何内容）。

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

提前致谢

Answer 1

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

由于表单助手只生成html，请查看您想要生成的html。假设你想要“添加另一个字段”，点击后会在html中添加另一个字段。你要添加的HTML将是：

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

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

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

当然，如果用户离开此页面没有提交并返回，他们会失去进度，但我认为这是关于您要完成的基础知识。

Answer 2

这是我删除元素的方法：

在视图中，我有这个：

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

我遵循的逻辑是，值0意味着，尚未删除，值1意味着删除，遵循布尔逻辑。

这是一个常规的输入元素，但使用CSS我使用了＆＃39; display：none＆＃39;属性因为我不希望用户在表单中看到它。然后我做的是然后用户点击了＆＃34;删除＆＃34;按钮删除输入元素以上传图片，有一条确认消息，确认时，用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-＆gt; data [＆＃39; Deal＆＃39;] [＆＃39; extrapicture1uploaddeleted＆＃39;]！=＆＃39; 1＆＃39;表示尚未删除额外的图片1（使用JavaScript删除上传按钮）。 $这 - ＆GT;数据[＆＃39;对策＆＃39;] [＆＃39; extrapicture1uploaddeleted＆＃39;] ==＆＃39; 1＆＃39;表示图片已删除。

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

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

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

2 个答案: