如何通过按 Enter 使用 Dojo 和 XHR 发送 Zend 表单

Posted 2023-02-16

【中文标题】如何通过按 Enter 使用 Dojo 和 XHR 发送 Zend 表单

【英文标题】：How to send an Zend Form with Dojo and XHR by pressing Enter

【发布时间】：2013-05-23 18:16:40

【问题描述】：

首先，我用的东西： 我正在使用 Dojo 1.6 和 Zend Framework 1.11.5 - 不，我现在不会更新。

第二，我的情况： 我有一个启用 Zend_Dojo 支持的 Zend_Form。 我正在我的动作控制器中创建公式并将其提供给完美呈现的视图。公式调用一个 javascript 函数，该函数将变量放入一个 URL 中，该 URL 用于更新内容窗格。

第三，我的问题： 按下 [ENTER] 时不发送公式，仅在单击按钮时发送。

第四，我的代码： 注释被省略，代码变得更简单，更易于阅读。缺少某些部分。

这是我的 Zend_Form/_Dojo 的一部分：

/application/forms/CommunityDeviceFinderForm.php

class CommunityDeviceFinderForm extends Zend_Form 

public function init()
    Zend_Dojo::enableForm($this);

    $this->setMethod('post');
    $this->setAttribs(array(
        'name' => 'findDeviceForm'
    ));


public function createElements()
    // some $this->addElement here

    $this->addElement(
        'Button',
        'submitDeviceSearch',
        array(
            'label'    => tr_('Search'),
            'required' => false,
            'ignore'   => true,
            'onClick'  => 'findDevice()'  // the called javascript function
        )
    );

我忽略了我的控制器。它只是创建公式并将其提供给视图（作为“$deviceSearchForm”）。

我的视图脚本。也缩短了很多：

/application/modules/default/views/scripts/default/de/community/device-finder.phtml

<script>
    function findDevice()
        var formular = dijit.byId('<?=$this->deviceSearchForm->getAttrib('name')?>');

        if(formular.isValid())
            // collecting form vars and creating an URL
            // then refreshing a content pane with the created URL
         else 
            // error shown
        
    
</script>

<!-- some html -->

        <?=$this->deviceSearchForm?>

<!-- some more html -->

我猜 - 或者知道 - 问题是“按钮”不是“提交按钮”。但我不想刷新页面。如何将 onSubmit 之类的东西连接到公式？监听事件并防止默认操作。而是调用我的 findDevice() js 函数。

我自己听不到按键，因为几乎精确的公式又在它旁边，它应该自己工作。

我喜欢这样的东西：将属性 namend "onSubmit" 添加到公式属性数组，该数组链接到 js 函数 findDevice()。

对不起我的英语不好:(

非常感谢！ -菲利普

【问题讨论】：

即使您能够在没有提交按钮的情况下获得提交事件，您仍然有问题。某些浏览器（Safari 就是其中之一）不允许在表单中没有有效提交按钮的情况下提交事件。

谢谢！好的，所以我将按钮替换为提交按钮 - 没关系，只要我可以阻止提交事件刷新页面。相反，它必须调用 findDevice() 函数

【参考方案1】：

尝试为您的表单设置一个 onsubmit 事件，如下所示：

$this->setAttribs(array(
    'name' => 'findDeviceForm',
    'onSubmit' => 'findDevice(); return false;'
));

然后你的 findDevice() 函数在提交时被调用并且“return false;”部分阻止实际提交/页面刷新。

【参考方案2】：

解决方案是和我的一个朋友一起找到的——上面的答案。这是现在的完整代码。

将“findDevice(); return false;”作为“onSubmit”添加到 zend 公式的属性中。 然后调用函数 findDevice()。 “返回错误；”正在阻止它执行通常的操作，例如刷新。

另外，也不需要再覆盖提交按钮的onClick事件了。

所以这里是代码。视图脚本保持不变。

/application/forms/CommunityDeviceFinderForm.php

class CommunityDeviceFinderForm extends Zend_Form 

    public function init()
        Zend_Dojo::enableForm($this);

        $this->setMethod('get')
             ->setAttribs(array('name'     => 'findDeviceForm',
                                'onSubmit' => 'findDevice(); return false;'));
    

    public function createElements()

        // [...]

        $this->addElement(
            'SubmitButton',
            'submitDeviceSearch',
            array('label'    => tr_('Search'),
                  'required' => false,
                  'ignore'   => true));

        // [...]
    

感谢您的帮助！