如何通過Symfony2中的javascript訪問html樹枝表單字段值？

Question

我想知道如何通過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>

因此，我的問題是：什么是正確的代碼？

Answer 1

為什么不直接在Javascript中訪問HTML生成的元素的屬性？ 例如，例如ID或類或名稱或其他名稱。

無論如何，如果您想訪問從控制器到Twig視圖的任何變量，都可以按照以下步驟操作：

<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，該表單類型會將類添加到date字段的html輸出中，並將javascript選擇器基於此類。

如何通過Symfony2中的javascript訪問html樹枝表單字段值？

問題描述

2 個解決方案

解決方案1
1 已采納 2014-09-01 15:13:08

解決方案2
0 2014-09-01 15:16:34

如何通過Symfony2中的javascript訪問html樹枝表單字段值？

問題描述

2 個解決方案

解決方案1 1 已采納 2014-09-01 15:13:08

解決方案2 0 2014-09-01 15:16:34

解決方案1
1 已采納 2014-09-01 15:13:08

解決方案2
0 2014-09-01 15:16:34