javascript - 提交表单时捕获onClick事件

Question

我创建了一个表单，用于收集数据以启动外部进程(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 已更新并且查询(或进程)已启动，但前置文本或图标实际上并未显示在浏览器中。

Answer 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>

希望这对您有所帮助。