使用 javascript 通过 id 访问 symfony 表单小部件值

Question

我正在使用 symfony 3 生成的表单。为了验证表单，我想使用 javascript 访问表单小部件值（html 中的文本输入）。

问题是这样的：我无法通过 javascript 中的 id 或名称访问 symfony 生成的表单的文本输入（小部件），我已经为小部件添加了 id 和 name 属性，但仍然无法访问它在 javascript.

这是表单类型：

public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder ->add('titre', TextType::class, [
            'attr' => [
                'class'                       => 'form-control',
                'type'=>"text",
                'name'=>"titre" ,
                'id'=>"titre",
                'placeholder'=>"*TITRE"
            ]
        ])
         ->add('Ajouter' ,SubmitType::class,
                [
                    'attr' => [
                 'class'=>"btn",
                        'id'=>"btn_submit",
        'onClick'=>"checkifValid();"]]
                );
    }

这是javascript:

<script>
$(document).ready(function(){
  document.getElementById("titre").value = "test";
alert( document.getElementById("titre").value);
//iam just testing if i am accessing to it's value or not
})
</script>

Answer 1

如果你在你的 twig 模板（也到你的表单）而不是表单构建器中添加 attr 值更好......如果你这样做：

{{ form_widget(form.name, { 'id': 'foo' }) }}

... 您的表单 小部件的 id 肯定会是 foo（并且不会 bar_foo bar 源自类型 class name)，此外，你还保留了更多的 MVC（或类似 symfony 的 MVC）模式。

symfony/doc/3.4/#more-about-form-variables

直接约symfony.com/doc/3.4/#form-variables-reference，不过要点：

form：当前的FormView实例。

name：字段的名称（例如标题）- 但不是名称 HTML 属性，即 full_name.

所以在你的情况下：

{{ form_start(your_form, {'attr': {'id': 'your_form_id'}}) }}
    {{ form_widget(your_form.titre, {'id': 'titre', 'attr': {'class': 'form-control'} }) }}
{{ form_end(your_form) }}

真的，想一想，当你在 php formBuilder（所以在后端）中向你的表单添加 class 名称和 ID 时，在前端工作人员之间在 html/twig、css 和应用程序的 js 部分...我不这么认为，这是个好主意。

Answer 2

html 源中呈现的字段 ID 很可能包含定义您的字段的表单类型的名称。例如，对于包含文本字段 fname 的表单类型 MemberType，html 源将包含 <input id="member_fname"...>。对该字段的 jquery 引用将是 $("#member_fname")。确认所有这些的最好方法是使用浏览器的源代码显示来检查呈现的表单字段的 id。

希望对您有所帮助。

使用 javascript 通过 id 访问 symfony 表单小部件值

Access symfony form widget value by id using javascript

html

javascript

symfony

twig