提交表单时捕获 onClick 事件答案

【问题标题】：Capturing onClick event when submitting a form提交表单时捕获 onClick 事件
【发布时间】：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 时，我看到出现“前置”，但它没有显示！？

标签： javascript jquery forms symfony twig

【解决方案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 中都能完美运行。

【讨论】：