按下回车键时如何让 CakePHP 发送第二个提交按钮？答案

【问题标题】：How to get CakePHP to send second submit button when pressing enter?按下回车键时如何让 CakePHP 发送第二个提交按钮？
【发布时间】：2014-03-10 10:38:03
【问题描述】：

我有一个带有两个提交按钮的查找表单：取消和查找。当它们被点击时，它们都可以正常工作。但是按回车键，总是“取消”提交。我不想更改表单中按钮的顺序。我找到了一个解决方案来防止在“输入”上提交。但我想在输入时提交“查找”。我编写了一个 JavaScript，它在按下 enter 时调用查找按钮的单击操作。这可行，但仍然发送“取消”。

怎么了？

这是我的表格：

<?php echo $this->Form->create(null,array('onsubmit' => 'return submitOnEnter(this);')); ?>
  <table>
    <tr>
        <td><?php echo $this->Form->input('Find.num',array('autofocus'));?></td>
    </tr>
    <tr>
        <td><?php echo $this->Form->input('Find.name');?></td>
    </tr>
    <tr>
        <td><?php echo $this->Form->input('Find.address');?></td>
    </tr>
    <tr><td align="right">
        <?php echo $this->Form->submit('Cancel',array('id'=>'cancel','name'=>'cancel','onmousedown' => 'itsclicked = true; return true;','onkeydown' => 'itsclicked = true; return true;')); ?>
    </td></tr>
    <tr><td align="right">
        <?php echo $this->Form->submit('Find',array('id'=>'find','name'=>'find','onmousedown' => 'itsclicked = true; return true;','onkeydown' => 'itsclicked = true; return true;','onClick'=>"alert('The button was clicked.');")); ?>
    </td></tr>
  </table>
<?php echo $this->Form->end(); ?>

这是 JavaScript：

function submitOnEnter(form){
    if(itsclicked){
        return true;
    }
    document.getElementById('find').click();
    return true;
}

'itsclicked' 在页面加载时设置为 false。

【问题讨论】：

标签： javascript php forms cakephp

【解决方案1】：

请试试这个

这可能不是您问题的绝对答案，但这会对您有很大帮助。

请使用以下代码作为取消按钮

<?php echo $this->Form->submit('Cancel',array('type'=>'button','id'=>'cancel','name'=>'cancel','onmousedown' => 'itsclicked = true; return true;','onkeydown' => 'itsclicked = true; return true;','onClick'=>"cancelFind();")); ?>

然后使用JavaScript函数进行取消操作：

function cancelFind(){
  alert('Do what you want to do!');
}

使用以下代码进行查找操作：

function submitOnEnter(form){
  alert('Do the find operation here!.');
}

谢谢

【讨论】：

感谢您的回答。但这并没有改变什么。我正在使用 cakephp。查找操作在模型中完成。所以从表格到模型肯定有问题。我正在寻找一种方法来设置表单，使其行为符合我的预期。
我的意思是说，如果你不想要 submitOnEnter() 那么就这样做： return true;而不是警报 Ok...

【解决方案2】：

您的问题与 JavaScript 无关，解决问题的方法根本不是使用 JavaScript，而是要了解这些按钮的工作原理。

首先echo $this->Form->submit(.... 不会生成您期望它生成的内容 - 它返回' 可用于提交和重置表单的元素'。请注意“提交并重置”。在CakeAPI 中查看。

你说：

但是按回车键，总是'取消'提交

当然是这样——因为 Cake 会为你生成一个元素。

您需要使用按钮类型的<button />来缓解这种情况。 ;) 你可以这样做：

<table>
.....
.....
<tr>
  <td align="right">
      <button type="button" name="cancel" id="cancel">
  </td>
</tr>
<tr><td align="right">
    <?php echo $this->Form->submit('Find',.................... ?>
</table>

现在将单击处理程序附加到您的新 按钮类型按钮。当关注表单时，Find 将始终在 Enter 上提交，因为它仍然是一个 <input> 标记。这是因为一个叫做Browser (Window) Focus的东西。

【讨论】：