javascript - Cakephp 2.X 具有内联按钮

Question

我正在关注 cakephp 网站上的博客教程: https://book.cakephp.org/2.0/en/tutorials-and-examples/blog/part-two.html

我正在尝试从编辑页面添加一个取消按钮并希望它内联到表单的保存按钮但是当我在表单中添加取消时 cake 中的 Form->end() 函数提交我的取消作为保存，所以我尝试在 Form->end() 之后添加取消按钮，将它放在关闭 div 之前，但是现在按钮现在堆叠在顶部彼此的。有没有一种方法可以在不提交已编辑更改的情况下在表单中取消重定向？

代码如下:

<div class="container">
    <h1>Edit Post</h1>
    <?php
        echo $this->Form->create('Post');
        echo $this->Form->input('article_title', array('type' => 'text','maxlength' =>'100', 'id'=>'ArticleHeader',"placeholder"=>"Article Header (100 char)", 'class'=>'centertext'));
        echo $this->Form->input('article_link', array( 'type' => 'url','maxlength' =>'200', 'id'=>'ArticleLink',"placeholder"=>"Article Link (200 char)", 'class'=>'centertext'));
        echo $this->Form->input('id', array('type' => 'hidden'));

        echo $this->Form->button('Save', array('type' => 'submit', 'class'=>'button disabled', 'id'=>'SaveEdit'), array('inline' => true));
        echo "\r\n";?>
        <button class='button' onclick="window.location.href='<?php echo Router::url(array('controller'=>'Posts',
                   'action'=>'index' ),array('inline' => true))?>'">Cancel</button>
    <?php
        echo $this->Form->end();
    ?>
</div>

Answer 1

CakePHP FormHelper 将输入和相应的标签包装在 div 中。因此，您不会获得内联元素。如果您想使用 Formhelper 来创建您的输入，您必须通过 'div' => false 禁用 div 作为输入选项，并手动包装取消/提交输入。

如果您只是想重置表单并留在页面上，您可以使用 'type' => 'reset' 作为输入。如果要返回首页

<div class="submit">
    <?php
    // Reset
    echo $this->Form->input('Reset', array(
        'label' => false,
        'type' => 'reset',
        'div' => false
    ));

    // Cancel
    echo $this->Html->link(
        __('Cancel'),
        Router::url(array('controller' => 'Posts', 'action' => 'index')),
        array('class' => 'button')
    );

    // Submit and closing Form Tag
    echo $this->Form->end(array(
        'label' => __('Submit'),
        'div' => false
    ));
    ?>
</div>

由于按钮标签本身没有 href attribute ，您必须为此使用链接。让此链接指向您的索引操作并将 'class' => 'button' 分配给它。在您的 CSS 中，您可以将其设置为类似提交按钮的样式(我从 cake.generic.css 中获取):

input[type=submit], input[type=reset], .button {
    display: inline;
    font-size: 110%;
    width: auto;
}

form .submit input[type=reset], .button {
    background:#FFDACC;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FFDACC), to(#9E2424));
    background-image: -webkit-linear-gradient(top, #FFDACC, #9E2424);
    background-image: -moz-linear-gradient(top, #FFDACC, #9E2424);
    border-color: #2d6324;
    color: #fff;
    text-shadow: rgba(0, 0, 0, 0.5) 0 -1px 0;
    padding: 8px 10px;
}
form .submit input[type=reset]:hover, .button {
    background: #9E2424;
}

参见 CakePHP HtmlHelper和 FormHelper更多选项。