Cakephp 2.X具有嵌入式按钮

Question

I'm following the blog tutorial featured on cakephp website: https://book.cakephp.org/2.0/en/tutorials-and-examples/blog/part-two.html

I am trying to add a Cancel button from the edit page and want it inline to the save button of the form however when I add cancel inside the form the Form->end() function in cake submits my cancel as a save, so alternatively I have tried adding the Cancel button after the Form->end(), placing it just before the closing div however now the buttons are now stacked on top of one another. Is there a way to have a redirecting cancel within the form without it submitting an edited change?

Code is as follows:

<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

The CakePHP FormHelper wraps inputs and the corresponding labels in divs. For this reason you'll not get inlined elements. If you want to use the Formhelper to create your inputs you have to disable the div by 'div' => false as a input option and wrap the cancel/submit inputs by hand.

If you simply want to reset the form and stay on the page you can use 'type' => 'reset' for an input. If you want to return to the index page

<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>

Since the Button Tag itself has no href attribute , you have to use a link for this. Let this link point to your index action and assign 'class' => 'button' to it. In your CSS you can style it like the submit button like that (I took it from 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;
}

See the CakePHP HtmlHelper and FormHelper for more Options.