Question

这基本上是蛋糕形式：

<?= $this->Form->create($container, ['class' => 'form-horizontal', 'autocomplete' => 'off']) ?>  
// some inputs
<?= $this->Form->control('user_text', ['label' => false, 'class' => 'form-control']) ?>
<?= $this->Form->button('Save', ['class' => 'btn btn-info w-75 btn-save-cnl']) ?> <i class="fa fa-circle-o-notch fa-spin fa-2x fa-fw align-middle invisible"></i>  
<?= $this->Form->end() ?>

目前是jquery文件：

$(function() {
  $('.btn-save-cnl').bind('click', function(event) {
    /* Act on the event */
   $(this).prop('disabled', true);
  });
});

textarea＆＃34; user_text＆＃34;通过html5验证所需的attr。
我想在提交表格时防止双击我已经尝试了novalidate表单和bind / on / click事件，还为表单/按钮添加了id / name但什么都没有。

使用cakePHP 3.5.3，Jquery 3.2.1和Bootstrap 4

Answer 1

默认情况下，该按钮不提交表单，请尝试将type =＆gt;提交添加到按钮：

<?= $this->Form->button('Save', ['class' => 'btn btn-info w-75 btn-save-cnl', 'type' => 'submit']) ?>

Answer 2

您忘了添加te jQuery CDN
使用以下内容忘记fetch您的脚本：

$this->start("scriptBottom"); $this->end(); echo $this->fetch('scriptBottom');

这是一个完整的工作代码：

<?= $this->Form->create($container, ['class' => 'form-horizontal', 'autocomplete' => 'off']) ?>
    // some inputs
<?= $this->Form->control('user_text', ['label' => false, 'class' => 'form-control']) ?>
<?= $this->Form->button('Save', ['class' => 'btn btn-info w-75 btn-save-cnl']) ?> <i class="fa fa-circle-o-notch fa-spin fa-2x fa-fw align-middle invisible"></i>
<?= $this->Form->end() ?>

<?php
$this->Html->script([
    'https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'
],
    ['block' => 'script']);

$this->start("scriptBottom");
?>
<script>
$(function() {
$('.btn-save-cnl').bind('click', function(event) {
/* Act on the event */
alert("CLICKED");
$(this).prop('disabled', true);
});
});
</script>

<?php
$this->end();
echo $this->fetch('scriptBottom');
?>

HTML5 / CakePHP表单上的Click事件无效

2 个答案: