title: how to access to a html twig form field value through javascript in Symfony2?
body: <p>I would like to know how to access to a html twig form field value through javascript in Symfony2. The explanation is as below:</p>
  
  <p>This is the screen shot of the form that I have:</p>
  
  <p><img src="https://i.stack.imgur.com/Cjwt6.jpg" alt="enter image description here"></p>
  
  <p>This is the form code:</p>
  
  <pre><code>    &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt; Wkayet &lt;/title&gt;
           &lt;link rel="shortcut icon" href="{{asset('bundles/ikprojhome/images/icon-WKAYET.png')}}"&gt;
          &lt;link rel="stylesheet" type="text/css" href="{{asset('bundles/ikprojhome/css2/css.css')}}"/&gt;
          &lt;script src='{{asset('bundles/ikprojhome/lib/jquery.min.js')}}'&gt;&lt;/script&gt; 
  
          &lt;script&gt;
              function f1(){
                  if(form_widget(form.start)&gt;form_widget(form.end)){
                      alert("no");
                  }
              }
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;center&gt;
          &lt;div id="container"&gt;
              &lt;div id="header"&gt;
  
              &lt;/div&gt;
              &lt;div id="content"&gt;
                  &lt;table width="100%" height="100%" align="center"&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              {% for x in groupe%}
     &lt;form id="EventForm" action='{{path('ikproj_groupe_homepaeventsAdd',{id:x['id']})}}' method="POST" {{ form_enctype(form) }} onsubmit="f1();"&gt;
     &lt;!--&lt;form id="EventForm" action='{{path('ikproj_groupe_homepaeventsAdd',{id:x['id']})}}' method="POST" {{ form_enctype(form) }} &gt;--&gt;
                                  {% endfor %}
                                   {{ form_errors(form) }}
                                  &lt;table align="center"&gt;
                                      &lt;tr&gt;
                                          &lt;td class="separation"&gt;&lt;label for="groupname"&gt;Titre&lt;/label&gt;&lt;/td&gt;
                                          &lt;td&gt;
                                       &lt;!--&lt;input id="titre" name="titre" required="required" type="text" size="50"/&gt; --&gt;
                                           &lt;div&gt;
                                              {{ form_errors(form.title) }}
  
                                              {{ form_widget(form.title) }}
                                             &lt;/div&gt;
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
                                      &lt;tr&gt;
                                          &lt;td class="separation"&gt;&lt;label for="debut"&gt;Début&lt;/label&gt;&lt;/td&gt;
                                          &lt;td&gt;&lt;!--&lt;select id="debut" name="debut" class="select"&gt;&lt;/select&gt;--&gt;
                                              &lt;div&gt;
                                               {{ form_errors(form.start ) }}
  
                                               {{ form_widget(form.start ) }}
                                              &lt;/div&gt;
  
  
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
                                      &lt;tr&gt;
                                          &lt;td class="separation"&gt;&lt;label for="fin"&gt;Fin&lt;/label&gt;&lt;/td&gt;
                                          &lt;td&gt;&lt;!--&lt;select id="fin" name="fin" class="select"&gt;&lt;/select&gt;--&gt;
                                              &lt;div&gt;
                                               {{ form_errors(form.end ) }}
  
                                               {{ form_widget(form.end ) }}
                                            &lt;/div&gt; 
  
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
  
                                      &lt;tr&gt;
                                          &lt;td class="separation"&gt;&lt;label for="lieu"&gt;Lieu&lt;/label&gt;&lt;/td&gt;
                                          &lt;td&gt; 
  
                                           &lt;div&gt;
                                             {{ form_errors(form.location) }}
  
                                             {{ form_widget(form.location) }}
                                            &lt;/div&gt;
  
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
                                      &lt;tr&gt;
                                          &lt;td id="description" valign="top" class="separation"&gt;&lt;label for="description"&gt;Description&lt;/label&gt;&lt;/td&gt;
                                          &lt;td&gt;&lt;textarea id="ikproj_groupebundle_eventsgroupe_description" name="ikproj_groupebundle_eventsgroupe[description]" rows="5" cols="40"&gt;&lt;/textarea&gt; 
  
  
  
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
                                      &lt;tr&gt;
                                          &lt;td colspan="2" align="center" id="button" valign="bottom"&gt;&lt;input class="button" type="submit" value=""/&gt;&lt;/td&gt;
                                      &lt;/tr&gt;
                                  &lt;/table&gt;
                                           {{form_widget(form._token)}} 
                              &lt;/form&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt; 
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/center&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And this is the form class code:</p>
  
  <pre><code>public function buildForm(FormBuilderInterface $builder, array $options)
  {
      $builder
  
          -&gt;add('title','text')
          -&gt;add('start','datetime',array(
           'input' =&gt; 'datetime',
  
           'format' =&gt; 'dd/MM/yyyy H:i',
           'minutes' =&gt; array(
              0,
              30
             )
           ))
          -&gt;add('end','datetime',array(
           'input' =&gt; 'datetime',
  
           'format' =&gt; 'dd/MM/yyyy H:i',
           'minutes' =&gt; array(
              0,
              30
            ) 
          ))
  
          -&gt;add('location','text')
          -&gt;add('description','text')
  
      ;
  }
  </code></pre>
  
  <p>Actually, what I would like to do is to compare the values of the two datetime fields "start" and "end". Therefore I need to access to the value of each of that fields. By the way, please focus on this part of JavaScript code (which is at the top of the html form code):</p>
  
  <pre><code>&lt;script&gt;
          function f1(){
              if(form_widget(form.start)&gt;form_widget(form.end)){
                  alert("no");
              }
          }
      &lt;/script&gt;
  </code></pre>
  
  <p>So, my question is: what will be the correct code to do that?</p>