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

Question

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?

VisioN · Accepted Answer · 2014-09-02 08:53:36Z

2

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() );

answered Sep 2, 2014 at 8:53

VisioN

146k35 gold badges287 silver badges291 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Nadim Over a year ago

well, I tried that code but it didn't work, it displays an empty alert message. However, I when I tried to display the value of the field "title" (which is a text field) using this code: alert( $('#{{ form.title.vars.id }}').val() ); and it worked. So, it is obvious that the code doesn't work with a datetime field because the field "start" is a datetime field. Do you have any idea how to resolve that??

VisioN Over a year ago

@NadimAkram Ah, yeah! I didn't notice that start is a datetime field. Since this field is not a single_text widget type, the field is compound and will have date and time subfields inside, which, as compound fields, will have year, month, day and minute, second subfields consequently. So, to get the selected year you should use {{ form.start.date.year.vars.id }} as an id selector. Much easier will be to use single_text widget type, so the field type will become text and you'll be able to pick the general value without digging too deep.

Nadim Over a year ago

I got it. Well, is it possible to display the whole datetime field value?..I mean not the year apart or the minutes apart or the hours apart...etc. Just the whole datetime value.

VisioN Over a year ago

@NadimAkram That's what I meant, you should set the widget type to single_text (read here: symfony.com/doc/current/reference/forms/types/…), then you should be able to access date via {{ form.start.date.vars.id }} and time with {{ form.start.time.vars.id }}.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related