Question

我想知道如何通过Symfony2中的javascript访问html twig表单字段值。解释如下：

这是我所拥有的表单的屏幕截图：

enter image description here

这是表格代码：

    <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(){
                if(form_widget(form.start)>form_widget(form.end)){
                    alert("no");
                }
            }
        </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>

这是表单类代码：

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')

    ;
}

实际上，我想要做的是比较两个日期时间字段“start”和“end”的值。因此，我需要访问每个字段的值。顺便说一句，请关注这部分JavaScript代码（位于html表单代码的顶部）：

<script>
        function f1(){
            if(form_widget(form.start)>form_widget(form.end)){
                alert("no");
            }
        }
    </script>

所以，我的问题是：这样做的正确代码是什么？

Answer 1

为什么您不能直接访问Javascript中HTML生成元素的属性？例如ID或类或名称或其他内容。

无论如何，如果您想要访问从控制器到Twig视图的任何 var ，您可以按照以下步骤操作：

<script>
    alert('{{ myvar }}');
</script>

请注意，您想要访问form_widget并返回完整的HTML元素，例如：

<input type="text" name="form[title]" id="form[title]" />

而不是该输入的值，请注意这一点。

基于您的评论的第二个解决方案

根据您的意见和您的需求，请尝试使用此代码：

<script>
    $(document).ready(function(){
        // I've to do it in this way since your button 
        // has none class or id to use in jQuery selector  
        // you should take care of that too

        $('input [type=submit]).on('click', function() {
            alert($('#ikproj_groupebundle_eventsgroupe_start').val());
        })
    }); 
</script>

更多：

我写了一个拼写错误，是的，但请记住我试图帮助你提出一些想法，我没有做你的工作所以你能做的最好的事情就是尝试理解我的代码并申请你的代码
由于图片显示您有Symfony datetime字段，所以也许我的代码根本不会工作但是试一试

Answer 2

您可以在javascript中检索表单字段的ID，如下所示：

"{{ form.start.vars.id|e('js') }}"

然后，使用此id，检索您的javascript / jQuery / ...元素并获取其值。

如果您计划在不同的表单上使用此表单字段，最好创建一个自定义FormType，它将类添加到您的日期字段的html输出中，并将您的javascript选择器基于此类。< / p>

如何通过Symfony2中的javascript访问html twig表单字段值？

2 个答案: