how to display to a html twig form field value through javascript using an alert message in Symfony2?

问题

I would like to know how to display to a html twig form field value through javascript using an alert message in Symfony2. This is the form code:

     <html>
    <head>
        <title> Wkayet </title>
         <link rel="shortcut icon" href="{{asset('bundles/ikprojhome/images/icon-WKAYET.png')}}">
        <link rel="stylesheet" type="text/css" href="{{asset('bundles/ikprojhome/css2/css.css')}}"/>
        <script src='{{asset('bundles/ikprojhome/lib/jquery.min.js')}}'></script> 

        <script>
            function f1(){
                alert($('#ikproj_groupebundle_eventsgroupe_start').val());
            }
        </script>
    </head>
    <body>
    <center>
        <div id="container">
            <div id="header">

            </div>
            <div id="content">
                <table width="100%" height="100%" align="center">
                    <tr>
                        <td>
                            {% for x in groupe%}
   <form id="EventForm" action='{{path('ikproj_groupe_homepaeventsAdd',{id:x['id']})}}' method="POST" {{ form_enctype(form) }} onsubmit="f1();">
   <!--<form id="EventForm" action='{{path('ikproj_groupe_homepaeventsAdd',{id:x['id']})}}' method="POST" {{ form_enctype(form) }} >-->
                                {% endfor %}
                                 {{ form_errors(form) }}
                                <table align="center">
                                    <tr>
                                        <td class="separation"><label for="groupname">Titre</label></td>
                                        <td>
                                     <!--<input id="titre" name="titre" required="required" type="text" size="50"/> -->
                                         <div>
                                            {{ form_errors(form.title) }}

                                            {{ form_widget(form.title) }}
                                           </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="separation"><label for="debut">Début</label></td>
                                        <td><!--<select id="debut" name="debut" class="select"></select>-->
                                            <div>
                                             {{ form_errors(form.start ) }}

                                             {{ form_widget(form.start ) }}
                                            </div>


                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="separation"><label for="fin">Fin</label></td>
                                        <td><!--<select id="fin" name="fin" class="select"></select>-->
                                            <div>
                                             {{ form_errors(form.end ) }}

                                             {{ form_widget(form.end ) }}
                                          </div> 

                                        </td>
                                    </tr>

                                    <tr>
                                        <td class="separation"><label for="lieu">Lieu</label></td>
                                        <td> 

                                         <div>
                                           {{ form_errors(form.location) }}

                                           {{ form_widget(form.location) }}
                                          </div>

                                        </td>
                                    </tr>
                                    <tr>
                                        <td id="description" valign="top" class="separation"><label for="description">Description</label></td>
                                        <td><textarea id="ikproj_groupebundle_eventsgroupe_description" name="ikproj_groupebundle_eventsgroupe[description]" rows="5" cols="40"></textarea> 



                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2" align="center" id="button" valign="bottom"><input class="button" type="submit" value=""/></td>
                                    </tr>
                                </table>
                                         {{form_widget(form._token)}} 
                            </form>
                        </td>
                    </tr>
                </table> 
            </div>
        </div>
    </center>
</body>
</html>

And this is the form class code:

public function buildForm(FormBuilderInterface $builder, array $options) { $builder

    ->add('title','text')
    ->add('start','datetime',array(
     'input' => 'datetime',

     'format' => 'dd/MM/yyyy H:i',
     'minutes' => array(
        0,
        30
       )
     ))
    ->add('end','datetime',array(
     'input' => 'datetime',

     'format' => 'dd/MM/yyyy H:i',
     'minutes' => array(
        0,
        30
      ) 
    ))

    ->add('location','text')
    ->add('description','text')

;

}

please focus on this part of JavaScript code (which is at the top of the html form code), because I tried this and it didn't work:

<script>
            function f1(){
                alert($('#ikproj_groupebundle_eventsgroupe_start').val());
            }
        </script>

So, my question is: what will be the correct code to do that?

回答1:

The ids of dynamic form elements are auto generated in Twig, so your approach won't really work. The best way is to utilise the generated id in the template. It can be easily accessed via vars property:

alert( $('#{{ form.start.vars.id }}').val() );

来源：https://stackoverflow.com/questions/25619339/how-to-display-to-a-html-twig-form-field-value-through-javascript-using-an-alert

标签

javascript

forms

symfony

twig

alert