如何通过Symfony2中的javascript访问html树枝表单字段值？
[英]how to access to a html twig form field value through javascript in Symfony2?
问题描述
I would like to know how to access to a html twig form field value through javascript in Symfony2. 
我想知道如何通过Symfony2中的javascript访问html树枝表单字段值。 The explanation is as below: 解释如下：
This is the screen shot of the form that I have: 这是我具有的表单的屏幕截图：
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(){
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>
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')
;
}
Actually, what I would like to do is to compare the values of the two datetime fields "start" and "end". 实际上，我想做的是比较两个日期时间字段“开始”和“结束”的值。 Therefore I need to access to the value of each of that fields. 因此，我需要访问每个字段的值。 By the way, please focus on this part of JavaScript code (which is at the top of the html form code): 顺便说一下，请专注于这部分JavaScript代码（位于html表单代码的顶部）：
<script>
function f1(){
if(form_widget(form.start)>form_widget(form.end)){
alert("no");
}
}
</script>
So, my question is: what will be the correct code to do that? 因此，我的问题是：什么是正确的代码？
2 个解决方案
解决方案1
1 已采纳 2014-09-01 15:13:08
Why you don't access directly to properties of the HTML generated elements at Javascript? 为什么不直接在Javascript中访问HTML生成的元素的属性？ Like for example ID or class or name or something else. 例如，例如ID或类或名称或其他名称。
Anyway if you'll like to access any var that comes from controller to Twig view you can do it as follow: 无论如何，如果您想访问从控制器到Twig视图的任何变量 ，都可以按照以下步骤操作：
<script>
alert('{{ myvar }}');
</script>
Notice you are tying to access form_widget and that returns the complete HTML element, for example: 注意，您要访问form_widget并返回完整的HTML元素，例如：
<input type="text" name="form[title]" id="form[title]" />
and not the value of that input, take care of that. 而不是该输入的值，请注意这一点。
Second solution based on your comments 根据您的意见的第二个解决方案
Following your comments and your needs try this code instead: 根据您的意见和需求，尝试以下代码：
<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>
A few things more: 还有几件事：
- I made a typo, yes, but remember I'm trying to help you with some ideas, I'm not doing your work so the best you can do is try to understand my code and apply to yours 我打错了，是的，但是请记住，我正在尝试为您提供一些想法，我没有在做您的工作，所以您可以做的最好的就是尝试理解我的代码并将其应用于您的代码
- As image shows you have Symfony
datetimefield so maybe my code won't work at all but give it a try如图所示，您具有Symfony datetime字段，所以也许我的代码根本无法工作，但请尝试一下
解决方案2
0 2014-09-01 15:16:34
You can retrieve the id of the form fields in your javascript like this : 您可以像这样在javascript中检索表单字段的ID：
"{{ form.start.vars.id|e('js') }}"
Then, using this id, retrieve your javascript/jQuery/... element and get its value. 然后，使用此ID检索您的javascript / jQuery / ...元素并获取其值。
If you are planing to use this form field on different forms, it may be a good idea to create a custom FormType that will add classes to the html output of your to date fields and base your javascript selector on this classes. 如果您打算在不同的表单上使用此表单字段，则最好创建一个自定义FormType，该表单类型会将类添加到date字段的html输出中，并将javascript选择器基于此类。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.