title: Capturing onClick event when submitting a form
body: <p>I created a form which collects data to either launch an external process (bash script) or to make a database query (using queryBuilder). Since both procedure could take some time, I would like to update the submit button, <strong>as soon as it is clicked</strong>, with  a message (like 'Processing..., please wait') or an icon (like the animated icons of FontAwesome). Here is the function I set in my Controller class (Symfony2):</p>
  
  <pre><code>public function inputAction(Request $request)
      {
  
          $form = $this-&gt;createForm(new InputType());
          $form-&gt;handleRequest($request);
  
          if ($form-&gt;isSubmitted() &amp;&amp; $form-&gt;isValid()) 
          {           
              $data = $form-&gt;getData();
              $cmd = '... my command using $data and taking some time ... ';
              $process = new Process($cmd);
              $process-&gt;setTimeout(120);
              $process-&gt;run();
  
  // Alternative DB query
  //          $qb = $this-&gt;getDoctrine()-&gt;getManager()
  //              -&gt;createQueryBuilder();
  //          $query = $qb-&gt;select('COUNT(p)')
  //              -&gt;add('from','myBundle:Ec p')
  //              -&gt;add('where', 'p.ec LIKE :ec')
  //              -&gt;setParameter('ec', $data['..'].'%')
  //              -&gt;getQuery();
  //              
  //          $result = $query-&gt;getSingleScalarResult();
  
              return $this-&gt;redirectToRoute('_input');
  
          }
  
          return $this-&gt;render('myBundle:Default:form.html.twig', array(
              'form' =&gt; $form-&gt;createView(),
          ));
  
      }
  </code></pre>
  
  <p>I thus added a JQuery call in my template</p>
  
  <pre><code>{% 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() }}
  &lt;script&gt;
  $(function() {
      $('.btn-default').on('click', function() {
      $(this).prepend('&lt;i class="fa fa-refresh fa-spin"&gt;&lt;/i&gt;  ');
      });
  });
  &lt;/script&gt;
  
  {%endblock %}
  </code></pre>
  
  <p>But the message or the icon is not displayed when the button is clicked. It is only displayed if I stop the process in the browser. I also tried the 'submit' event, with no more success, while 'mouseover' is perfectly working.</p>
  
  <p>EDIT 1</p>
  
  <p>Following the advice from @Micha, when I modified JS like that:</p>
  
  <pre><code>$(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('&lt;i class="fa fa-refresh fa-spin"&gt;&lt;/i&gt;  ');
          $(this).trigger('click');
      }
      });
  });
  </code></pre>
  
  <p>I see that the DOM is updated and the query (or the process) launched, but the prepend text or icon is not actually displayed in the browser.</p>