如何通过 Symfony2 中的 javascript 访问 html 树枝表单字段值？答案

【问题标题】：how to access to a html twig form field value through javascript in Symfony2?如何通过 Symfony2 中的 javascript 访问 html 树枝表单字段值？
【发布时间】：2014-09-01 15:02:59
【问题描述】：

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

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

这是表单代码：

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

    ;
}

实际上，我想做的是比较两个日期时间字段“开始”和“结束”的值。因此，我需要访问每个字段的值。对了，请关注这部分 JavaScript 代码（在 html 表单代码的顶部）：

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

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

【问题讨论】：

标签： javascript forms symfony field twig

【解决方案1】：

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

无论如何，如果您想访问来自控制器的任何 var 到 Twig 视图，您可以按如下方式进行：

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

请注意，您正在绑定访问 form_widget 并返回完整的 HTML 元素，例如：

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

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

基于您的 cmets 的第二个解决方案

按照您的 cmets 和您的需要尝试使用此代码：

<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 字段，所以也许我的代码根本不起作用，但请尝试一下

【讨论】：

好吧，例如我怎样才能访问输入的值 {{ form_widget(form.start ) }}??...你知道如何做到这一点吗？？
正如我之前所说，尝试渲染你的页面并使用像 Firebug 这样的工具，探索页面的代码，在某个地方应该是 {{ form_widget(form.start ) }} 的结果，但呈现为纯 HTML，之后检查 ID、名称或类并从 Javascript 访问它，例如，如果结果 HTML 代码是 <input type="text" name="form[start]" id="form[start]" />，那么从 Javascript 中您可以执行类似 $('#form[start]').val() 的操作，您将在该字段中获得值。请注意，我使用 jQuery 作为示例
为了知道表单域“start”的id，我尝试了这个代码：alert('{{ form.start.vars.id|e('js') }}');我得到了一条警报消息：ikproj_groupebundle_eventsgroupe_start ...然后我尝试了这段代码：alert($('#ikproj_groupebundle_eventsgroupe_start').val());但是我得到的是一个空的警报消息！...那么该代码有什么问题？？...正确的代码是什么？？...您有什么想法吗？？
当然它会返回并清空警报，因为默认情况下您没有为该输入设置任何值，请检查您自己的代码，您会明白我在说什么。你可以试试这个$(document).ready(function(){ $('#ikproj_groupebundle_eventsgroupe_start').on('change, function() { alert$(this).val() } });，你应该看到新值写在输入文本上，并尝试将加载页面后生成的 HTML 留在此处，我说的是向导，因为我不明白你的意思正在做
我想要做的是，当我单击按钮提交表单时，会显示一条警报消息，其中包含字段“start”的值。顺便说一句，我试过了：$(document).ready(function(){ $('#ikproj_groupebundle_eventsgroupe_start').on('change, function() { alert$(this).val() } }); 但没用！！

【解决方案2】：

您可以像这样在 javascript 中检索表单字段的 ID：

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

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

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

【讨论】：

好吧，我试过了，其实我把这个代码：alert({{ form.start.vars.id|e('js') }});提交表单后，我会看到以下警告消息：[object HTMLDivElement] ...您可以在我的代码中注意到，任何表单字段都没有 id，因为它们都在 twig 中。
不要忘记引号：alert('{{ form.start.vars.id|e('js') }}');
你使用 jQuery 还是其他 javcascript 框架？
是的，我正在使用 jQuery。顺便说一句，我试过 alert('{{ form.start.vars.id|e('js') }}');这就是我作为警报消息获得的内容：ikproj_groupebundle_eventsgroupe_start ...那么我该如何利用这些数据？？...我应该把什么作为代码？