提交表单时捕获 onClick 事件

Posted 2023-05-09

【中文标题】提交表单时捕获 onClick 事件

【英文标题】：Capturing onClick event when submitting a form

【发布时间】：2016-02-18 16:22:37

【问题描述】：

我创建了一个表单，它收集数据以启动外部进程（bash 脚本）或进行数据库查询（使用 queryBuilder）。由于这两个过程都可能需要一些时间，我想更新提交按钮，点击后立即，带有消息（如“处理中...，请稍候”）或图标（像 FontAwesome 的动画图标）。这是我在 Controller 类 (Symfony2) 中设置的函数：

public function inputAction(Request $request)
    

        $form = $this->createForm(new InputType());
        $form->handleRequest($request);

        if ($form->isSubmitted() && $form->isValid()) 
                   
            $data = $form->getData();
            $cmd = '... my command using $data and taking some time ... ';
            $process = new Process($cmd);
            $process->setTimeout(120);
            $process->run();

// Alternative DB query
//          $qb = $this->getDoctrine()->getManager()
//              ->createQueryBuilder();
//          $query = $qb->select('COUNT(p)')
//              ->add('from','myBundle:Ec p')
//              ->add('where', 'p.ec LIKE :ec')
//              ->setParameter('ec', $data['..'].'%')
//              ->getQuery();
//              
//          $result = $query->getSingleScalarResult();

            return $this->redirectToRoute('_input');

        

        return $this->render('myBundle:Default:form.html.twig', array(
            'form' => $form->createView(),
        ));

    

因此我在模板中添加了一个 JQuery 调用

% extends 'myBundle:Default:input.html.twig' %
% form_theme form 'bootstrap_3_layout.html.twig' %

% block form %
 form_start(form) 
 form_widget(form) 
 form_end(form) 
% endblock %

% block javascripts %

 parent() 
<script>
$(function() 
    $('.btn-default').on('click', function() 
    $(this).prepend('<i class="fa fa-refresh fa-spin"></i>  ');
    );
);
</script>

%endblock %

但是单击按钮时不显示消息或图标。只有当我在浏览器中停止进程时才会显示。我还尝试了“提交”事件，但没有成功，而“鼠标悬停”则完美运行。

编辑 1

按照@Micha 的建议，当我这样修改 JS 时：

$(function() 
    $('.btn-default').attr('prepend', 'false')
    $('.btn-default').on('click', function(e) 
    if($('.btn-default').attr('prepend') == 'false')
        e.preventDefault();
        $('.btn-default').attr('prepend','true');
        $(this).prepend('<i class="fa fa-refresh fa-spin"></i>  ');
        $(this).trigger('click');
    
    );
);

我看到 DOM 已更新并且查询（或进程）已启动，但前置文本或图标实际上并未显示在浏览器中。

【问题讨论】：

你的提交按钮有.btn-default类吗？

如何设置一个标志（例如“iconPrepended”）。它的默认值为false。当点击按钮和iconPrepended == false，使用event.preventDefault();，设置iconPrepended = true，添加你的图标并调用$(this).trigger('click');。那它有用吗？

@HarryBomrah：是的，它有（并且 onmouseover 事件运行良好）

我认为只要您点击 btn，您的表单就会被提交。将return false 添加到您的点击事件监听器。

@Micha ：它几乎可以工作...查看我的编辑：当我查看 DOM 时，我看到出现“前置”，但它没有显示！？

【参考方案1】：

preventDefault()然后submit()从点击函数中的表单怎么样？

<script>
$(function() 
    $('.btn-default').on('click', function(event) 
    event.PreventDefault();
    $(this).prepend('<i class="fa fa-refresh fa-spin"></i>  ');
    $(#my-form).submit();
    );
);
</script>

希望这会有所帮助。

【讨论】：

谢谢，但它不起作用。我想我不能在我的 php 代码的核心中调用 JS。显示的代码是 Symfony2 控制器类中的一个函数。

好的，那么感谢您的解释，我已经修改了上面的答案，我希望这有效！如果没有，请告诉我。

【参考方案2】：

我面临的问题显然只发生在 Safari 上。我的原始代码（以及@Micha 和@chris-rogers 提出的大多数解决方案）在 Chrome 和 Firefox 中都能完美运行。